Vue partielle de ne pas rafraîchissant

J'ai une vue partielle sur un cshtml page comme suit :-

@model MvcCommons.ViewModels.CompositeViewModel
@{
ViewBag.Title = "Edit";
}
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Article</legend>
@Html.HiddenFor(model => model.ArticleViewModel.Article.ArticleID)
<div class="editor-label">
@Html.LabelFor(model => model.ArticleViewModel.Article.CategoryID, "Category")
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.ArticleViewModel.Article.CategoryID, (SelectList)ViewBag.CategoryID) 
@Html.ValidationMessageFor(model => model.ArticleViewModel.Article.CategoryID)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ArticleViewModel.Article.ArticleTitle)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ArticleViewModel.Article.ArticleTitle)
@Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleTitle)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ArticleViewModel.Article.ArticleDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ArticleViewModel.Article.ArticleDate)
@Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleDate)
</div>
@Html.HiddenFor(model => model.PageViewModel.Page.PageTitle, new { id = "PageTitle" })
@Html.HiddenFor(model => model.PageViewModel.Page.PageAction, new { id = "PageAction" })
@Html.HiddenFor(model => model.ArticleViewModel.Article.ArticleID, new { id = "ArticleID" })
<div class="ImageGallery">
@Html.Partial("~/Views/Shared/ImageGallery.cshtml", Model)
</div>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")

La ImageGallery.cshtml Vue Partielle, est comme suit :-

@model MvcCommons.ViewModels.CompositeViewModel
@{
ViewBag.Title = "Modal image uploader";
}
<script type="text/javascript">
var pageTitle = $('#PageTitle').val();
var pageAction = $('#PageAction').val();
var id = $('#ArticleID').val();
$(document).ready(function () {
$('.modal_block').click(function (e) {
$('#tn_select').empty();
$('.modal_part').hide();
});
$('#modal_link').click(function (e) {
$('.modal_part').show();
var context = $('#tn_select').load('/Upload/UploadImage?Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id, function () {
initSelect(context);
});
e.preventDefault();
return false;
});
$('#delete_images').click(function (e) {
var sList = "";
$('input[type=checkbox]').each(function () {
var sThisVal = (this.checked ? this.value : "");
sList += (sList == "" ? sThisVal : "," + sThisVal);
});
$.ajax({
url: "/Upload/DeleteImages?IDs=" + sList + '&Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id,
data: sList,
cache: false,
type: "POST",
dataType: "json"
});
reloadGallery();
return false;
});
function reloadGallery() {
$.ajax({
type: "GET",
url: '/Upload/Index/',
data: "{}",
cache: false,
dataType: "html",
success: function (data)
{ $().html(data); }
})
}
});
</script>
<div class="modal_block modal_part"></div>
<div class="modal_dialog modal_part" id="tn_select"></div>
<h2>List of images</h2>
<p>
This page contains the list of all uploaded images.
</p>
@if (Model.ImageViewModel.Images.Count > 0)
{
<div class="imageContainer">
<div class="div-table">
<div class="div-table-row-title">
<div class="div-table-col">Image</div>
<div  class="div-table-col">Image Name</div>
</div>
</div>
}
</div>
<div class="DeleteImages">
<a href="#" id="delete_images">Delete Selected Images.</a>
</div>    

}
else
{
<div class="imageCenter">
No images have been uploaded so far.    
</div>    
}
<p>
<a href="#" id="modal_link">Click here to open modal dialog.</a>
</p>
<div class="clear"></div>

Voici le code dans le Contrôleur de supprimer les images:-

        [HttpPost]
public ActionResult DeleteImages(string IDs)
{
_Page = Request.QueryString["Page"];
_Action = Request.QueryString["Action"];
_ItemID = Convert.ToInt32(Request.QueryString["id"]);
Generics.PageIDS currentPage = (Generics.PageIDS)Enum.Parse(typeof(Generics.PageIDS), _Page);
_PageID = Convert.ToInt32(currentPage);
string[] sepImageIds = IDs.Split(',');
foreach (string strImageId in sepImageIds)
{
imageViewModel.DeleteFromXML(strImageId);
}
return RedirectToAction(_Action, _Page, new { id = _ItemID });
}

Tout fonctionne bien dans cette Vue Partielle, sauf quand je supprimer une image, la suppression est fait correctement, mais lorsque le code est passé à la Vue, la Vue Partielle n'est pas actualisé.

Est-il quelque chose que je suis absent?

Merci pour votre aide et votre temps!

------------------Mise à JOUR---------------------------------------------
C'est l'Édition de Contrôleur de l'Action après que la Suppression est terminé :-

        public ActionResult Edit(int id = 0)
{
articleViewModel.Article = unitOfWork.ArticleRepository.GetByID(id);
pageViewModel.Page.PageTitle = "Article";
pageViewModel.Page.PageAction = "Edit";
if (articleViewModel.Article == null)
{
return HttpNotFound();
}
PopulateDropDownList(articleViewModel.Article.CategoryID);
viewModel.ArticleViewModel = articleViewModel;
int ImageCount = 0;
imageViewModel.Images = imageViewModel.PopulateFromXML(pageViewModel.GetPageID(_PageName), id, out ImageCount).ToList();
viewModel.ImageViewModel = imageViewModel;
viewModel.PageViewModel = pageViewModel;
return View(viewModel);
//return Json(viewModel, JsonRequestBehavior.AllowGet);
}
Suivez ce lien pour "Une référence circulaire a été détecté lors de la sérialisation d'un objet" erreur: blog.davebouwman.com/2011/12/08/... et stackoverflow.com/questions/2002940/...

OriginalL'auteur Johann | 2012-08-28