c# - 局部 View 不刷新

Question

我在 cshtml 页面上有一个局部 View ，如下所示:-

@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")

ImageGallery.cshtml 局部 View 如下:-

@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>

这是 Controller 中删除图像的代码:-

        [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 });
    }

在这个局部 View 中一切正常，除了当我删除图像时，删除是正确完成的，但是当代码传回 View 时，局部 View 没有刷新。

有什么我想念的吗？

感谢您的帮助和时间!

----------------更新---------------------------- ------------------这是删除完成后的编辑 Controller 操作:-

        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);
    }

Answer 1

我想是因为默认情况下所有的局部 View 都被缓存了，我会做的是在 Controller 中创建一个方法来返回一个像这样的ActionResult，输出缓存属性为0，所以它不缓存

[OutputCache(Duration = 0)]
public ActionResult ImageGalleryAction()
{
  // do return your cshtml name here
  return PartialView("ImageGallery");
}

我会为您的 imageGalleryDiv 提供一个 id，更改您的 reloadGallery 方法以在 onload 事件上加载部分 View ，并像这样删除 @Html.Partial

<script>
function reloadGallery(){
   $('#myImageGallery').load("ImageGalleryAction");
}
</script>

<div id="myImageGallery" class="ImageGallery" onload="reloadGallery()">
 </div>

这样，您的部分 View 将通过 jquery 手动注入(inject)/刷新，并且不会被缓存。

干杯