2017-02-17 49 views
1

我正在構建一張發票表單,用戶必須從數千條記錄中選擇一個客戶。爲了讓用戶搜索& 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實體框架
  • 引導
+0

考慮使用自動完成控制(例如[jQueru-UI自動填充(https://jqueryui.com/autocomplete/#remote)) –

+0

看着它 - 非常酷。試圖通過Nuget Package Manager添加它,它看起來像他們最近沒有發佈更新,所以它是不兼容的。 '錯誤無法找到與'bootstrap 3.3.7約束'兼容的'jQuery'版本 – swallis1

+0

更深入地研究它 - 事實證明jQuery.UI.Combined得到了維護。我試圖獲得一個簡單的示例版本,並努力工作。我有超過3萬條記錄 - 這真的能夠處理那麼多記錄的過濾嗎? – swallis1

回答

0

您可以從模式到後臺形式使用引導事件「hidden.bs.modal」或「隱藏插入所選客戶的價值(使用TwitterBootstrapMVC沒有任何的運氣試過) .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>

+0

喜歡這個概念,並且我可以從stackoverflow運行代碼。但是,當我將代碼複製/粘貼到虛擬項目中時,從模式中選擇「選擇」不會更新主頁面。這是爲什麼?我用包圍了js腳本。添加console.log語句時,看起來js在關閉模式時沒有運行。有任何想法嗎?謝謝! (再次,對js來說很新穎)。 – swallis1

+0

明白了吧!我將腳本更改爲:$(document).on('hidden.bs.modal','#myModal',function(){document.getElementById(「customerName」)。value = document.getElementById(「searchCustomer」 ).value; }) – swallis1

相關問題