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

您可以將您的問題分爲兩個步驟。

步驟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」參數，因爲這需要與您的「/ {controller}/{action}」匹配。 重要提示：您還需要更新您的「搜索」按鈕＃API14以鍵入「按鈕」，而不是「提交」，因爲這樣可以避免發生在進行AJAX調用時不受歡迎的回發。

然後，您可以添加這樣的事情你的控制器：

public ActionResult SearchByProperty() 
{ 

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

    return PartialView(model); 
} 

...這將需要在局部視圖文件下面我命名SearchByProperty.cshtml：

@model List<string> 

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

步驟2：「然後，用戶可以選擇他們想要使用的搜索結果，然後填充原始表單，我想我可以看到大部分內容，但並不能確定從模式中啓動搜索的最佳方式。代碼如下。「

如果你在寫jQuery的自信，那麼你應該能夠寫一些JS在你創建頁面的腳本部分，將帶你在你的表中放置這些值和填充表單：

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

希望這有助於！