MVC 3 show hide jquery UIタブの部分ビュー

Question

このアプリケーションでは、タブを使用して連絡先の情報を表示しています。このタブでは、ユーザーは表示連絡先と作成された連絡先を切り替えることができます。ユーザーが「作成」をクリックすると、部分的なビューが同じタブ内のCreateContactに変更されます。 jqueryのUIタブで部分ビューを非表示にする最良の方法は何ですか？これを行うにはAjaxコードを使用すべきですか？

ビュー

<div id="tabs"> 
<ul> 
    <li><a href="/Home/GetClaim">Claim</a></li> 
    <li><a href="/Home/GetProduct">Products</a></li> 
    <li><a href="/Home/GetContact">Contact Us</a></li> 
</ul> 
</div> 

コントローラ

public ActionResult GetContact() 
{ 
    return PartialView(); 
} 

public ActionResult CreateContact() 
{ 
    return PartialView(); 
} 

部分図

<li>@Html.ActionLink("Create", "Test", "Home")</li> 

おかげ

Answer 1

はい、あなたはAJAXを使用することができます。これは、すべての部分ビューを一度にロードしたくない場合です。

それは問題ではない場合は、あなただけ一度にレンダリングすることができます

<div id="tabs-1"> 
    @Html.Partial("GetClaim") 
</div> 
<div id="tabs-2"> 
    @Html.Partial("GetProduct") 
</div> 
<div id="tabs-3"> 
    @Html.Partial("GetClaim") 
</div> 

をjQueryのは、現在表示されていない要素を隠し、自動的に切り替えを管理します。

Answer 2

あなたはAjax.ActionLink（）を使用することができます - これは、非同期的にあなたのコントローラメソッドにフォームを提出するhttp://msdn.microsoft.com/en-us/library/dd493106.aspx

を。 AjaxOptions.InsertionModeをAjaxOptions.InsertionMode.Replaceに設定すると、コントローラから返された内容で部分ビューの内容が置き換えられます。次に、あなただけの以下のように、creatcontactsのコントローラのアクションで表示GetContactsを返す必要があります。

[HttpGet] 
public ActionResult GetContact() 
{ 
    return PartialView(RetrieveListOfContacts()); 
} 

[HttpPost] 
public ActionResult CreateContact(StronglyTypedContactModel contact) 
{ 
    if (ModelState.IsValid) 
    { 
     // .. write your contact here 
     return PartialView("GetContact", RetrieveListOfContacts()); 
    } 
    else 
    { 
     return PartialView(contact); 
    } 
} 

EDIT

また、あなたはそれがAjaxOptionsのHTTPMETHODでGET要求であることを指定することができますフォームを必要としないように（私が元々あなたがやったと仮定したように）。