1

Stack Overflowのユーザーページのようなレイアウトを作成します。ページの上部にビュー（親ビュー）があり、タブにコンテンツがあり、それぞれに独自のビュー（子ビュー）があります。

SOの[ユーザー]ページの各タブにカーソルを合わせると、それらがユーザーコントローラーを指しており、適切なタブコンテンツをレンダリングするためにクエリ文字列でタブ名が送信されているように見えます。

親ビューでセクションが定義されたレイアウトを使用して、これを実現できると思います。セクションは子ビューになりますが、どのビューまたは部分ビューを表示するかをセクションに指示する方法がわかりません。

私はウェブ上で有用なものを見つけることができませんでした。誰かがこれを行う方法を教えてもらえますか、少なくとも私を正しい方向に向けることができますか？

前もって感謝します！

編集： @Mystereの助けのおかげで、他の誰かが同じことをしようとしている場合に備えて、以下の解決策を思いつくことができました。

HTH

最終的解決：

コントローラのアクション

public ActionResult Details(int id, string tab = null)
{   
    ViewBag.Jobid = id;
    ViewBag.Tab = tab ?? "Services";

    var viewModel = getJobRecordDetails(id);

    return View(viewModel);
}

public ActionResult JobInfo(int id, string tab)
{
    ViewBag.Jobid = id;
    ViewBag.Tab = tab;

    if (tab == "Services")
    {
        var viewModel = getServices(id);
        return View("Services", viewModel);   
    }

    if (tab == "Equipment")
    {
        var viewModel = getEquipment(id);
        return View("Equipment", viewModel);
    }

    if (tab == "Personnel")
    {
        var viewModel = getPersonnel(id);
        return View("Personnel", viewModel);
    }

    return View("Error");
}

親ビュー

@model MyApplication.Models.JobViewModel

@{
    ViewBag.Title = "Details";
}
<h2>Job Details</h2>

...
@* Child View Action *@
@Html.Action("JobInfo", new { id = ViewBag.Jobid, tab = ViewBag.Tab })

チャイルドビュー

@model MyApplication.Models.ServicesViewModel[]

@{
    ViewBag.Title = "Services";
    Layout = null;
}

@* Submenu Navigation *@
@{
    Html.RenderPartial("SubMenu");
}

<h2>Services</h2>

Services here...

サブナビゲーション部分ビュー

<div id="submenucontainer">
<ul id="submenu">
    <li class="@Html.ActiveTab("Job","JobInfo","Services")"><a href="@Url.Action("Details", "Job", new { id = @ViewBag.Jobid, tab = "Services" })">Services</a> </li>
    <li class="@Html.ActiveTab("Job","JobInfo","Equipment")"><a href="@Url.Action("Details", "Job", new { id = @ViewBag.Jobid, tab = "Equipment" })">Equipment</a></li>
    <li class="@Html.ActiveTab("Job","JobInfo","Personnel")"><a href="@Url.Action("Details", "Job", new { id = @ViewBag.Jobid, tab = "Personnel" })">Personnel</a></li>
</ul>

ActiveTabヘルパー

public static string ActiveTab(this HtmlHelper helper, string controller, string action, string tab)
{
    var classValue = "";

    var currentController =
            helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();

    var currentAction =
            helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

    var currentTab = helper.ViewContext.Controller.ValueProvider.GetValue("tab").RawValue.ToString();

    if (currentController == controller && currentAction == action && currentTab == tab)
        classValue = "selected";

    return classValue;
}
4

1 に答える 1

0

彼らがそのためのセクションを使用している可能性は低いです。セクションは、主にレイアウトページ（マスターページに相当）で使用されます。

多くの場合、それらには複数のビューがあり、View（）メソッドに適切なビューを渡します。部分的なビューまたはMVCテンプレートを使用してタブ領域をレンダリングし、一般的なコードを除外する場合があります。

編集：

要求に応じて、コードサンプル：

アクションメソッド：

public ActionResult Dashboard(string tab) {
    if (tab == "summary") 
        ViewBag.Tab = "~/Views/Dashboard/Summary.cshtml";
    if (tab == "activity")
        ViewBag.Tab = "~/Views/Dashboard/Activity.cshtml";

    return View()
}

Dashboard.cshmtlで

... your parent view

@Html.Partial(ViewBag.Tab)

... your footer

ロケット科学ではありません。これを行うには非常に多くの方法があり、そのうちの1つを思い付くのにそれほど多くの考えは必要ありません。

于 2012-04-29T01:04:24.490 に答える