ASP.NET MVC 2 Ajax does not work in IE8, but works in Safari and Firefox

I'm making a tab navigation control with MVC 2's Ajax support: Ajax.BeginForm. For some reason, it works in Safari and Firefox fine, but when I loaded it in IE8, the browser loaded the return of the Ajax method (a controller action) into the whole page (i.e. like doing a non-ajax submission).

Mark-ups:

<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "tabContent"})) { %>
<ul id="tabnav">
    <li id="TabOne"><a href="#" onclick="updateTab(event)">Tab 1</a></li>
    <li id="TabTwo"><a href="#" onclick="updateTab(event)">Tab 2</a></li>
    <li id="TabThree"><a href="#" onclick="updateTab(event)">Tab 3</a></li>
    <%: Html.Hidden("tabId") %>
</ul>
<% } %>
<div id="tabContent"></div>

Here's the JavaScript:

function updateTab(evt) {
    var $target = $(evt.target);
    var selectedTabId = $target.parent().attr('id');

    $('#tabId').val(selectedTabId);

    // submit the form AJAXly
    $target.closest('form').submit();

    // hide the current content
    $('#tabContent').empty();

    // update the selected tab
    $('#tabnav li').removeClass('currentTab');
    $('#' + selectedTa开发者_开发技巧bId).addClass('currentTab');

    // suppress default link action
    return false;
}

Controller:

    [HttpPost]
    public ActionResult Index(string tabId)
    {
        ViewData["tabId"] = tabId;

        // redirect to the selected tab
        return RedirectToAction("Index", tabId);
    }

So you are using jQuery and still have those Ajax.* helpers that work with the obsolete MSAjax framework? I wouldn't. You might take a look at the excellent jquery UI tabs which will make your code so much simpler:

<ul id="tabnav">
    <li id="TabOne"><%= Html.ActionLink("Tab 1", "Tab1") %></li>
    <li id="TabTwo"><%= Html.ActionLink("Tab 2", "Tab2") %></li>
    <li id="TabThree"><%= Html.ActionLink("Tab 3", "Tab3") %></li>
</ul>
<div id="tabContent"></div>

and then:

$(function() {
    $('#tabnav').tabs({
        load: function(event, ui) {
            $('a', ui.panel).click(function() {
                $('#tabContent').load(this.href);
                return false;
            });
        }
    });
});

and in your controller you would have controller actions corresponding to each tab which would return the partial HTML which will be injected into the tabContent div using AJAX.