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

在我的應用程序中，我使用Jquery發送包含字符串值的post請求，然後在控制器中傳遞字符串值用於從API獲取一些數據。ASP.NET內的Jquery和Ajax如何使用模型更新div

下一個控制器返回一個視圖和模型與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 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>

來源

2017-09-19 john.kernel

此時，您並不真正在ASP.NET MVC意義上使用「視圖和模型」，您只需使用JavaScript/jQuery來更新DOM。你如何做到這一點取決於你的數據，並在這裏完全做到：

success: function (data) { 

}

那麼在data的？

這意味着你的HTML data，甚至整個頁面：

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);

這取決於你如何接近它。但是你肯定有選擇，可以做一些重構來簡化事情。

來源

2017-09-19 11:36:43 David

非常感謝您的答覆。我使用了這個Json選項，一切正常。我非常感謝你的幫助和分享知識。 –

您需要使用success: function(data)偵聽器在您的AJAX請求中。得到你的data並解析它到div中。

來源

2017-09-19 11:27:04

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

回答

相關問題