如何使用Mvc3 asp.net中的Ajax Jquery从视图向控制器发送List <>模型？

Question

How Can I Send List<int> Roles Model? For example from view To Controller.
Using Ajax Jquery in Mvc3 asp.net not razor.
I'm using this code

var url = '<%:Url.Action("Roles","RolesManager") %>';
$.ajax({
    url: url,
    type: 'post',
    dataType: "json",
    traditional: true,
    data: $('#EditUserForm').serialize(),
    success: function () {
        $('#EditUserForm').submit();
    },
    error: function () {
    }
});

but when I debug the controller List<int> Roles = null .

mode in page like

<%: Html.ListBoxFor(m => m.UserRoles, new MultiSelectList(Model.UserRoles, "UserRoleId", "UserRoleName"), new { @id = "UserRoles", @class = "ddlUserRolesCls" })%>

Answer 1

It's a Model Bind List, in this case, you have to send the information using the same name of your parameter in the name attribute of html inputs tag and asp.net model binder will convert it on a collection on the post. Your javascript looks fine. Try something like this:

In the view:

<input type="text" name="roles" value="1" />
<input type="text" name="roles" value="4" />
<input type="text" name="roles" value="2" />
<input type="text" name="roles" value="8" />

in the controller:

public ActionResult Post(List<int> roles) 
{
    // process
}

Also take a look at this article: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

Answer 2

Change your viewmodel like this. Note that we have a SelectedUserRoles property of type int array .

public class EditUserRole
{  
  public List<SelectListItem> UserRoles{ get; set; }
  public int[] SelectedUserRoles { set; get; }
  //Also other relevant properties here
}

And in my Get Action, fill the UserRoles property

public ActionResult EditUser(int id)
{
  var vm=new EditUserRole();
  vm.UserRoles=GetUserRoles();
}
public List<SelectListItem> GetUserRoles()
{
  var roles= new List<SelectListItem>();
  // the below is hardcoded. Get it from DB And fill it here
  roles.Add(new SelectListItem { Value="1",Text="Admin" });
  roles.Add(new SelectListItem { Value = "2", Text = "Editor" });
  return roles;
}

and in your view which is strongly typed to EditUserRole ,

@Html.ListBoxFor(m => m.SelectedUserRoles,
              new MultiSelectList(Model.UserRoles, "Value", "Text"),
                          new { @id = "UserRoles", @class = "ddlUserRolesCls" })

When you post your form, you will get the selected Roles ID in the SelectedUserRoles property of the posted model.

[HttpPost]
public ActionResult Edit(EditUserRole model)
{
  // check model.SelectedUserRoles
  // to do : Save and redirect
}