javascript - 在 jquery 发布后更新 div 显示而不重新加载 mvc3 中的页面

Question

什么是最好的 大家好，这里是 MVC3 新手!请看看这些:

在我的 View 页面中，我有:

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

在 Controller 中:

      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

您仅使用 $.post() 向服务器发送数据(请求)。 AJAX 可以是两方面的:发送请求，并接收相应的响应。在您的代码中，您不会收到返回的数据(或者，至少，做出必要的安排以便您收到)。

如果 UserController 的 SetAccountStatus 操作设置为返回一些数据(可能通过 return Json() 或类似方式)，您可以修改 $.post() 调用以接收它，并让您的 Javascript 使用回调函数做出相应的 react 。

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

});