如何將ajax插入Modal窗體結果的值中？

Question

我正在構建一張發票表單，用戶必須從數千條記錄中選擇一個客戶。爲了讓用戶搜索& select，我想使用模式表單來選擇所需的客戶，然後將客戶名稱&名稱插入到原始表單中。 （我相信這種方法對於「無嵌套形式」的規則周圍的工作。）

發票形式：

客戶：選擇客戶按鈕] - [顯示名稱選定後] [隱藏：CUSTOMER_ID]

量：[正常形式的東西]

模式窗體：

搜索[]

[客戶的表，通過搜索過濾器] [選擇該客戶的按鈕]

我不認爲我需要有一個[HTTP POST]方法來捕獲模態窗體的選擇 - 而是我只想使用JavaScript來更新客戶ID（隱藏）&客戶名稱的發票窗體的值。

到目前爲止，我有：

控制器：

public ActionResult Modal() 
{ 
    return PartialView(); 
} 
public ActionResult SaveInvoice() 
{ 
    return View(); 
} 
[HttpPost] 
public ActionResult SaveInvoice(Invoice invoice) 
{ 
    dataManager.Save(invoice); 
    return RedirectToAction("Index"); 
} 

莫代爾部分：

--have沒有實現搜索，但 - 現在試圖讓插入到從工作數字文本框

@model Models.Customer 
<div class="modal-content"> 
    <div class="modal-header"> Select Customer </div> 
    @using (Html.BeginForm()) 
    { 
     @Html.ValidationSummary() 
     @Html.AntiForgeryToken() 
     <div class="modal-body"> 
      <div class="form-horizontal"> 
       <div class="form-group"> 
        @Html.LabelFor(model => model.id, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.id, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.id, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <input type="submit" value="Save" class="btn btn-default" id="save-customer-id" /> 
       </div> 
      </div> 
     </div> 
    } 
</div> 

發票查看

@model Models.Invoice 
<div class="form-horizontal"> 
    <hr /> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <div class="form-group"> 
     @Html.LabelFor(model => model.customerId, htmlAttributes: new { @class = "control-label col-md-2" }) 
     <div class="col-md-10"> 
      <button id="CustomerBtn" class="btn btn-primary btn-lg" onclick="ShowModal()">Select Customer</button> 
      @Html.EditorFor(model => model.customerId, new { htmlAttributes = new { @class = "form-control", id= "customer-id" } }) 
      @Html.ValidationMessageFor(model => model.customerId, "", 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-default" /> 
     </div> 
    </div> 
</div> 


<div id="CustomerModal" class="modal"> 
    <div id="CustomerContainer" class="modal-dialog"> 
     @Html.Partial("Modal") 
    </div> 
</div> 

的Javascript

<script type="text/javascript"> 
    function ShowModal() { 
     $('#CustomerModal').modal('show'); 
    }; 
</script> 

目前的代碼顯示形式和按鈕打開正確的模式與形式。

在此先感謝！我一直在四處搜尋，但沒有看到有關從模式插入「背景頁面」的任何內容。 （而且我沒有太多使用AJAX）。

使用：

• 的Visual Studio 2015年
• ASP。NET MVC實體框架
• 引導

Answer 1

您可以從模式到後臺形式使用引導事件「hidden.bs.modal」或「隱藏插入所選客戶的價值（使用TwitterBootstrapMVC沒有任何的運氣試過） .bs.modal」。

DEMO

$('#myModal').on('hidden.bs.modal', function() { 
 
    $("#customerName").val($("#searchCustomer").val()); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <div class="container"> 
 
    <form> 
 
<label> Customer</label>&nbsp;&nbsp;<input type="text" id="customerName"> 
 
    <button type="button" class="btn btn-link btn-xs" data-toggle="modal" data-target="#myModal">Search Customer</button> 
 
    <br/> 
 
    <button type="submit" class="btn btn-default">Save</button> 
 
    </form> 
 

 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" 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 Customer</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      Customer 
 
      <input type="text" id="searchCustomer" value="Anil Panwar or id here"> 
 
      <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Select</button> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div>