在 ASP.Net MVC 中的操作后替换部分视图

Question

我对 ASP.NET MVC 还很陌生，想知道如何实现以下目标： 在作为母版页一部分的普通视图上，我使用循环创建了不同数量的部分视图，每个视图代表用户应该能够投票的项目。单击投票按钮后，评级将提交到数据库，然后用户单击的特定部分视图将被相同的视图替换，并更改一些视觉属性。实现这一目标的最佳实践是什么？

我是这样开始的： 1. 我使用 if 语句定义了部分视图，根据特定视图模型中的标志区分视觉外观。因此，如果标志为正，则显示投票控件，如果为负，则不显示。

1. 我将 Url.Action(..) 分配给触发控制器方法的投票按钮。在此方法中，新的评级将添加到数据库中。

2. 在控制器方法中，我返回带有更新的 ViewModel 的 PartialView。不幸的是，整个视图都被替换，而不仅仅是部分视图。

任何关于如何解决这个特定问题或如何实现整个事情的建议将受到高度赞赏。

非常感谢， 克里斯

Answer 1

解决您的问题的简单（但无论如何都是正确且可用的）解决方案是 Ajax.BeginForm() 投票助手。通过这种方式，您可以将投票更改为 ajax 调用，并且可以轻松指定此调用返回的结果（来自您的投票操作，将返回仅包含 1 个更改项目的部分视图）将用于替换旧内容（例如投票前包含旧项目的特定 div）。

更新 - 2016 年 11 月 30 日

例如：

@using (Ajax.BeginForm("SomeAction", "SomeController", new { someRouteParam = Model.Foo }, new AjaxOptions { UpdateTargetId = "SomeHtmlElementId", HttpMethod = "Post" }))

Answer 2

ASP.NET MVC 是满足这种需求的完美框架。如果我处于您的位置，我会做的就是使用 JQuery Ajax API。

以下博客文章应该会提示您如何使用 PartialViews、JQuery 和 Ajax 调用服务器：

http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and- asp-net-mvc-partial-views

更新

有人要求做一个简短的介绍，所以就在这里。

以下代码是您的操作方法：

    [HttpPost]
    public ActionResult toogleIsDone(int itemId) {

        //Getting the item according to itemId param
        var model = _entities.ToDoTBs.FirstOrDefault(x => x.ToDoItemID == itemId);
        //toggling the IsDone property
        model.IsDone = !model.IsDone;

        //Making the change on the db and saving
        ObjectStateEntry osmEntry = _entities.ObjectStateManager.GetObjectStateEntry(model);
        osmEntry.ChangeState(EntityState.Modified);
        _entities.SaveChanges();

        var updatedModel = _entities.ToDoTBs;

        //returning the new template as json result
        return Json(new { data = this.RenderPartialViewToString("_ToDoDBListPartial", updatedModel) });
    } 

RenderPartialViewToString是控制器的扩展方法。你
这里需要使用 Nuget 来下载一个非常小的包，名为
TugberkUg.MVC 它将有一个控制器扩展供我们转换
控制器内部字符串的部分视图。

然后，这里是有关如何使用 JQuery 调用它的简要信息：

var itemId = element.attr("data-tododb-itemid");
var d = "itemId=" + itemId;
var actionURL = '@Url.Action("toogleIsDone", "ToDo")';

$("#ajax-progress-dialog").dialog("open");

$.ajax({
    type: "POST",
    url: actionURL,
    data: d,
    success: function (r) {
        $("#to-do-db-list-container").html(r.data);
    },
    complete: function () {
        $("#ajax-progress-dialog").dialog("close");
        $(".isDone").bind("click", function (event) {
            toggleIsDone(event, $(this));
        });
    },
    error: function (req, status, error) {
        //do what you need to do here if an error occurs
        $("#ajax-progress-dialog").dialog("close");
    }
});

需要采取一些额外的步骤。因此，请查看包含完整演练的博客文章。