Question

我在cshtml页面上有一个部分视图如下： -

@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部分视图如下： -

@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时，部分视图不会刷新。

我有什么遗失的吗？

感谢您的帮助和时间！

------------------ UPDATE ---------------------------- ----------------- 这是删除完成后的编辑控制器操作： -

        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

我认为这是因为默认情况下缓存了所有部分视图，我要做的是在控制器中创建一个方法来返回类似的ActionResult，输出缓存属性为0，所以它不缓存

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

我会给你的imageGalleryDiv一个id，更改你的reloadGallery方法以加载onload事件的局部视图并删除@ Html.Partial就像这样

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

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

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

干杯

Answer 2

一旦DELETE ajax调用成功，你需要调用reloadGallery函数，这是在成功回调中：

$.ajax({
    url: '/Upload/DeleteImages?IDs=' + sList + '&Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id,
    data: sList,
    cache: false,
    type: 'POST',
    success: function(data) {
        reloadGallery(); 
    }        
});

更不用说您的DeleteImages操作不会返回任何JSON，因此您应该删除dataType: 'json'开关。您似乎在DeleteImages操作结束时重定向。您确定要重定向到返回部分的控制器操作吗？

另外，不是在reloadGallery方法中触发另一个AJAX请求，为什么不简单地让DeleteImages操作返回部分内部success调用更新DOM的相应部分.html方法？

Answer 3

我认为这可能是你的ajax电话

function reloadGallery() {
    $.ajax({
        type: "GET",
        url: '/Upload/Index/',
        data: "{}",
        cache: false,
        dataType: "html",
        success: function (data)
        { $().html(data); }

    })

}

删除数据：“{}”或将其替换为数据：{}

部分视图不令人耳目一新

3 个答案: