State Management of javascript conent in MVC

Question

I am using asp.net MVC2. i am facing a problem in state management of javascript contents. i have got a image map in which on click on various part of image i am showing same page (redirect with parameters) with some parameter like : Secure/BodyWork?view=7 and on basis of value in parameter view i am showing various content on page. in that content i have got some checkboxes which i make checked and show it on left side in a div (checked one). the issue is when i click on another part of image (of image map) it rediect me to same page with different "view=?" value but i loos state of my current divs(which contains name of checked check box of previous page).

my inherites line is like this:

Inherits="System.Web.Mvc.ViewPage<List<WBAC.Models.BodyWorkModel>>"

controller contains:

  public ActionResult BodyWork(string view)
    {
 SecureModelService service = new SecureModelService();
        return View(service.ListBodyWork(view));
   }

      [HttpPost]
    public ActionResult BodyWork(BodyWorkModel model1)
    {
        //some code
    }

i have tried with hidden field so in which i placed names of current page's checkbox but of course those loses value when i click on image map because of redirection of page to current page.

i have also tried with using ajax.beginform but its also not working because we are redirecting the page (to same page with different parameters like: view=3/view = 4) on click of image map.

please suggest me what should i change and how to do it.

Thanks

code in target div:

<div class="damageAreaMid" id="dvdamageAreaMid">
                        <% foreach (var item in Model)
                           { %>
                        <div class="area">
                            <h2>
                                <%: item.Component %></h2>
                            <% Html.RenderPartial("~/Views/Shared/UCWorkArea.ascx", item.VehicleOption(item.ComponentID, item.Component));%>


                        </div>
                        <% } %>
                    </div>

Answer 1

You could use AJAX and refresh only the part of the page that needs to be refreshed.

public ActionResult BodyWork(string view)
{
    SecureModelService service = new SecureModelService();
    return View(service.ListBodyWork(view));
}

public ActionResult BodyWork(BodyWorkModel model)
{
    //some code
    return PartialView(model);
}

And in your view AJAXify the links on the image map:

$(function() {
    $('#somecontainer a').click(function() {
        $('#someresultcontainer').load(this.href);
        return false;
    });
});