asp.net - 通过 Ajax Post - MVC3 使用模型更改更新 View

Question

我正在尝试使用 Ajax(我认为)调用来更新我的模型值，然后将该新值反射(reflect)在 View 中。我暂时只是将其用于测试目的。

概述如下:

型号

public class MyModel
{
    public int Integer { get; set; }
    public string Str { get; set; }
}

Controller

    public ActionResult Index()
    {
        var m = new MyModel();
        return View("Test1", m);
    }

    [HttpPost]
    public ActionResult ChangeTheValue(MyModel model)
    {
        var m = new MyModel();
        m.Str = model.Str;
        m.Str = m.Str + " Changed! ";
        m.Integer++;

        return View("Test1", m);

    }

查看

  @model Test_Telerik_MVC.Models.MyModel
@using Test_Telerik_MVC.Models
@{
    ViewBag.Title = "Test1";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Test1</h2>
@if (false)
{
    <script src="~/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>
}
<h2>
    ViewPage1
</h2>

<div>
    <input type="button" onclick="changeButtonClicked()" id="changeButton" value="Click Me!" />
    <input type="text" value="@Model.Str" class="txt" id="str" name="Str"/>
    <div></div>
</div>

<script type="text/javascript">

    function changeButtonClicked() {
        var url = '@Url.Action("ChangeTheValue", "Test1")';
        var data = '@Model';
        $.post(url, data, function (view) {
            $("#Str").value = '@Model.Str';
        });
    }

</script>

基本上， View 呈现一个带有文本框的按钮。我的唯一目标是在文本框中简单地显示我的模型的值(Str 属性)。

我尝试了changeButtonClicked()函数的各种组合，但没有成功。 Test1 是我的 Controller 的名称。我不明白的是，当我调试它时， Controller 操作会触发并正确设置我的值。如果我在输入标记的“@Model.Str”部分放置一个断点，它会显示我的 @Model.Str 等于 Changed!哪个是对的。但是，一旦我的成功函数在 JavaScript 中触发，该值就会恢复到其原始值。

我可以通过更改要提交的输入类型并将其包装在 @Html.BeginForm() 部分中来使其工作，但我想知道是否/如何这样做？或者提交是完成它的唯一方法吗？

谢谢

Answer 1

在 jQuery 中，设置输入值的正确方法是使用:

$("#Str").val(@Model.Str);

接下来我们将看看 Controller 。在 POST操作结果是您在 AJAX 调用中返回整个 View 。这意味着所有 HTML、脚本引用和 JavaScript 都将在您的 jQuery post 请求中返回。由于您尝试更新的只是名为 Str 的输入的值。 ，我只会将该值作为 JSON 返回，而不返回其他值。

[HttpPost]
public ActionResult ChangeTheValue(MyModel model)
{
    var m = new MyModel();
    m.Str = model.Str;
    m.Str = m.Str + " Changed! ";
    m.Integer++;

    return Json(m.Str);

}

接下来我会将您的 HTML 输入放在 <form> 中这样你就可以让 jQuery 为你序列化你的模型，然后你可以将你的 jQuery post 代码更改为:

function changeButtonClicked() {
    var url = '@Url.Action("ChangeTheValue", "Test1")';
    $.post(url, $('form').serialize(), function (view) {
        $("#Str").val(view);
    });
}

序列化所做的就是将表单中的输入编码为字符串，如果所有内容都正确命名，ASP.NET 会将其绑定(bind)回您的模型。

如果您需要让路由处理 AJAX 调用和完整请求，您可以使用 ASP.NET 的 IsAjaxRequest函数来测试请求并根据请求是否是 AJAX 返回不同的结果。您可以在 Controller 中执行类似的操作:

[HttpPost]
public ActionResult ChangeTheValue(MyModel model)
{
    var m = new MyModel();
    m.Str = model.Str;
    m.Str = m.Str + " Changed! ";
    m.Integer++;

    if (Request.IsAjaxRequest) {
        return Json(m.Str);
    }
    else {
        return View("Test1", m);
    }
}

在 ActionResult上面您正在执行之前所做的所有操作，但现在正在测试请求类型，如果是 AJAX，您将返回字符串值的 JSON 结果。如果请求不是来自 AJAX 调用，则返回完整 View (HTML、脚本等)以在浏览器中显示。

我希望这对您有所帮助，并且正是您所寻找的。