4

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

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

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

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

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

非常感谢，克里斯

4

2 回答 2

3

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

更新 - 2016 年 11 月 30 日

例如： 

@using (Ajax.BeginForm("SomeAction", "SomeController", new { someRouteParam = Model.Foo }, new AjaxOptions { UpdateTargetId = "SomeHtmlElementId", HttpMethod = "Post" }))
于 2011-09-12T14:19:36.373 回答
1

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-部分视图

更新

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

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

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

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

于 2011-09-12T10:21:22.607 回答