MVC 5 Ajax.BeginForm ne fonctionne que la première fois

Question

Je me bats depuis un moment avec le Ajax.BeginForm.

Alors, ce que je veux réaliser est:

1. En cliquant sur un bouton qui ouvre une Popup Modal avec une vue partielle à l'intérieur.
2. Lorsque je ferme le menu contextuel modal en appuyant sur le bouton Enregistrer, les informations seront rechargées sur l'ID de contrôle cible en appelant une action sur le contrôleur.

Ce qui se passe est que la première fois que je fais cela, tout semble fonctionner comme prévu. Cependant, dès que j'essaie d'ajouter quelque chose, ça ne marche plus.

Voici le code.

Heres le code de la vue qui est en cours de chargement à l'intérieur du Modal Popup

@model GEMS.Models.ViewModels.AddressVM 
 

 
@{ 
 
    string controllerName = ViewContext.RouteData.Values["controller"].ToString(); 
 
    string actionName = ViewContext.RouteData.Values["action"].ToString(); 
 
} 
 

 
<div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
     <span aria-hidden="true">&times;</span> 
 
    </button> 
 
    <h4 class="modal-title" id="myModalLabel">@HTMLHelper.TranslateCRUDTitles(controllerName, actionName)</h4> 
 
</div> 
 
@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnSuccess = "ShowSuccess", OnFailure = "ShowFailure" })) 
 
{ 
 
    @Html.AntiForgeryToken() 
 
    <div class="modal-body"> 
 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 
     @foreach (System.Reflection.PropertyInfo prop in Model.GetDisplayProps()) 
 
     { 
 
      switch (prop.Name) 
 
      { 
 
       case "NewAddressTypeName": 
 
        break; 
 
       case "AddressType": 
 
        <div class="form-group"> 
 
         @Html.Label(prop.Name) 
 

 
         @Html.DropDownList("AddressTypeID", null, htmlAttributes: new { @class = "form-control" }).DisableIf(() => actionName == "Delete") 
 
         @Html.ValidationMessage(prop.Name, new { @class = "text-danger" }) 
 

 
        </div> 
 
        break; 
 
       case "Country": 
 
        <div class="form-group"> 
 
         @Html.Label(prop.Name) 
 

 
         @Html.DropDownList("CountryID", null, htmlAttributes: new { @class = "form-control" }).DisableIf(() => actionName == "Delete") 
 
         @Html.ValidationMessage(prop.Name, new { @class = "text-danger" }) 
 

 
        </div> 
 
        break; 
 
       case "IsDefault": 
 
        <div class="form-group"> 
 

 
         <label class="checkbox-inline"> 
 
          @Html.Editor(prop.Name, new { htmlAttributes = new { @class = "grey" } }).DisableIf(() => actionName == "Delete") 
 
          @Html.Label(prop.Name) 
 
         </label> 
 
         @Html.ValidationMessage(prop.Name, new { @class = "text-danger" }) 
 

 
        </div> 
 
        break; 
 
       case "SameAsID": 
 
        if (ViewBag.SameAsID != null) 
 
        { 
 
         <div class="form-group"> 
 
          @Html.Label(prop.Name) 
 

 
          @Html.DropDownList(prop.Name, null, htmlAttributes: new { @class = "form-control" }).DisableIf(() => actionName == "Delete") 
 
          @Html.ValidationMessage(prop.Name, new { @class = "text-danger" }) 
 

 
         </div> 
 
        } 
 
        break; 
 
       default: 
 
        <div class="form-group"> 
 
         @Html.Label(prop.Name) 
 

 
         @Html.Editor(prop.Name, new { htmlAttributes = new { @class = "form-control" } }).DisableIf(() => actionName == "Delete") 
 
         @Html.ValidationMessage(prop.Name, new { @class = "text-danger" }) 
 

 
        </div> 
 
        break; 
 
      } 
 
     } 
 
     @foreach (System.Reflection.PropertyInfo prop in Model.GetHiddenProps()) 
 
     { 
 
      <input id="@prop.Name" name="@prop.Name" type="hidden" value="@Model.GetPropValue(prop.Name)"> 
 
     } 
 
    </div> 
 
    <div class="modal-footer"> 
 
     @if (actionName == "Delete") 
 
     { 
 
      <p> 
 
       @Resources.ConfirmAddressDelete 
 
      </p> 
 
     } 
 
     <button class="btn btn-yellow" type="button" data-dismiss="modal"> 
 
      @Resources.Cancel <i class="fa fa-arrow-circle-left"></i> 
 
     </button> 
 
     @switch (actionName) 
 
     { 
 
      case "Create": 
 
      case "Edit": 
 
       <button class="btn btn-success" type="submit" value="Save"> 
 
        @Resources.Save <i class="fa fa-save"></i> 
 
       </button> 
 
       break; 
 
      case "Delete": 
 
       <button class="btn btn-red" type="submit" value="Delete"> 
 
        @Resources.Delete <i class="fa fa-times"></i> 
 
       </button> 
 
       break; 
 
     } 
 
    </div> 
 
}

est ici le contrôleur des actions pertinentes:

public ActionResult Index(List<AddressVM> addressVMList) 
    { 
     addressVMList = addressVMList ?? (List<AddressVM>)TempData["AddressVMList"]; 

     TempData["AddressVMList"] = addressVMList; 

     TempData.Keep("AddressVMList"); 

     return PartialView("_Index", addressVMList); 
    } 

    public ActionResult Create() 
    {   
     TempData.Keep("AddressVMList"); 
     ViewBag.AddressTypeID = new SelectList(AddressType.GetList(), "ID", "Name"); 
     ViewBag.CountryID = new SelectList(Country.GetList(), "ID", "NiceName"); 

     List<AddressVM> addressVMList = (List<AddressVM>)TempData["AddressVMList"];   

     return PartialView("_CreateEditDelete", new AddressVM()); 
    } 

    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(AddressVM addressVM) 
    { 
     if (ModelState.IsValid) 
     { 
      //Create a fake ID in order to be able to edit and manipulate the address before it is actually saved 
      List<AddressVM> addressVMList = (List<AddressVM>)TempData["AddressVMList"]; 
      addressVM.Id = (addressVMList.Count + 1) * -1; 
      addressVMList.Add(addressVM); 

      if (addressVM.IsDefault) ListedPropVM.SetDefault(addressVMList.Cast<ListedPropVM>().ToList(), addressVM.Id); 

      TempData.Keep("AddressVMList"); 

      string url = Url.Action("Index", "Addresses", null); 
      return Json(new { success = true, url = url, method = "replaceTargetAddresses" }); 
     } 

     // return PartialView("_CreateEditDelete", addressVM); 
     return RedirectToAction("Create"); 
    } 

Et enfin le script que je Courons lorsque OnSuccess:

function ShowSuccess(data) {   
 
     if (data.success) { 
 
      $('#defaultModal').modal('hide'); 
 
      $('#' + data.method).load(data.url); 
 
     } 
 
    } 
 
    function ShowFailure(data) { 
 
     alert('Problem occured'); 
 
    }

Merci d'avance pour votre aide et votre temps.

Answer 1

Eh bien, je résolu le problème en ajoutant ce qui suit au script sur la vue partielle:

<script type="text/javascript"> 
 
    **$(document).ready(function() { 
 
     $.ajaxSetup({ cache: false }); 
 
    });** 
 

 
    function ShowSuccess(data) { 
 
     if (data.success) { 
 
      $('#defaultModal').modal('hide'); 
 
      $('#' + data.method).load(data.url); 
 
     } 
 
    } 
 
    function ShowFailure(data) { 
 
     $('#defaultModalContent').html(result); 
 
    } 
 
</script>

Hope this helps quelqu'un d'autre.