c# - エリア固定サイドバー MVC 3

Question

Web アプリケーションに領域があります。このエリアにはいくつかのコントローラーがあります。領域へのエントリを処理する 1 つのコントローラーがあります (つまり、すべてがこのコントローラーを通過して、領域内の他のコントローラーにアクセスします)。このコントローラーでは、ID をアクションに渡す必要があります。

    public ActionResult Index(Guid appID)
    {
        var vm = new DeviceManagementViewModel
        {
            SelectedApp = appID,
            App = _repository.AUTs.FirstOrDefault(x => x.ID.Equals(appID)),
            Devices = GetDevices()
        };

        return View(vm);
    }

作成されたビューは、別の ID でポストバックされます。これで、取得された 2 つの ID がエリア全体に保持されます。

各コントローラーの各作成、編集、および詳細アクションでは、正しいデータを表示できるように、これら 2 つの ID を渡す必要があります。次に例を示します。

    public ActionResult Create(Guid appID, Guid deviceID)
    {
        var vm = new InputViewModel
        {
            Device = deviceID,
            Application = appID
        };

        return View(vm);
    }

各 Detail および Create アクションへのクイックリンクがあり、関連する ID が記入されたサイドバーがあれば素晴らしいと思います。

@Html.ActionLink("Create Input Methods", "Create", "Input", new { appID = <-- ID ONE -->, deviceID = <-- ID TWO --> }, null)

また、このサイドバーを領域全体に保持するとさらに効果的で、各コントローラーをすばやく切り替えることができます。私はこのブログを読んだことがありますが、それがどのように機能するのか疑問に思っています。実際にもっと簡単な方法があれば。

簡単に要約すると、この特定の領域に入ったときに動的に更新できるサイドバーが必要です (1 つのポイントからしか入ることができません)。また、その領域のすべてのビューで持続します。

ありがとう、

- - - 編集 - - - -

わかりました、これを少し進めるのを手伝ってください。これらの 2 つの ID パラメーターを次の場所に渡すアクションがあることを期待しています。

public ActionResult Menu(Guid appID, Guid deviceID)
{
    var vm = MenuViewModel
    {
        DeviceID = deviceID,
        ApplicationID = appID
    };

    return PartialView(vm);
}

これには、次のような ViewModel があります。

public class MenuViewModel
{
    public Guid ApplicationID {get; set;}
    public Guid DeviceID {get; set;}
}

部分的なビューは次のようになります。

<aside id="dashboard_menu">
<div id="extras">
    <div class="oi">
        <h2 class="screenreader-only">Menu</h2>

        <div class="rollup section">
            <h3 class="rollup-trigger">Input Methods</h3> 
            <p>View or Add more Input Methods</p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Input", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Input", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        </div>
        <div class="rollup section">
            <h3 class="rollup-trigger">Launch &amp; Exit</h3> 
            <p>View or Add more Launch &amp; Exit</p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Launch", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Launch", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        </div>
        <div class="rollup section">
            <h3 class="rollup-trigger">Performance</h3> 
            <p>View or Add more Performance</p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Performance", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Performance", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        </div>
        <div class="rollup section">
            <h3 class="rollup-trigger">Power Consumption</h3> 
            <p>View or Add more Power Consumption</p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Power", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Power", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        </div>
        <div class="rollup section">
            <h3 class="rollup-trigger">Qualitative Validation</h3> 
            <p>View or Add more Qualitative Validation</p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Qual", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
            <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Qual", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        </div>

    </div>
</div>

では、これを永続化するにはどうすればよいでしょうか? 領域の _Layout.cshtml で使用しますか? もしそうならどのように？

もしそうなら、私はそれをすべてのビューページで使用しますか?

私が混乱しているのは、これらの ID パラメータを部分ビューに渡す方法と、部分ビューがどこから読み込まれるかだけですか?

score 1 · Accepted Answer

ビューごとに異なるサイドバーアクションを指定できるようにする必要がある場合、このソリューションは素晴らしいものです。ただし、領域固有のサイドバーが必要な場合は、各ビューに不要なオーバーヘッドと重複が追加され、何かが変更された場合にソリューションの管理が難しくなる可能性があります.

これを回避するにはBaseController、サイドバーアクションを指定する for each Area を作成してみてください。次に、ビューの現在の領域を特定し、これを使用して正しいアクションを呼び出すことができますRenderAction

public class SomeAreaBaseController : Controller
{
    public SomeAreaBaseController()
    {
        ViewBag.HasSidebar = true;
        ViewBag.Application = ...;
        ViewBag.Device = ...;
    }
    public ActionResult Menu(Guid appID, Guid deviceID)
    {
        ...
    }
}

次に、この領域の他のコントローラーでこれから継承します。

public class SomeController : SomeAreaBaseController

そして、Layout.cshtml...

@if (ViewBag.HasSidebar) {
    @Html.RenderAction("Menu", ViewContext.RouteData.Values["controller"], 
        new { appID = ViewBag.Application, deviceID = ViewBag.Device })
}

score 0 · Accepted Answer

したがって、答えはこのブログの助けを借りてです:

残念ながら、これはビューページごとの回答です。

レイアウトページでセクションを定義します。

@if (IsSectionDefined("SideBar"))
{
    @RenderSection("SideBar")
}
else
{
    <div id="extras">
        <div class="oi">
            <h2 class="screenreader-only">Menu</h2>

            <div class="rollup section">
                <h3 class="rollup-trigger">Application Validation</h3> 
                <p>Goto all Applications</p>
                <p class="more"><a href="#">&raquo; @Html.ActionLink("All Applications", "Index", "Application", new { area = "Validation" }, null)</a></p>
            </div>
        </div>
    </div>   
}

次に、ビューを含む各ページに (このレイアウトページを最初に作成した場合、ビューは自動的にサイドバーセクションに配置され、入力するだけで済みます)、次のように入力します。

@section SideBar {
    @{Html.RenderAction("Menu", "DeviceManagement", new { appID = Model.Application, deviceID = Model.Device })}
}

メニューの部分ビュー内には、次のようになります。

<div id="extras">
<div class="oi">
    <h2 class="screenreader-only">Menu</h2>

    <div class="rollup section">
        <h3 class="rollup-trigger">Input Methods</h3> 
        <p>View or Add more Input Methods</p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Input", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Input", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
    </div>
    <div class="rollup section">
        <h3 class="rollup-trigger">Launch &amp; Exit</h3> 
        <p>View or Add more Launch &amp; Exit</p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Launch", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Launch", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
    </div>
    <div class="rollup section">
        <h3 class="rollup-trigger">Performance</h3> 
        <p>View or Add more Performance</p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Performance", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Performance", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
    </div>
    <div class="rollup section">
        <h3 class="rollup-trigger">Power Consumption</h3> 
        <p>View or Add more Power Consumption</p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Power", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Power", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
    </div>
    <div class="rollup section">
        <h3 class="rollup-trigger">Qualitative Validation</h3> 
        <p>View or Add more Qualitative Validation</p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("View", "Index", "Qual", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
        <p class="more"><a href="#">&raquo; @Html.ActionLink("Add", "Create", "Qual", new { appID = Model.ApplicationID, deviceID = Model.DeviceID}, null)</a></p>
    </div>

</div>

メニューアクションは問題のようになります。

終わり。答えが残されていなかった後、それは私が予想したよりもエレガントです. しかし、私が必要とするものです。

c# - エリア固定サイドバー MVC 3

2 に答える 2

Related

Reference