如何从模态形式结果中插入值

Question

我正在构建发票表单，用户必须从数千个记录中选择客户。为了允许用户搜索＆amp;选择，我想使用模式表格选择所需的客户，然后插入客户ID＆amp;名称为原始形式。（我相信这种方法是"无纽扣"规则的工作。）

发票表格：

客户：[选择客户按钮] - [选定后显示名称] [隐藏：customer_id]

金额：[普通表格]

模态形式：

搜索[]

[客户表，搜索过滤] [选择此客户按钮]

我认为我不需要[http post]方法来捕获模态表单的选择 - 相反，我只想使用JavaScript来更新发票表单的客户ID（隐藏）＆amp;客户名称。

到目前为止，我有：

控制器：

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

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