jquery - 在 AJAX 上更新模型时出现问题 "POST"

Question

我正在尝试更新我的模型而不刷新页面。我正在使用一个所见即所得的内联编辑器，我的页面上很多地方都有它。编辑器可以放置在页面上的任何位置，它可能如下所示:

<div id="1" class="click2edit">@Model.Header</div>

<div id="2" class="click2edit">@Model.Content</div>

各位编辑div有一个 SaveButton 可以转到下面的 jquery、ajax。 它的作用是:当我点击保存按钮时，例如 <div id="1" class="click2edit">@Model.Header</div> 它发布该 div id 及其内容(在本例中为 @Model.Header )。还有我的整个@model

$('.click2edit').click(function () {
    var modelDataJson = '@Html.Raw(Json.Encode(Model))';
    $(this).note({ focus: true });
    var activeId = (this.id);
    activeId = activeId.replace(/ /g, '');
    $(this).note({
        oninit: function () {
            $('#saveFileBtn').click(function (event) {
                $('#previewBtn').click(),
                $.ajax({
                    url: '/Home/SaveContent',
                    type: 'POST',
                    data: {
                        model: modelDataJson,
                        activeId: activeId,
                        contentToUpdate: $("div#" + activeId).html()
                    },
                    dataType: 'json',
                    success: function (data) {
                        alert("sucess");
                    },
                    error: function () {
                        alert("error");
                    }
                });
                $('.click2edit').destroy();
            });
        }
    });
});

然后在我的 mvc Controller 中，它将新内容放在正确的位置并保存到我的数据库中。 这是通过用从 View 中发布的新模型替换整个旧模型来完成的:

[ValidateInput(false)]
public void SaveContent(string model, string activeId, string contentToUpdate)
{
    //my logic to save to db is here...
}

问题是: 我的 Razor View 中的模型没有更新。如果我只是保存我的编辑内容之一，一切都会正常。但是，当我在刷新页面之前尝试保存另一个页面时，它没有得到更新。 那是因为我的 Razor View @model仍然保持旧的值(value)观。 所以基本上唯一更新的值是我要保存的最后一个值。 我可以以某种方式刷新我的 View @model而不刷新整个页面吗？

编辑: 我现在改变了我的成功函数，所以它看起来像这样:

success: function (data) {
    $("#1").text(data.Header);
},

但是它的模型值不会更新。我从成功函数发回的数据是我的 Json 模型。

<div id="1" class="click2edit">@Model.Header</div>

Answer 1

以下是我们的聊天摘要:

MVC 模型是一个实例，包含在服务器上构建的数据，用于控制 View 的呈现并向 View 提供数据。 HTTP 的无状态特性决定了您只能在 View 渲染过程中访问服务器端数据。一旦渲染完成，它就完全掌握在浏览器手中，服务器端对象中存在的任何数据都会从内存中释放。

此后，您将无法再使用 Razor 服务器端语法 @if 或 @model 来访问模型数据(该模型存在时存在)正在渲染的页面不再存在)。相反，您应该使用 DOM 和 JavaScript 对象来更新页面的外观和内容(同时在服务器端使用 Ajax 保存数据)。如果不进行整页发布，您唯一的选择是使用客户端代码 (JavaScript) 来操作用户所看到的内容(因此名称:View)，以便他们看到的内容与 Ajax POST 之后发生的更改相匹配。

我在这里创建了一个要点来演示这些概念:https://gist.github.com/xDaevax/f5e192c03f6a2bfc2cdb

本质上，您的 Controller 需要类似于以下的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxMvcTest.Controllers {
    public class HomeController : Controller {
        //
        // GET: /Home/


        public ActionResult Index() {
            HomeModel model = new HomeModel();
            model.Header = "Default Header";
            model.Content = "People assume that time is a strict progression of cause to effect, but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly-wobbly... timey-wimey... stuff.";
            return View(model);
        }

        [ValidateInput(false)]
        public JsonResult SaveContent(UpdateDataModel updateRequest) {
            //Do some stuff
            HomeModel newModel = new HomeModel();
            newModel.Content = updateRequest.Content;
            newModel.Header = updateRequest.Header;

            return Json(newModel);
        }

    }
}

这是将与上述 Controller 一起使用的 View :

@model HomeModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<div id="1" class="click2edit">@Model.Header</div>
<br />
<div id="2" class="click2edit">@Model.Content</div>
<br />
Header:&nbsp;&nbsp; <input type="text" name="HeaderInput" id="HeaderInput" value="@Model.Header" />
<br />
Content: <textarea name="ContentInput" id="ContentInput">@Model.Content</textarea>
<br />
<input type="button" id="saveFileBtn" value="Save" />

<script type="text/javascript">
    $(function () {

        $("#saveFileBtn").click(function (e) {
            $.ajax({
                url: '/Home/SaveContent',
                type: 'POST',
                data: getFormData(),
                dataType: 'json',
                success: function (data) {
                    $("#1").text(data.Header);
                    $("#2").text(data.Content);
                    $("#HeaderInput").val(data.Header);
                    $("#ContentInput").val(data.Content);
                },
                error: function () {
                    alert("error");
                }
            });
        });
    });

    function getFormData() {
    //Convert the form data to a javascript object
        var dataToSubmit = {
            Header: $("#HeaderInput").val(),
            Content: $("#ContentInput").val(),
            TimeStamp: new Date(),
            Id: 1
       };

       return dataToSubmit;
    }
</script>

这样，您可以看到客户端(JavaScript)代码负责在 Controller 之后的ajax方法的success回调中更新 View 已完成工作，并且使用 getFormData() 方法将表单值转换为 JavaScript 对象，MVC 模型绑定(bind)器可以读取该对象并将其转换为 .NET 服务器端模型。如果您不想手动执行此操作，可以使用 JQuery 的 serialize 方法序列化整个表单，并提供与您的服务器端模型匹配的表单值。