Asp.Net MVC - ブートストラップドロップダウンメニューを使用した複数の送信ボタンHref Link

Question

これはよくある質問ですが、私はその解決策の多くを読んだことがあります。しかし、それらのどれも（私がそれらをどのように解釈し、テストしたかにかかわらず）まだかなりうまくいっています。

ユースケースは、よくあるようですが、ユーザーがテーブル内の1つまたは複数の行を選択し、ドロップダウンリストのいずれかの操作を実行できるようにすることです。したがって、コントローラ内のActionメソッドは、フォームを受け取るだけでなく、実行するアクションも知っている必要があります。

私は複数のボタンを動作させることができました（フォームを送信し、フォームを送信するために使用されたリンク/ボタンを区別することを意味する「仕事」を意味します）。私はこれを行う必要があるドロップダウンリストスタイリングの外観を保持することができていない、私は通常のhrefリンクを介してアクション呼び出しで使用することができるデフォルトのドロップダウンに比べて少し矛盾した外観を持っています@Html.ActionLink。

これは私が（Hrefのリンクを使用してデフォルトのブートストラップスタイリングを）見てドロップダウンを必要とする方法である：ここでは

は、このドロップダウンが住んでいるマークアップです：stephen.vakil @

<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> 

Answer 1

、感謝あなたの提案は、動作しているようです。ここに私がしたことがあります。

隠し要素、ドロップダウンメニュースニペット上から：

隠し要素：

@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> 

ありがとう!!!