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

Question

在我的應用程序中，我使用Jquery發送帶有字符串值的發布請求，然后在控制器中，傳遞的字符串值用於從API獲取一些數據。

下一步控制器返回一個視圖和模型，其中包含來自API的數據。 我想將來自模型的數據放入幾個文本框的值中。

主要問題是我不知道如何用模型值刷新該div。 當我使用沒有jquery和ajax的帖子形式時，它可以工作，但我想異步進行。

具有發布請求的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);
    }

在索引視圖中具有模型值的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對象中的Info 。 這樣，您可以直接直接更新input元素的值。 也許是這樣的：

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

您要如何處理它取決於您。 但是您絕對可以選擇，並且可以進行大量的重構以簡化操作。

Answer 2

您需要在AJAX請求中使用success: function(data)偵聽器。 獲取您的data並將其解析到div中。