changing server side value in mvc and reloading view

Hi all: I have a condition in mmy MVC view like this:

if (Profile.visStats == 0)

 <img id="image1" alt="" class="statbackground" src="leftblueFolder.png"/>

else

 <img id="image2" alt="" class="statbackground" src="ri开发者_StackOverflowghtblueFolder.png"/>  

This works fine.

Now I have two link buttons

<a id="visGamebut" runat="server"  >Game</a>
<a id="visSeasonbut" runat="server">Season</a>

1) onclick visGamebut I want to make Profile.visStats = 1 and show image2 How to do this

Suppose you have a controller called ProfileController. Add a method that will handle the update from the client:

public JsonResult UpdateStats()
{
    Profile profile = fetch profile from somewhere;
    profile.visStats = 1;
    //save to db
    return Json(new {result = true});
}

In your view, add the folowing code inside a <script> tag, that will perform the ajax call:

$(function(){ //code should run on document load
  $('#visGamebut').click(function(){ //Attach click handler to the visGamebut link
    $.post('/Profile/UpdateStats', function(data){ //Perform ajax call to the server
      if(data.result){ 
        $(this).unbind('click'); //Unbind the click hander, not to run again on future clicks
        $('#image1').attr('src', 'rightblueFolder.png'); //update img source to image2
      }
    });
  });
});