c# - 使用 ASP.Net MVC 在单个 View 中管理多个查找

Question

我有一个应用程序，其中包含 50 个不同的查找/下拉菜单，管理员需要对其进行管理...并且它必须看起来像下面的初始图像。

我不确定这是否是执行此操作的好方法...但我的一般想法是为每个查找分配一个部分，并在用户单击“查找名称”(左侧)时动态呈现正确的部分。

我在努力避免...

• 创建 50 个不同的 Controller
• 创建 50 个不同的 Action
• 创建 50 个不同的 View

我的问题:

问:如何从单个 View 加载不同的部分？
问:这是解决这个问题的正确方法吗？
问:有更好的方法吗？

屏幕:
屏幕看起来像这样......

控制者:

public class LookupsController : Controller
{
    // GET: administration/lookups
    [HttpGet]
    [AllowAnonymous]
    public ActionResult Index()
    {
        // (1) Simply return the 1st LOOKUP's PARTIAL

        // How?
        return View();
    }

    // GET: administration/lookups/{name}
    [HttpGet]
    [AllowAnonymous]
    public ActionResult Index(string name)
    {
        // (1) If the NAME doesnt map to a LOOKUP PARTIAL = Exception

        // How?    
        return View();
    }
}

解决方案:
可能有更好的方法来做到这一点......但这是一般的想法

Answer 1

这是我在概念验证 (POC) 形式中所做的……并且它有效。我会等待将其标记为答案，以防有人想出更好的主意。

在我的特殊情况下，我不需要将 View 模型强类型化到查找的底层实体...因为我在之后调用 Web API渲染。但是，如果它对人们有帮助...我无论如何都会在这里显示 PartialModel 属性。

• 我按原样张贴以防有人需要
• 稍后我会更新 CSS

控制者:

public class LookupsController : Controller
{
    // GET: administration/lookups/{name}
    [HttpGet]
    [AllowAnonymous]
    public ActionResult Index(string name)
    {
        var viewModel = new LookupsIndexViewModel(name);

        return View("index", viewModel);
    }
}

View 模型:

public class LookupsIndexViewModel
{
    #region <Properties>

    private const string DEFAULT_PARTIAL_PATH = "~/Areas/Administration/Views/Lookups/Partials/ProductsPartial.cshtml";

    #endregion

    #region <Properties>

    public String PartialRelativePath { get; set; }
    public PartialViewModel PartialModel { get; set; }

    #endregion

    #region <Constructors>

    public LookupsIndexViewModel(string name)
    {
        Init(name);
    }

    #endregion

    #region <Methods>

    public void Init(string name)
    {
        PartialRelativePath = DEFAULT_PARTIAL_PATH;

        // TODO: Use a factory here
        if (!string.IsNullOrWhiteSpace(name))
            SetPartialProperties(name);
    }

    ///<note>You could certainly replace this functionality with a Factory object</note>
    private void SetPartialProperties(string name)
    {
        string root = "~/Areas/Administration/Views/Lookups/Partials/";

        switch (name.ToLower())
        {
            case "andsoon":
                PartialRelativePath = root + "AndSoOnPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;

            case "areas":
                PartialRelativePath = root + "AreasPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;

            case "locations":
                PartialRelativePath = root + "LocationsPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;

            case "products":
                PartialRelativePath = root + "ProductsPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;

            case "someotherthing":
                PartialRelativePath = root + "SomeOtherThingPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;

            case "storageyards":
                PartialRelativePath = root + "StorageYardsPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;

            case "yetanotherthing":
                PartialRelativePath = root + "YetAnotherThingPartial.cshtml";
                PartialModel = new PartialViewModel();
                break;
        }
    }

    #endregion
}

public class PartialViewModel
{
    // Your awesome Strongly Typed View Model stuff goes here
}

景观:

@using Web.Areas.Administration.ViewModels
@model LookupsIndexViewModel

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Lookups Administration</h1>
            <h2 id="subTitle"></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <!-- Sections Menu-->
            <ul class="nav nav-section-menu mb-4 py-3">
                <li>
                    @Html.ActionLink("Areas", "index", "lookups", new { area = "Administration", name = "areas" }, null)
                </li>
                <li>
                    @Html.ActionLink("Locations", "index", "lookups", new { area = "Administration", name = "locations" }, null)
                </li>
                <li>
                    @Html.ActionLink("Products", "index", "lookups", new { area = "Administration", name = "products" }, null)
                </li>
                <li>
                    @Html.ActionLink("Storage Yards", "index", "lookups", new { area = "Administration", name = "storageyards" }, null)
                </li>
                <li>
                    @Html.ActionLink("Some Other Thing", "index", "lookups", new { area = "Administration", name = "someotherthing" }, null)
                </li>
                <li>
                    @Html.ActionLink("Yet Another Thing", "index", "lookups", new { area = "Administration", name = "yetanotherthing" }, null)
                </li>
                <li>
                    @Html.ActionLink("And So On", "index", "lookups", new { area = "Administration", name = "andsoon" }, null)
                </li>
            </ul>
        </div>
        <div class="col-md-9">
            @Html.Partial(Model.PartialRelativePath, Model.PartialModel)
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            onReady();
        });
    </script>    
}

每个部分:

<div id="grid"></div>

<script type="text/javascript" defer>

    // RESEARCH:
    // https://stackoverflow.com/questions/7556400/injecting-content-into-specific-sections-from-a-partial-view-asp-net-mvc-3-with

    var onReady = function ()
    {
        $("#subTitle").text("And So On");

        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 20
            },
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                template: "<div class='customer-photo'" +
                "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                "<div class='customer-name'>#: ContactName #</div>",
                field: "ContactName",
                title: "Contact Name",
                width: 240
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
                width: 150
            }]
        });
    }
</script>