Question

我还是ASP.NET MVC的新手，并想知道如何实现以下目标：在作为母版页的一部分的普通视图中，我使用循环创建不同数量的部分视图，每个视图代表用户应该能够投票的项目。点击投票按钮后，评级应提交给数据库，之后，用户点击的特定局部视图将被同一视图替换，并改变一些视觉属性。实现这一目标的最佳做法是什么？

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

我为投票按钮分配了一个Url.Action（..），触发了控制器方法。在此方法中，新的评级将添加到数据库中。
在控制器方法中，我返回带有更新的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将有一个Controller扩展供我们转换部分视图到控制器内的字符串。

然后，这是一个关于如何使用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");
    }
});

需要采取一些额外措施。请查看具有完整演练的博客文章。

在ASP.Net MVC中的操作后替换partialview

2 个答案: