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
Vous devez vous connecter pour publier un commentaire.
Je pense que c'est parce que toutes les vues partielles sont mises en cache par défaut, ce que je voudrais faire est de créer une méthode dans le contrôleur pour revenir un ActionResult comme si, avec la mise en cache de sortie de l'attribut de 0, de sorte qu'il ne met pas en cache
Je voudrais lui donner un id à votre imageGalleryDiv, changer votre reloadGallery méthode pour charger la vue partielle sur l'événement onload ainsi et enlever le @Html.Partielle comme
De cette façon, votre vue partielle sera injecté manuellement/actualisée via jquery et il ne sera pas mis en cache.
Acclamations
Pas de bounty ??? 🙂
OriginalL'auteur Joshscorp
Vous devez appeler la
reloadGallery
fonction une fois votre SUPPRIMER ajax appel réussit, ce qui est à l'intérieur de la réussite de rappel:Ne pas mentionner que votre
DeleteImages
action ne renvoie aucun JSON, donc, vous devez supprimer ledataType: 'json'
commutateur. Vous semblez être la redirection à la fin de laDeleteImages
action. Êtes-vous sûr que vous rediriger à l'action d'un contrôleur qui renvoie un partiel?Aussi au lieu de tirer encore un autre requête AJAX dans votre
reloadGallery
méthode pourquoi ne pas tout simplement avoir votreDeleteImages
action de retour partiel et à l'intérieur de lasuccess
appel de mise à jour de la section correspondante de votre DOM à l'aide de la.html
méthode?Vous avez besoin d'utiliser des modèles de vue, vous ne pouvez pas JSON sérialiser des objets avec des références circulaires.
Je suis en utilisant des ViewModels, je suis de retour d'un CompositeViewModel
Vous devez vous débarrasser de toutes les références circulaires que vous pourriez avoir à ce modèle de vue. Par exemple, si vous avez une propriété dans ce modèle d'affichage dans lequel vous avez directement stockées votre modèle de domaine alors ce pourrait être le problème. Les modèles de vue ne devrait pas avoir toutes les références à des modèles de domaine.
Darin je suis nouveau à tout cela MVC et Jquery chose. Qu'entendez-vous par modèle de domaine? Est-ce le modèle que je reçois le Modèle de Vue? Par exemple, j'ai un Modèle de l'Image, puis une Image ViewModel qui est "hériter" de l'Image. Est-ce mauvais pour la circulaire de référence? J'ai aussi un CompositeViewModel, et je suis de l'instanciation de 4 Viewmodel. Est-ce mauvais de codage? J'avais besoin d'avoir une référence pour la Page, l'Image et l'Article dans le point de Vue, c'est pourquoi j'ai créé le Composite ViewModel
OriginalL'auteur Darin Dimitrov
Je pense qu'il pourrait être dans votre appel ajax
supprimer les données: "{}" ou la remplacer par des données: {}
OBTENIR, en théorie, est la quantité, de sorte que la mise en cache doit être activé par défaut
OriginalL'auteur feskr