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

Question

我正在构建一个发票表单，其中用户必须 select 来自数千条记录的客户。为了让用户可以搜索&select，我想使用模态形式来select想要的客户，然后将客户id&名称插入到原始表格中。（我相信这种方法可以解决 "no-nested-forms" 规则。）

发票形式：

Customer : [Select Customer Button] - [Display Name after selected] [hidden: customer_id]

Amount: [normal form stuff]

模态形式：

Search [ ]

[Table of Customers, filter by search] [select this customer button]

我认为我不需要 [http post] 方法来捕获模态形式的 selection - 相反我只想使用 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>

目前代码显示了表单并且按钮正确打开了带有表单的模式。

提前致谢！我一直在四处搜索，但没有看到任何有关从模式插入回 "background page" 的信息。（而且我没怎么用过AJAX）。

使用：

Visual Studio 2015
ASP.NET MVC Entity Framework
Bootstrap（尝试使用 TwitterBootstrapMVC 但没有成功）

Answer 1

您可以使用 bootstrap 事件 '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>

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

How to ajax insert into value from Modal form result?

javascript

forms

ajax

asp.net-mvc

html-helper