Asp.Net MVC - 使用 Bootstrap 下拉 Href 链接的多个提交按钮答案

【问题标题】：Asp.Net MVC - Multiple Submit Buttons Using Bootstrap Dropdown Href LinkAsp.Net MVC - 使用 Bootstrap 下拉 Href 链接的多个提交按钮
【发布时间】：2016-08-25 21:12:54
【问题描述】：

我知道这是一个常见问题，并且我已经阅读了许多解决方案。但是，它们中没有一个（就我如何解释和测试它们而言）工作得很好。

这个用例似乎很常见，是允许用户在表中选择一行或多行，然后执行下拉列表中的一项操作。因此，Controller 中的 Action 方法既需要接收表单，也需要知道要执行的操作。

我已经能够让多个按钮工作（“工作”意味着提交表单并区分用于提交表单的链接/按钮），并将它们设置为看起来像链接，但使用解决方案我已经尝试过，我无法保留下拉列表样式的外观，因此与默认下拉列表相比，我需要执行此操作的下拉列表的外观会略有不一致，我可以通过 @ 将常规 href 链接与 Action 调用一起使用987654323@.

这就是我需要下拉菜单的外观（带有 Href 链接的默认引导样式）：

这是该下拉菜单所在的标记：

<div class="col-sm-4 m-b-md" >
            <h4 class="dashhead-subtitle">Project Members</h4>

                @using (Html.BeginForm("EditProjectMembers", "Project", FormMethod.Post, new { name = "formEditMembers", id = "formEditMembers" }))
                {
                    @Html.AntiForgeryToken()

                    @Html.HiddenFor(item => item.ProjectModelId)
                    @Html.HiddenFor(item => item.CompanyModelId)

                <div class="btn-toolbar-item">
                    <div class="btn-group">
                        <button class="btn btn-primary-outline">
                            Actions
                        </button>
                        <button data-toggle="dropdown" class="btn btn-primary-outline dropdown-toggle ">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                             <li>
                               <a href="#">Do Action 1</a> <!--REFERRING TO HERE-->
                            </li>
                            <li>
                                <a href="#">Do Action 2</a><!--AND HERE-->
                            </li>
                        </ul>
                        <div class="btn-toolbar-item input-with-icon">
                            <input type="text" class="search form-control" placeholder="Search..." />
                        </div>
                    </div>
                </div>
                <p></p>
                <table class="table table-hover table-condensed table-responsive" data-height="5000" >
                    <tr>
                        <th>
                            Name
                        </th>
                        <th>
                            Company
                        </th>
                        <th>
                            Selected
                        </th>
                    </tr>
                    <tbody class="list">
                        @for (int i = 0; i < Model.ProjectMembers.Count(); i++)
                        {
                            <tr>
                                <td class="username">
                                    <a href="@Url.Action("../UserAdmin/ShowPublic", new { id = @Html.DisplayFor(item => item.ProjectMembers[i].Id) })">@Html.DisplayFor(item => item.ProjectMembers[i].FirstLastName)</a>
                                    @Html.HiddenFor(item => item.ProjectMembers[i].CompanyName)
                                </td>
                                <td class="companyname">
                                    @Html.DisplayFor(item => item.ProjectMembers[i].CompanyName)
                                    @Html.HiddenFor(item => item.ProjectMembers[i].CompanyName)
                                </td>
                                <td>
                                    @Html.CheckBoxFor(item => item.UserSelected, new { @class = "big-checkbox" })
                                    @Html.HiddenFor(item => item.ProjectMembers[i].Id)
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
                }
            </div>

【问题讨论】：

您是否尝试过添加隐藏输入并使锚标记的onclick 设置字段并提交表单？还是我误解了你的问题？
我相信你已经理解了，我会尝试的。谢谢
您是否有多个动作动作方法应该从这些不同的选项中使用，或者它是所有选项的单一方法？您要提交哪些值？
我还没有实现 Action 方法，因为我还没有让它工作，但我可以采用任何一种方式 - 单独的 Action 方法，或者只使用一个值来确定什么去做
我需要提交的值是表中的内容，以及Html.HiddenFor() 行中的 ProjectModelId 和 CompanyModelId

标签： javascript asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

@stephen.vakil ，感谢您的建议，它似乎正在工作。这就是我所做的。

上方的隐藏元素和下拉菜单sn-p：

隐藏元素：

@Html.HiddenFor(item => item.FlagFormEditMembers)

以及使用 href 调用 javascript 的标记

<ul class="dropdown-menu">
   <li>
      <a href="javascript:void(0)" onclick="submitFormNewMember();">Add a New Project Member</a>
   </li>
   <li>
      <a href="javascript:void(0)" onclick="submitFormRemoveMember();">Remove Selected Project Members</a>
   </li>
</ul>

以及提交表单的函数，以及设置您建议添加的隐藏元素的value：

<script>
function submitFormNewMember() {
    $("#FlagformEditMembers").attr({
        "value": "AddNewMember"
    });
    $('#formEditMembers').submit();
}

function submitFormRemoveMember() {
    $("#FlagformEditMembers").attr({
        "value": "RemoveMembers"
    });
    $('#formEditMembers').submit();
}

</script>

谢谢！！！

【讨论】：