Pass multiple data fields with DropDownList on change

Question

I'm currently trying to create a modify user role page. Below is what I have accomplished so far...

(The username field DOES populate, I've just blanked it out for now.)

Below is my view drop down...

@Html.DropDownList("Roles", new SelectList(ViewBag.RoleList), "Modify Role", new { @class = "form-control" })

and here is the controller action that I need it to call

    [AuthLog(Roles = "Super Admin")]
    [HttpPost]
    public ActionResult ModifyUser(string id)
    {
        string newRole = Request.Form["Roles"];
        if (id != null && newRole != null)
        { 
            ApplicationDbContext context = new ApplicationDbContext();
            var newRoleName = context.Roles.FirstOrDefault(u => u.Name == newRole);
            var newid = newRoleName.Id;
            context.UpdateRole(id, newid);
        }
        return RedirectToAction("Index", "UserControl");
    }

The below is the data I'm sending to my method, and how I'm creating my dropdownlist.

    {
        [AuthLog(Roles = "Super Admin")]
        public ActionResult Index()
        {
            ApplicationDbContext context = new ApplicationDbContext();
            var usersWithRoles = (from user in context.Users
                                  select new
                                  {
                                      UserId = user.Id,
                                      Username = user.UserName,
                                      user.Email,
                                      RoleNames = (from userRole in user.Roles
                                                   join role in context.Roles on userRole.RoleId
                                                       equals role.Id
                                                   select role.Name).ToList()
                                  }).ToList().Select(p => new UserControlModel()

                                  {
                                      UserId = p.UserId,
                                      Username = p.Username,
                                      Email = p.Email,
                                      Role = string.Join(",", p.RoleNames)
                                  });
            var roleList = context.Roles
                .OrderByDescending(x => x.Id)
                .Select(x => x.Name).ToList();
            ViewBag.RoleList = roleList;
            return View(usersWithRoles);
        }

View:

@using (Html.BeginForm("ModifyUser", "UserControl", FormMethod.Post, new { id = "ManageUser" }))
{

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="box-title">
                <b>Users with Roles</b>
            </h3>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-bordered table-condensed" id="UsersWithRoles">
                <thead>
                <tr>
                    <td><b>Username</b></td>
                    <td><b>Roles</b></td>
                </tr>
                </thead>
                @foreach (var user in Model)
                {
                    <tr>
                        <td>@user.Username</td>
                        <td>@user.Role</td>
                        <td>@Html.DropDownList("Roles", new SelectList(ViewBag.RoleList), "Modify Role", new { @class = "form-control" })</td>
                    </tr>
                }
            </table>
        </div>
    </div>
}

The problem is I need a way to not only send the data that is selected in my drop down, but ALSO the user Id. UserId is specified in my method and brought in on the table loop via user.UserId public string UserId { get; set; } public string UserId { get; set; }

Ideally, this would be done on a simple change of selecting the role in the dropdown.

In short - I need a way for my dropdownlist to send the UserId & the selected role to my controller action/method whenever a role is selected on the dropdown.

Any help would be greatly appreciated.

Answer 1

This is how I would do it.

1. Wrap the dropdownlist (and other fields) in a html form and give it an ID
2. Add a hidden input with value of the user ID you want to pass to the server
3. In the dropdownlist add the onchange event which calls a javascript method OnChangeFunc

@Html.DropDownList("Roles", new SelectList(ViewBag.RoleList), "Modify Role", new { @class = "form-control", @onchange="OnChangeFunc()" })

4. Javascript part

   <script> function OnChangeFunc(){ //Get form by ID and submit it } </script>

Answer 2

Here's another option you can use that sets up your form for each row.

In your view, replace the existing form with a form in each row so that you can also pass in your user id within the form submission. Also, the dropdown has the "onchange" added so that the individual parent form is automatically submitted on change.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="box-title">
            <b>Users with Roles</b>
        </h3>
    </div>
    <div class="panel-body">
        <table class="table table-hover table-bordered table-condensed" id="UsersWithRoles">
            <thead>
                <tr>
                    <td><b>Username</b></td>
                    <td><b>Roles</b></td>
                </tr>
            </thead>
            @foreach (var user in Model)
            {
                <tr>
                    <td>@user.Username</td>
                    <td>@user.Role</td>
                    <td>
                        @using (Html.BeginForm("ModifyUser", "UserControl", FormMethod.Post, new { id = "ManageUser" }))
                        {
                            @Html.HiddenFor(modelItem => user.UserId)
                            @Html.DropDownList("Roles", new SelectList(ViewBag.RoleList), "Modify Role",
                                new { @class = "form-control", onchange = "this.parentElement.submit()" })
                        }
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

Now you can get both role and user id from your receiving action:

[AuthLog(Roles = "Super Admin")]
[HttpPost]
public ActionResult ModifyUser(string id)
{
    string newRole = Request.Form["Roles"];
    string userId = Request.Form["user.UserId"];
    // ...
}