Reputation: 2842

mvc how to submit a viewmodel?

I currently want a user to update a list of data and be able to submit it back. The data the user is updating are similar data, at the moment it is a a handful of textboxes. They update the information and submit it back.

At the moment I have created the following viewModel

public class Name
{
    public int Id { get; set; }
    public string FullName { get; set; }
}

This will hold the data. So from the controller I am mocking the data at the moment

public ActionResult Index()
{

    var listOfNames = new List<Name>();

    var name1 = new Name();
    name1.Id = 1;
    name1.FullName = "Test Name1";

    var name2 = new Name();
    name2.Id = 2;
    name2.FullName = "Test Name2";

    var name3 = new Name();
    name3.Id = 3;
    name3.FullName = "Test Name3";

    var name4 = new Name();
    name4.Id = 4;
    name4.FullName = "Test Name4";

    listOfNames.Add(name1);
    listOfNames.Add(name2);
    listOfNames.Add(name3);
    listOfNames.Add(name4);

    return View(listOfNames);
}

Then the view looks like the following,

@model IEnumerable<MvcApplication1.Models.Name>
@using (Html.BeginForm())
{
    foreach (var item in Model)
    {
        @Html.TextBox("namevalues", item.FullName, new { id = "name" + item.Id, data_id = item.Id})
    <br />
    }

    <input type="submit" />
}

when the user submits the data I would like to have the viewmodel back populated, so that I should be able to do the following

[HttpPost]
public ActionResult Index(IEnumerable<Name> names)
{

    return View("index", names);
}

Do I need to use javascript to actually collate the info together then pass that? or is there some MVC magic I don't know about?

Upvotes: 3

Answers (4)

Amol

Reputation: 1461

Try Using

@Html.TextBoxFor(m => item.FullName, new { id = "name" + item.Id, data_id = item.Id });

instead of

@Html.TextBox("namevalues", item.FullName, new { id = "name" + item.Id, data_id = item.Id})

Upvotes: -1

Brendan Vogt

Reputation: 26048

No you do not need JavaScript. You can use a view model that you can bind to your view. I don't like to pass domain models to the view, I prefer a view model that is much more scaled down with regards to data. It could like this:

public class NameListViewModel
{
     public List<Name> Names { get; set; }
}

Now you need to populate the list of names in your controller like this:

public ActionResult Index()
{
     NameListViewModel viewModel = new NameListViewModel();
     viewModel.Names = new List<Name>();
     viewModel.Names.Add(new Name { Id = 1, FullName = "Test Name1" });
     viewModel.Names.Add(new Name { Id = 2, FullName = "Test Name2" });
     viewModel.Names.Add(new Name { Id = 3, FullName = "Test Name3" });
     viewModel.Names.Add(new Name { Id = 4, FullName = "Test Name4" });

     return View(viewModel);
}

[HttpPost]
public ActionResult Index(NameListViewModel viewModel)
{
     // All the values should still be in viewModel
     // Do whatever you need to do
}

And then on your view you can use an array of text boxes like this:

@model YourProject.ViewModels.Names.NameListViewModel

@for (int i = 0; i < Model.Names.Count(); i++)
{
     <div>
          @Html.TextBoxFor(x => x.Names[i].FullName)
          @Html.HiddenFor(x => x.Names[i].FullName)
     </div>
}

Try it and see if it works. Modify the code to fit in with your scenario and do the rest that you need.

I hope this helps.

Upvotes: 5