5

jQueryタブに表示するMVC4ビューをいくつか取得しようとしています。これが私のコードです：

<div id="tabs">
    <ul>
        <li><a href="#appone">App One</a></li>
        <li><a href="#apptwo">App Two</a></li>
    </ul>
    <div id="appone">
        @{ Html.RenderPartial("~/Views/AppOne/Index.cshtml"); }
    </div>
    <div id="apptwo">
        @{ Html.RenderPartial("~/Views/AppTwo/Index.cshtml"); }
    </div>
</div>

問題は、最初のタブのコンテンツは問題なく表示されますが、2 番目のタブは空です。部分的なビューがレンダリングされていないようです。

ページが読み込まれたときにすべてのタブのコンテンツを更新するよう jQuery タブに強制する方法、またはページの読み込み時に部分ビューを強制的にレンダリングする方法はありますか?

4

1 に答える 1

4

私が積極的に取り組んでいるコードは次のとおりです。

ログイン.cshtml

@{
    AjaxOptions optsLogin = new AjaxOptions { UpdateTargetId = "login-tab-login" };
    AjaxOptions optsRegister = new AjaxOptions { UpdateTargetId = "login-tab-register" };
}
<section id="login-tabs">
    <ul>
        <li><a href="#login-tab-login">Returning Customers</a></li>
        <li><a href="#login-tab-register">New Customers</a></li>
    </ul>
    @using (Ajax.BeginForm("Login", "Account", optsLogin, new { id = "form-login" }))
    {
        <div id="login-tab-login">
            @Html.Partial("Account/_Login")
        </div>
    }
    @using (Ajax.BeginForm("Register", "Account", optsRegister, new { id = "form-register" }))
    {
        <div id="login-tab-register">
            @Html.Partial("Account/_Register")
        </div>
    }
</section>
<script type="text/javascript">
    $(function() {
        $('#login-tabs').tabs();
    });
</script>

私の部分的なビューは、アカウント サブフォルダーの共有フォルダーにあります。さらに、各部分ビューには独自のモデルがあります。それ以外は、実装は特別なものではありません...

アップデート

2 つのタブに Ajax 呼び出しを実装するコードを追加しました。タブ セクションの上のコード ブロックは、2 つの要素のAjaxOptionsオブジェクトを保持します。<form>コントローラーは次のようにする必要があります。

AccountController.cs

public class AccountController : Controller
{
   ...
   [HttpGet]
   public ActionResult Login()
   {
       ...
       return View();
   }

   [HttpPost]
   public ActionResult Login(LoginModel model)
   {
       ...
       if (ModelState.IsValid)
           return RedirectToAction("Index", "Home")
       else
           return PartialView("/Account/_Login", model);
   }

   [HttpPost]
   public ActionResult Register(RegisterModel model)
   {
       ...
       if (ModelState.IsValid)
           return RedirectToAction("Index", "Home")
       else
           return PartialView("/Account/_Register", model);
   }
}

アクション メソッドは、およびビューLogin GETを含むページ全体をレンダリングします。私の部分ビューとは、エントリ フォームの HTML 要素を保持します。各部分ビューには、独自の送信ボタンがあります。_Layout.cshtml_ViewStart.cshtml_Login.cshtml_Register.cshtml

<input type="submit" value="<Whatever you want to display>" />

各部分ビュー呼び出しは独自のブロックに入れられ、それぞれに独自の属性using (Ajax.BeginForm(...))を与えているため、JavaScript コードを追加してイベントを乗っ取ることができます。どちらが押されたかに応じて、呼び出しで指定されたアクションとコントローラーに関連付けられたアクション メソッドが実行されます。私の場合、フォーム データが検証に合格すると、コントローラは自動的に にリダイレクトします。<form>idsubmitsubmitAjax.BeginForm(...)/Home/Index

ただし、検証が失敗した場合、アクション メソッドはレンダリングされたバージョンの部分ビューをブラウザに送り返し、 に関連付けられUpdateTargetIdたオブジェクトの プロパティで指定された要素に配置します。デフォルトはであるため、ビュー エンジンは古いバージョンの部分ビューを新しいバージョンに単純に置き換え、フォーム データと検証メッセージが含まれている場合はそれを完成させます。AjaxOptions<form>InsertionModeReplace

含まれていない唯一のコード関連項目は部分ビューです。これは、jQuery タブの機能に関する限り、実際には問題になりません。部分ビューに追加の JavaScript はありAccountControllerません。含めなかった追加のコードは、外部 Web API コンソール アプリケーションの呼び出しと承認 Cookie の設定に固有のものです。JavaScript をローカルでホストするのではなく、jQuery および jQuery UI の宣言に Google の CDN を使用しています。

やらなければならないことに頭を悩ませるには、しばらく時間がかかります。ただし、一度取得すると、取得したことになり、知識は譲渡できます。これはWebForms ではありません。

于 2013-04-17T01:12:45.880 に答える