ASP.NET 中的 Jquery 和 Ajax 如何使用模型更新 div

Question

在我的应用程序中，我使用 Jquery 发送带有字符串值的 post 请求，然后在控制器中，传递的字符串值用于从 API 获取一些数据。

下一个控制器返回一个视图和模型，其中包含来自 API 的数据。我想将模型中的数据放入几个文本框的值中。

主要问题是我不知道如何使用模型值刷新该 div。当我使用没有 jquery 和 ajax 的 post 表单时，它可以工作，但我想异步执行。

带有 post 请求的 Js 脚本：

<script type="text/javascript">

    $(document).ready(function () {

        $('#btn').click(function () {

            var data1 = $('#textBox').val();

            $.ajax({
                url: '/Home/Fill',
                type: 'POST',
                dataType: 'string',
                data: { number:data1 },
                success: function (data) {

                }

            });

        });
    });

控制器：

[HttpPost]
    public ActionResult Fill(string number)
    {

        CompanyInfo Info = new CompanyInfo();

        //Here some API actions

        return View("Index",Info);
    }

Index 视图中带有模型值的 Div：

<div id="target">

    <h1>Number:</h1>
    <input type="text" value="@Html.DisplayFor(m => m.Num)" id="Number" />

    <br />

    <h1>Company name:</h1>
    <input type="text" value="@Html.DisplayFor(m=>m.CompanyName)" id="CompanyName" />

    <br />

    <h1>Street Address</h1>
    <input type="text" value="@Html.DisplayFor(m=>m.StreetAddress)" id="Address" />

</div>

Answer 1

此时，您并没有真正使用 ASP.NET MVC 意义上的“视图和模型”，您只是使用 JavaScript/jQuery 来更新您的 DOM。你如何做到这一点取决于你拥有的数据，并且完全在这里完成：

success: function (data) {

}

那么data 中有什么？

这意味着您在data 中有 HTML，甚至可能是整个页面：

return View("Index",Info);

如果是这种情况，您可能希望从data 中选择您想要的信息。它与您已经显示的相同页面吗？如果是这样，那么您可以将已有的 HTML 替换为页面中的 HTML。也许是这样的：

var newTarget = $('#target', data).html();
$('#target').html(newTarget);

这应该从data 中获取div id="target" 的HTML，然后在当前页面中将其设置为相同的div。

如果data 中的 HTML 与当前页面不同，那么您当然需要以不同的方式定位您正在做的事情。但最终它是相同的概念。请注意，用新元素替换页面中的 HTML 元素的副作用是丢失旧元素上的任何事件绑定。

---

请注意，这不是最有效的方法。当您只需要更新的模型时返回整个页面会包含很多开销，而您最终会忽略这些开销。这将是研究在您的项目中使用 WebAPI 控制器的好机会，您可以在其中返回普通对象：

return Info;

或者甚至只是从您的 MVC 控制器返回一个 JsonResult 就可以了：

return Json(Info);

这样，您的客户端代码中的data 变量不会包含所有这些不必要的HTML，而是包含只是Info 对象中的信息。这样，您可以直接更新 input 元素的值。也许是这样的：

$('#Number').val(data.Num);
$('#CompanyName').val(data.CompanyName);
$('#Address').val(data.StreetAddress);

这取决于你想如何处理它。但是你肯定有选择，并且可以做一些重构来简化事情。

Answer 2

您需要在 AJAX 请求中使用 success: function(data) 侦听器。获取您的 data 并将其解析到 div 中。