Question

我正在构建一个Invoice表单，用户必须从数千条记录中选择一个客户。为了让用户能够搜索和选择，我想使用模态表单来选择所需的客户，然后插入客户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事件＆＃39; hidden.bs.modal＆＃39;将所选客户的值从模态插入背景表单。或者＆＃39; hide.bs.modal＆＃39;。

<强>样本

＆＃13;

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

＆＃13;

 <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>

＆＃13;

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

1 个答案: