Question

Im new to Web Development and its principles so apologies if my question does not seem clear.

Story So Far……

Im writing an Open Source application to learn ASP.NET MVC3. Now im at the stage where im creating my CRUD controller to allow me to create some new Types. Now I have created a SiteAdmin Controller which holds my Dashboard, with has a View. The View will contain tabs . I have been learning how to handle tabs using the following blog post and JQuery UI

http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/

I have decided to use the AJAX example to handle my tabs, whereby I pass an index parameter to a Controller Action Method called AjaxGetTab . This method (as per the blog post) returns a Partial View for the required Type. Within the Partial View there are Create Controller Action Method’s, for e.g. CreateTransactionType (HttpPost), which create new records.

“Stop the waffling what is the problem”

The problem is that my list within the tab on the view doesn’t refresh after the Create method is finished. This problem only exists in IE9 (Only IE i have tested) but Chrome and Firefox work, i.e. the list refreshes.

I have checked the Database records exists.

My code is here:

JQuery in Dashboard.cshtml:

<script type="text/javascript">
    $(document).ready(function() {
        $("#tabs").tabs();
        getContentTab (1);
    });

    function getContentTab(index) {
        var url='@Url.Content("~/SiteAdmin/AjaxGetTab")/' + index;
        var targetDiv = "#tabs-" + index;
        var ajaxLoading = "<img id='ajax-loader' src='@Url.Content("~/Content")/ajax-loader.gif' align='left' height='28' width='28'>";

        $(targetDiv).html("<p>" + ajaxLoading + " Loading...</p>"); 

        $.get(url,null, function(result) {
            $(targetDiv).html(result);
        });
    }

SiteAdminController AjaxGetTab Method:

    /// <summary>
    /// AJAX action method to obtain the correct Tab to use.
    /// </summary>
    /// <param name="index">Tab number</param>
    /// <returns>Partial View</returns>
    public ActionResult AjaxGetTab(int id)
    {
        string partialViewName = string.Empty;
        object model = null;

        //--Decide which view and model to pass back.
        switch (id)
        {
            case 1:
                partialViewName = "_TransactionType";
                model = db.TransactionTypes.ToList();
                break;
            case 2:
                partialViewName = "_DirectionType";
                model = db.DirectionTypes.ToList();
                break;
            case 3:
                partialViewName = "_UserType";
                model = db.UserTypes.ToList();
                break;
            case 4:
                partialViewName = "_CurrencyType";
                model = db.CurrencyTypes.ToList();
                break;
            case 5:
                partialViewName = "_tabError";
                break;

        }

        return PartialView(partialViewName,model);
    }
}

SiteAdminController CreateTransactionType Method:

        [HttpPost]
    public ActionResult CreateTransactionType(TransactionType model)
    {
        try
        {
            // TODO: Add insert logic here
            if (ModelState.IsValid)
            {
                model.id = Guid.NewGuid();
                model.RecordStatus = " ";
                model.CreatedDate = DateTime.Now;
                db.TransactionTypes.AddObject(model);
                db.SaveChanges();

            }
            return RedirectToAction("Dashboard");
        }
        catch
        {
            return PartialView("_tabError");
        }
    }

Answer 1

Replace your

$.get(url,null, function(result) {
     $(targetDiv).html(result);
});

By:

$.ajax({
  type: 'get',
  url: url,
  cache: false,
  success: function(result) {
    $(targetDiv).html(result);
  }
});

The problem is that IE caches ajax requests, so by setting cache: false in the settings it should work.