更新div顯示後jquery後無需重新加載頁面mvc3

Question

什麼是最好的，大家好，MVC3新手在這裏！請這些看一看：在我看來，頁面

，我有有：

<div id = "AccounStatusDiv" class="display-field"> 
    @Html.DisplayFor(m => m.AccountStatus) 
    <input id="btnBool" type="button" class="btnGrid ActStatBtn" value="@(Model.AccountStatus ? "Deactivate" : "Activate")" onclick="ChangeStatus()"/> 
    </div> 

和腳本：

 <script type="text/javascript"> 
     function ChangeStatus() { 
     $.post('@Url.Action("SetAccountStatus", "User")', 
       { UserName: "@(Model.UserName)", 
       accountStatus: "@(Model.AccountStatus)" }); 

     // change the display of the AccounStatusDiv elements, or maybe just reload the div element if possible. is it? 
     } 
    </script> 

，而在我的顯示模板，我有有：

 <div id = "AccountStatusDiv" style="display:inline-block;"> 
     <img src="@Html.Custom().ResolveImage((bool)Model ? imgPositive : imgNegative)" alt="@Model" /> 
     <label> @ResourceManager.Localize(resource, display)</label> 
     </div> 

在控制器中：

 public ActionResult SetAccountStatus(string userName, bool accountStatus) 
     { 
     SecurityManager.GetMembershipProvider().SetStatus(userName, !accountStatus); 
     return AjaxResult.JsonRedirect("/User/ViewUser?username=" + userName); 
     } 

結果僅在我重新加載頁面後才顯示。 我想在不重新加載整個頁面的情況下單擊btnBool後立即顯示更新的img,label和btnBool元素。在這種情況下最好的方法是什麼？ 請發表您的代碼建議，這對我來說是一個很大的幫助！ 在此先感謝！

Answer 1

這是事件點擊按鈕和無刷新頁面

$("#btnBool").click(function(e){ 
e.preventDefault(); 
//to do your code, you can use `$.ajax` to request and get response from server 
    $.ajax({ 
    url: '@Url.Action("SetAccountStatus", "User")', 
    type:"GET", 
    dataType: 'json', 
    data: { UserName: "@(Model.UserName)",accountStatus: "@(Model.AccountStatus)" }, 
    async:'true', 
    success:function (data) { 
    alert(data); 
    //success to parsing json if you data type of your response is json 
    } 
    }); 
} 

您可以使用Web服務來發送請求並得到服務器的響應，並要求，從服務器獲取的響應，你可以在jQuery中使用$.ajax()http://api.jquery.com/jQuery.ajax/

Answer 2

您只使用$.post()發送數據（請求）到服務器。 AJAX可以是雙重的：發送請求並接收相應的響應。在你的代碼中，你沒有收到數據（或者至少是做出必要的安排以保證你）。

如果UserController的SetAccountStatus操作設置爲一些數據恢復回來（也許通過return Json()，或類似），您可以修改$.post()電話接受它，並讓您的Javascript發生反應，從而用一個回調函數。

var data = { 
    UserName: "@Model.UserName", 
    accountStatus: "@Model.AccountStatus" 
}; 

var call = $.post(
    '@Url.Action("SetAccountStatus", "User")', 
    data 
); 

// set the success callback here 
call.success(function (m) { 

    // the [m] variable contains the data returned by the server 
    // during the resolution of your call 

    // this will be called when your AJAX call succeeds, 
    // and you can use this opportunity to update the HTML DOM with new data 

});