我正在構建一張發票表單,用戶必須從數千條記錄中選擇一個客戶。爲了讓用戶搜索& select,我想使用模式表單來選擇所需的客戶,然後將客戶名稱&名稱插入到原始表單中。 (我相信這種方法對於「無嵌套形式」的規則周圍的工作。)如何將ajax插入Modal窗體結果的值中?
發票形式:
客戶:選擇客戶按鈕] - [顯示名稱選定後] [隱藏: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");
}
莫代爾部分:
--have沒有實現搜索,但 - 現在試圖讓插入到從工作數字文本框
@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實體框架
- 引導
考慮使用自動完成控制(例如[jQueru-UI自動填充(https://jqueryui.com/autocomplete/#remote)) –
看着它 - 非常酷。試圖通過Nuget Package Manager添加它,它看起來像他們最近沒有發佈更新,所以它是不兼容的。 '錯誤無法找到與'bootstrap 3.3.7約束'兼容的'jQuery'版本 – swallis1
更深入地研究它 - 事實證明jQuery.UI.Combined得到了維護。我試圖獲得一個簡單的示例版本,並努力工作。我有超過3萬條記錄 - 這真的能夠處理那麼多記錄的過濾嗎? – swallis1