Как вставить ajax в значение из результата модальной формы?

Question

Я строю форму счета-фактуры, где пользователь должен выбрать клиента из тысяч записей. Чтобы пользователи могли искать &, я хочу использовать модальную форму для выбора желаемого клиента, а затем вставить идентификатор клиента & в оригинальную форму. (Я считаю, что этот метод является работа вокруг для "не-гнездовой-форм" правила.)

Счет Форма:

клиентов: [Кнопка выбора клиента] - [Display Name после выбранного] [скрытый: customer_id]

Сумма: [нормальная форма вещь]

режимной форма:

Поиск []

[Таблица клиентов, фильтр поиска] [выбрать эту кнопку клиент]

Я не думаю, что мне нужно иметь метод [HTTP POST], чтобы захватить выбор модальной формы - вместо этого я просто хочу использовать javascript для обновления значения формы счета для идентификатора клиента (скрытого) & Имя клиента.

До сих пор у меня есть:

Контроллер:

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 Entity Framework
• Bootstrap (пытался использовать TwitterBootstrapMVC без удачи)

Answer 1

Вы можете вставить значение выбранного клиента из модальных к фоновой форме с использованием начальной загрузки события «hidden.bs.modal» или «скрыть .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>