ASP.NET MVC - ブートストラップモーダルでフォームを使用してコントローラからアクションを呼び出す

Question

私のデータベースにエントリを作成するフォームがあります。私は、ユーザーがWebサービスのプロパティを検索して最初のフォームに入力できるようにするモーダルを介して追加のフォームを追加しようとしています。

私が必要とするのは、ユーザーがモーダルでヒット検索を入力したときにコントローラ上でアクションを呼び出すときに、Webサービスクライアントを実行して適切な情報のリストを返すためです。私は、このリストをページ上の表として表示したい。ユーザーは、使用したい検索結果を選択して元のフォームに移入することができます。私はこれのほとんどを理解することができると思うが、モーダルからの検索を開始する最善の方法は不明だ。コードは以下の通りです。

ビュー

@model ******* 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Search">Populate From Service</button> 
<!-- Modal --> 
<div id="Search" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Search By Property</h4> 
      </div> 
      <div class="modal-body"> 
       <form class="form-horizontal"> 
        <p>blah blah blah</p> 
        <div class="form-group"> 
         <label for="API14" class="control-label col-md-2">API</label> 
         <div class ="col-md-10"> 
          <input type="text" class="form-control" id="API14" aria-describedby="API14" placeholder="Enter API"> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <div class="form-group"> 
        <div class="col-md-offset-2 col-md-10"> 
         <input type="submit" value="Search" class="btn btn-success" /> 
         <input type="button" value="Close" data-dismiss="modal" class="btn btn-danger" /> 
        </div> 
       </div> 

      </div> 
     </div> 

    </div> 
</div> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 

     <hr /> 

     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.API14, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.API14, new { htmlAttributes = new { @class = "form-control"} }) 
       @Html.ValidationMessageFor(model => model.API14, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.PROP_NO, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.PROP_NO, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.PROP_NO, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.PROP_NM, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.PROP_NM, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.PROP_NM, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.ENTITY, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10 "> 

       @Html.EditorFor(model => model.ENTITY, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.ENTITY, "", new { @class = "text-danger" }) 


      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.PROD_ZONE_NM, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.PROD_ZONE_NM, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.PROD_ZONE_NM, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.LEASE_NAME, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.LEASE_NAME, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.LEASE_NAME, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.WELL_NO, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.WELL_NO, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.WELL_NO, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-success" /> 
      </div> 
     </div> 
    </div> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

Answer 1

あなたは2つのステップにあなたの問題を分割することができます。

ステップ1： "私が必要とするのは、ユーザーがモーダルでヒット検索を入力するとコントローラのアクションが呼び出され、Webサービスクライアントが実行され、適切な情報のリストが返されます。このリストはページにテーブルとして表示されます。

は、スクリプトのセクションに次の行を追加します。

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

    <script> 
     $(document).ready(function() { 
      $('#submitModal').click(function() { 

       var data = { 
        API14: $('#API14').val() 
       } 
       $.ajax({ 
        url: '/Default/SearchByProperty', 
        data: data 
       }).success(function (html) { 

        $('#API14List').html(html); 
        $('#Search').modal('toggle'); 
       }); 

      }); 
     }); 

    </script> 
} 

これはあなたからモーダル入力を値を取り、サーバに送信する簡単なAJAX呼び出しです。あなたの "/ {コントローラ}/{アクション}"と一致する必要があるので、呼び出しで渡された "url"パラメータに注意してください。 重要：また、AJAX呼び出しを行うときに望ましくないポストバックを避けるため、「検索」ボタン＃API14を更新して「送信」ではなく「ボタン」とタイプする必要があります。

次に、あなたのコントローラにこのような何かを追加することができます。

@model List<string> 

<table> 
    @foreach (var item in Model) { 
     <tr class="API14-item"> 
      <td>@item</td> 
     </tr> 
    } 
</table> 

ステップ：私はSearchByProperty.cshtmlという名前部分ビューファイルに次のように必要になる...

public ActionResult SearchByProperty() 
{ 

    var model = new List<string>(); 
    model.Add("one"); 
    model.Add("two"); 
    model.Add("three"); 

    return PartialView(model); 
} 

2： "ユーザーは、使用したい検索結果を選択して元のフォームに入力することができますが、私はこれをほとんど把握できると思いますが、モーダルから検索を開始する最善の方法は不明です。コード以下のとおりであります。"

あなたはjQueryのを書くことに自信を持っている場合は、あなたがあなたのテーブルに置くの値を取り、あなたのフォームに移入されます、あなたの作成したページのスクリプトセクションで、いくつかのJSを書くことができる必要があります：

$(document).on('click', '.API14-item', function() { 
    // 
    // TODO: your code here 
    // 
}); 

これが役立つことを願っています！