MVC 5 Ajax.BeginForm only works the first time - asp.net-mvc

Question

I've been struggling for a while now with the Ajax.BeginForm.
So, what I want to achieve is:
Clicking a button that will open a Modal Popup with a Partial View inside.
When I close the Modal Popup by pressing the Save button the information will be reloaded on the target control id by call an action on the controller.
What is happening is that the first time I do this, everything seems to work as intended. However as soon as I try to add something else, it does not work anymore.
Here goes the code.
Heres the code on the view that is being loaded inside the 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">×</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>
}
Here's the controller relevant actions:
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");
}
And finally the script that is run when OnSuccess:
function ShowSuccess(data) {
if (data.success) {
$('#defaultModal').modal('hide');
$('#' + data.method).load(data.url);
}
}
function ShowFailure(data) {
alert('Problem occured');
}
Thanks in advance for your help and time.

Answer 1

Well I solved the problem by adding the following to the script on the partial view:
<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 someone else.