Как обновить родительскую форму от модального

Question

У меня есть модальная форма, которая обновляет адрес клиента после нажатия кнопки «Сохранить». Я хочу использовать вызов AJAX для обновления данных модели после закрытия модальной формы. Затем он перенаправляет обратно в родительскую форму, из которой вызывается модальная форма (Index.cshtml). Вызов AJAX успешно извлекает обновленные данные модальной формы через текстовые поля, но всегда вызывает ошибку.

TL; DR: хотите закрыть модальную форму, перенаправить на родительскую форму и обновить отображаемый там текст.

Пожалуйста, смотрите ниже мои фрагменты кода:

контроллера

[ValidateInput(false), HttpPost] 
public JsonResult UpdateClientDetails(Client newClientDetails) 
{ 
    _clientService.UpdateClient(newClientDetails); 

    return Json(newClientDetails); 
} 

---

$('.btn-update-client').click(function (e) { 
     var id = $(this).val(); 
     $('#updateClientModal .modal-content').load('/client/UpdateClientDetails/' + id); 
     $('#updateClientModal').modal('show'); 
}); 

View (Index.cshtml)

<div class="panel-body"> 
    <label>Client Id: <span id="ClientId">@id</span></label> 
    <address> 
     <span id="Address1">@client.Address1</span>, <span id="Address2">@client.Address2</span><br> 
     <span id="City">@client.City</span>, <span id="Province">@client.Province</span><br> 
     <span id="PostalCode">@client.PostalCode</span><br> 
     <abbr title="Phone">P:</abbr> <span id="PhoneNumber">@client.PhoneNumber</span> 
    </address> 
    <div><button value="@id" type="button" class="btn btn-primary btn-update-client">Change</button></div> 
</div> 

__

Метод контроллер

public ActionResult Index() 
{ 
    return View(_clientService.GetClientList()); 
} 

Модальной Форма

@model Client 
@using ProductManager.Models 

<div class="modal-header"> 
<h4 class="modal-title" id="exampleModalLabel">@Model.Name - ID: @Model.Id</h4> 
</div> 
@{ 
    var attributes = new Dictionary<string, object>(); 
    attributes.Add("class", "form-horizontal"); 
} 
@using (Html.BeginForm("UpdateClientDetails", "Client", FormMethod.Post, attributes)) 
{ 
<div class="modal-body"> 
    <div class="form-group"> 
     <label for="clientAddress1" class="col-xs-3 control-label">Address 1</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="clientAddress1" name="Address1" value="@Model.Address1"> 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="clientAddress2" class="col-xs-3 control-label">Address 2</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="clientAddress2" name="Address2" value="@Model.Address2"> 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="clientCity" class="col-xs-3 control-label">City</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="clientCity" name="City" value="@Model.City"> 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="clientProvince" class="col-xs-3 control-label">Province</label> 
      <div class="col-xs-9"> 
       @Html.DropDownListFor(model => model.Province, (IEnumerable<SelectListItem>)ViewBag.ProvinceList, new { @class = "form-control", @id = "clientProvince" }) 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="clientPostalCode" class="col-xs-3 control-label">Postal Code</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="clientPostalCode" name="PostalCode" value="@Model.PostalCode"> 
      </div> 
    </div> 
    <div class="form-group"> 
     <label for="clientPhoneNumber" class="col-xs-3 control-label">Phone #</label> 
      <div class="col-xs-9"> 
       <input type="text" class="form-control" id="clientPhoneNumber" name="PhoneNumber" value="@Model.PhoneNumber"> 
      </div> 
    </div> 
    <div> 
     <input type="hidden" id="clientName" name="Name" value="@Model.Name"> 
    </div> 
    <div> 
     <input type="hidden" id="clientID" name="Id" value="@Model.Id"> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="submit" class="btn btn-primary">Save changes</button> 
</div> 
} 

<script type="text/javascript"> 
    $('.btn-primary').click(function() { 
     $.ajax({ 
      type: 'POST', 
      data: getModelData(), 
      dataType: 'json', 
      success: function (data) { 

       $("#Address1").text(data.Address1); 
       $("#Address2").text(data.Address2); 
       $("#City").text(data.City); 
       $("#Province").text(data.Province); 
       $("#PostalCode").text(data.PostalCode); 
       $("#PhoneNumber").text(data.PhoneNumber); 
      }, 
      error: function() { 
       alert("Error occured!"); 
      } 
     }); 

     function getModelData() { 
      var dataToSubmit = { 
       Address1: $("#clientAddress1").val(), 
       Address2: $("#clientAddress2").val(), 
       City: $("#clientCity").val(), 
       Province: $("#clientProvince").val(), 
       PostalCode: $("#clientPostalCode").val(), 
       PhoneNumber: $("#clientPhoneNumber").val() 
      }; 

      return dataToSubmit; 
     } 
    }); 
</script> 

После нажатия на кнопку "Сохранить" на моей модальной форме, он перенаправляет на http://localhost:6969/Client/UpdateClientDetails/1234 со следующей строкой:

{"Address1":"38 Lesmill Rd","Address2":"Suite 1", 
"City":"Toronto","Province":"ON","PostalCode":"M3B 2T5", 
"PhoneNumber":"(416) 445-4504","Id":2827,"Name":"Advisor Centric"} 

Answer 1

Если вы перенаправлены при нажатии функции сохранения, это может быть вызвано несколькими причинами. Следующий фрагмент должен решить ваши проблемы.

$(document).on('click', '.btn-primary', function (event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     data: getModelData(), 
     dataType: 'json', 
     success: function (data) { 
      $("#Address1").text(data.Address1); 
      $("#Address2").text(data.Address2); 
      $("#City").text(data.City); 
      $("#Province").text(data.Province); 
      $("#PostalCode").text(data.PostalCode); 
      $("#PhoneNumber").text(data.PhoneNumber); 
     }, 
     error: function() { 
      alert("Error occurred!"); 
     } 
    }); 

    function getModelData() { 
     var dataToSubmit = { 
      Address1: $("#clientAddress1").val(), 
      Address2: $("#clientAddress2").val(), 
      City: $("#clientCity").val(), 
      Province: $("#clientProvince").val(), 
      PostalCode: $("#clientPostalCode").val(), 
      PhoneNumber: $("#clientPhoneNumber").val() 
     }; 
     return dataToSubmit; 
    } 
}); 

Изменения SNIPPET объяснил:

1. Вместо того, чтобы использовать метод щелчка JQuery, я обновил это использовать метод on. Это позволит нам присоединить событие к классу btn-primary, даже если оно загружается после того, как dom был отображен.
2. Теперь мы передаем объект события в метод. Это позволяет нам предотвратить любое поведение по умолчанию, которое ожидается, например, представление формы традиционно. Это достигается с помощью метода event.preventDefault().