pass one route value from view and one route value from javascript to an action in asp.net mvc

Question

I want to pass two route values into ChangeUserRole action. One is from View which is currentMember as member and other is roleId of the currentMember which is changed in dropdownlist. I know I can do this using Ajax but not able to figure it out. Please help me with this.

Action:

<HttpPost>
    Function ChangeUserRole(currentMember As ApplicationUser, roleId As String) As ActionResult

        Dim roleName = db.Roles.Find(roleId).Name
        Dim currentMemRole = db.Roles.Find(currentMember.Id).Name
        Roles.RemoveUserFromRole(currentMember.Id, currentMemRole)
        Roles.AddUserToRole(currentMember.Id, roleName)

        Return RedirectToAction("Users")
    End Function

View:

@Imports Microsoft.AspNet.Identity
@ModelType IEnumerable(Of EntityFramework.IdentityRole)

@Code
    ViewData("Title") = "Users"
    Layout = "~/Views/Shared/_AdminLayout.vbhtml"
    Dim context = New ApplicationDbContext
    Dim allUsers = context.Users.ToList
    Dim selectList = New List(Of SelectListItem)
End Code

<h2>List of Users</h2>

<table class="table table-bordered table-responsive table-striped">
    <tr>
        <th>Name</th>
        <th>Username</th>
        <th>Email</th>
        <th>Role</th>
        <th></th>
    </tr>
    <tr>
        @For Each member In allUsers
            Dim MemberRole = member.Roles.FirstOrDefault(Function(m) m.UserId = member.Id)
            For Each role In Model
                selectList.Add(New SelectListItem With {
                    .Text = role.Name,
                    .Value = role.Id,
                    .Selected = (role.Id = MemberRole.RoleId)
                })
            Next
            @<text>
                <td></td>
                <td>@member.UserName</td>
                <td>@member.Email</td>
                <td>@Html.DropDownList("allRoles", selectList, New With {.class = "form-control"})</td>
                <td>
                    @Using Html.BeginForm("ChangeUserRole", "Admin", New With {.currentMember = member, .roleId = **userRoleId**}, FormMethod.Post, New With {.class = "form"})
                    @<input type="submit" value="Save" class="btn btn-primary" />
                End Using
                </td>
            </text>
        Next
    </tr>
</table>

<div class="row">
    <div class="col-md-6">
        @Html.Partial("_CreateRole")
    </div>
</div>

JavaScript:

@Section Scripts
    <script>
        $(document).ready(function () {
            var **userRoleId** = "";
            $("#allRoles").on("change", function () {
                userRoleId = $(this).val();
            });
        });
    </script>
End Section

Answer 1

You need to send POST request to the ChangeUserRole action. You can use HTML <form> element with currentMember and roleId values and send this using submit() method in change event handler. For example

 $("#myform").on('change', function() { this.submit(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform" action="https://stackoverflow.com/users/8084795/rohit-bhati" method="POST"> <select name="tab"> <option value="">Select Tab</option> <option value="profile">profile</option> <option value="topactivity">activity</option> </select> </form> 

If your input (or select) is located outside the form, use form attribute to bind them:

 $("[name=tab]").on('change', function() { this.form.submit(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform" action="https://stackoverflow.com/users/8084795/rohit-bhati" method="POST"> </form> <select name="tab" form="myform"> <option value="">Select Tab</option> <option value="profile">profile</option> <option value="topactivity">activity</option> </select>