2011-01-24 22 views
0

MVC 2のAjaxサポートでタブナビゲーションコントロールを作成しています:Ajax.BeginForm何らかの理由でSafariとFirefoxでうまく動作しますが、IE8でロードしたとき、ブラウザはAjaxメソッド(コントローラアクション)をページ全体にロードしました(つまり、非Ajaxの送信を行うように)。ASP.NET MVC 2 AjaxはIE8では動作しませんが、SafariとFirefoxで動作します

マークアップ:

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

ここでは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'); 
    $('#' + selectedTabId).addClass('currentTab'); 

    // suppress default link action 
    return false; 
} 

コントローラー:

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

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

答えて

1

だから、あなたはjQueryのを使用していて、まだで動作するものをAjax.*ヘルパーを持っています廃止されましたMSAjaxフレームワーク?私はしません。その後、

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

と::

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

をし、あなたのコントローラであなたはどのだろう各タブに対応するコントローラのアクションを持っているでしょうあなたはそんなに単純なコードを作る優れたjquery UI tabsを見てかかることがありますAJAXを使用してtabContent divに注入される部分HTMLを返します。

関連する問題