如何从Modal表单结果中插入ajax？

Question

我正在构建一个Invoice表单，用户必须从数千条记录中选择一个客户。 为了允许用户搜索和选择，我想使用模态表单来选择所需的客户，然后将客户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'将所选客户的值从模态插入到背景表单中。

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>