update the div display after jquery post without reloading the page in mvc3

Question

What is the bestHi everyone, a MVC3 newbie here! please take a look at these:

in my View page, i have there:

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

and a script:

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

while in my Display Template, i have there:

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

in the controller:

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

The results are shown only after I reload the page. I want to display the updated img , label and btnBool elements right after clicking the btnBool without reloading the whole page. What is the best way in such case? Please post your code suggestions, it would be a great help for me! Thanks in advance!

Answer 1

You're only using $.post() to send data (request) to the server. AJAX can be two-fold: send a request, and receive the corresponding response. In your code, you're not receiving data back (or, at least, making the necessary arrangements so that you are).

If the SetAccountStatus action of your UserController is set to return some data back (maybe through return Json() , or similar), you can modify the $.post() call to receive it, and have your Javascript react accordingly using a callback function.

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

});

Answer 2

this is to event click in button and without refresh page

$("#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
    }
   }); 
}

you can use web service to send request and get response from server , and to request,get response from server you can use $.ajax() in jquery http://api.jquery.com/jQuery.ajax/