如何在不使用表单帖子的情况下从视图中的 SelectList 获取选定的值到控制器？

Question

我正在尝试将所选选项项的值作为参数传递给我的控制器。 我没有使用表单，因为我的视图使用了一个表格，它不喜欢表格中的表格。 我需要知道控制器方法中的 companyID、userID 和 RoleID 才能完成这项工作。 我正在正确获取 companyID 和 userID，但我不知道如何获取用户选择的角色。

看法：

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RegistrationDate)
        </th>
        <th>
            Account Type
        </th>
        <th>
            Actions
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RegistrationDate)
            </td>

            <td>


<select id="roleList" name="roleList" asp-items="@(new SelectList(@ViewBag.message, "ID", "Name"))">
    <option selected="selected" value="">
    @Html.DisplayNameFor(model => model.Role)
    </option>
</select>

<a id="approve" asp-action="Approve" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id" asp-route-roleID="">Approve</a> |
<a asp-action="Reject" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Reject</a>

      @section scripts 
{
    <script>
        $('#approve').click(function (e) {
        e.preventDefault();
        var id = $('#roleList').val();
        if (id > 0) {
            $("#approve").attr('asp-route-roleID').valueOf(id);
        }
        else {
            $('#message').text('select an option first!')
        }
    });

控制器：

         [Route("Admin/Approve/{companyID:int}/{id}/{roleID?}")]
    
    public async Task<IActionResult> Approve(int companyID, string id, int roleID, Role role)
    {
        //id = await GetCurrentUserId();

        if (id == null || roleID == 0 || companyID == 0)
        {
            return NotFound();
        }
        if (ModelState.IsValid)
        {
            //return user object from db by Id
            var user = await _context.User.FindAsync(companyID, id);
            if (user == null)
            {
                return NotFound();
            }
            //Update User Status to Approved
            user.Status = UserStatus.APPROVED;
            //Update User Role to Assigned Value
           // user.Role = role;

            //Insert new CompanyRoleUser record 
            CompanyRoleUser crUser = new CompanyRoleUser(user.CompanyID, roleID, user.Id);
            try
            {
                _context.Update(crUser);
                _context.Update(user);
                await _context.SaveChangesAsync();

            }
            catch (DbUpdateConcurrencyException)
            {
                if (!UserExists(user.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
           
            return RedirectToAction(nameof(Index));
        }
        
        return Redirect("/Admin/Index");
    }

更新了来自答案的代码帮助：

  <td>
    <select onchange="SetRoleId(this)" id="roleList" name="roleList" asp-items="@(new SelectList(@ViewBag.message, "ID", "Name"))">

      <option selected="selected" value="">@Html.DisplayNameFor(model => model.Role)</option>
     </select>

            </td>
            <td>
                <a id="approve" asp-action="Approve" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Approve</a> |
                <a asp-action="Reject" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Reject</a>
            </td>
        </tr>
    }
</tbody>

@section scripts {
    <script>
    function SetRoleId(data) {
        var id = data.value;
        if (id > 0) {
            var url = $(data).next("#approve").attr("href");
            var list = url.split("/");
            var index = list.length;
            if (index < 6) {
                //why is 6
                //the default length of your approve link is 5:"","Admin","Approve","companyID" and "id"
                //you just need to add the roleid to the url ending
                $(data).next("#approve").attr("href", url + "/" + id);
            }
            else {
                //if you want to change the selectlist,the default url length is 6
                //because you have added the roleid before
                var urlstring = "";
                for (var i = 1; i < index - 1; i++) {
                    urlstring = urlstring + "/" + list[i];
                }
                $(data).next("#approve").attr("href", urlstring + "/" + id);
            }
        }
        else {
            $('#message').text('select an option first!')
        }
    };
</script>
}

但是现在当我运行它时，当我在下拉列表中选择不同的角色时，我没有看到浏览器控制台中的 href 发生变化。 浏览器控制台给出以下错误：“Uncaught TypeError: Cannot read property 'split' of undefined”控制台消息

当我单击“批准”按钮时，我没有在 url 中附加 RoleID。

我在 _layout.cshtml 页面中包含了标准的 jquery 脚本标签：

  <script src="~/lib/jquery/dist/jquery.min.js"></script>

Answer 1

项目运行时标签助手会在anchor生成href ，因此无法通过js设置标签助手值，需要设置href值。

看法：

                //....
                <td>
                    <select onchange="SetRoleId(this)" id="roleList" name="roleList" asp-items="@(new SelectList(@ViewBag.message, "ID", "Name"))">
                        <option selected="selected" value="">
                            @Html.DisplayNameFor(model => model.Role)
                        </option>
                    </select>

                    <a id="approve" asp-action="Approve" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Approve</a> |
                    <a asp-action="Reject" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Reject</a>
                 </td>
            </tr>
        }
        </tbody>
    </table>
@section scripts
{
    <script>   
        function SetRoleId(data) {
            var id = data.value;
            if (id > 0) {               
                var url = $(data).next("#approve").attr("href");
                var list = url.split("/");
                var index = list.length;
                if (index < 6) {
                    //why is 6
                    //the default length of your approve link is 5:"","Admin","Approve","companyID" and "id"
                    //you just need to add the roleid to the url ending
                    $(data).next("#approve").attr("href",url+ "/" +id);                                       
                }
                else { 
                   //if you want to change the selectlist,the default url length is 6
                   //because you have added the roleid before
                    var urlstring = ""; 
                    for (var i = 1; i < index - 1; i++) {
                        urlstring = urlstring+ "/" + list[i] ;
                    }
                    $(data).next("#approve").attr("href", urlstring+"/"+id);
                }
            }
            else {
                $('#message').text('select an option first!')
            }                   
        };
    </script>
}

结果：

更新：

你不工作的原因是我们有不同的剃刀视图。改变你的代码，如下所示：

                <td>
                    <select onchange="SetRoleId(this)" id="roleList" name="roleList" asp-items="@(new SelectList(@ViewBag.message, "ID", "Name"))">
                        <option selected="selected" value="">
                            @Html.DisplayNameFor(model => model.Role)
                        </option>
                    </select>
                </td>
                <td>
                    <a id="approve" asp-action="Approve" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Approve</a> |
                    <a asp-action="Reject" asp-route-companyID="@item.CompanyID" asp-route-id="@item.Id">Reject</a>
                </td>

            </tr>
        }
        </tbody>
    </table>
@section scripts
{
    <script>   
        function SetRoleId(data) {
            var id = data.value;
            if (id > 0) {
                var element = $(data).parent().next("td").find("#approve");
                var url = element.attr("href");
                var list = url.split("/");
                var index = list.length;
                if (index < 6) {
                    element.attr("href",url+ "/" +id);                                       
                }
                else {
                    var urlstring = ""; 
                    for (var i = 1; i < index - 1; i++) {
                        urlstring = urlstring+ "/" + list[i] ;
                    }
                    element.attr("href", urlstring+"/"+id);
                }
            }
            else {
                $('#message').text('select an option first!')
            }                   
        };
    </script>
}