如何将 ajax 插入模态表单结果中的值？

Question

我正在构建一个发票表单，用户必须在其中从数千条记录中选择一个客户。为了允许用户搜索和选择，我想使用模态表单来选择所需的客户，然后将客户 ID 和名称插入到原始表单中。 （我相信这种方法可以解决“无嵌套形式”规则。）

发票表格：

客户：[选择客户按钮] - [选择后显示名称] [隐藏：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");
}

模态部分：

-- 还没有实现搜索 - 现在尝试从数字文本框插入工作

@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 实体框架
• Bootstrap（尝试使用 TwitterBootstrapMVC 没有任何运气）

Answer 1

您可以使用引导事件“hidden.bs.modal”或“hide.bs.modal”将选定客户的值从模态插入到后台表单。

演示

$('#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>