Question

我有一个应用程序有50个不同的查找/下拉列表，管理员需要管理它...它必须看起来像下面的初始图像。

我不确定这是否是一个很好的方法...但我的一般想法是每个查找和一个部分。当用户点击查找名称（左侧）时，动态呈现正确的部分。

我想避免......

创建50个不同的控制器
创建50个不同的操作
创建50个不同的视图

我的问题：

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

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

控制器：

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）表格中所做的......而且它有效。我将等待将此标记为答案，以防有人提出更好的想法。

在我的特定情况下，我不需要将视图模型强类型添加到查找的基础实体 ...就像我一样我在渲染后调用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);
    }
}

观看模式：

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>

使用ASP.Net MVC在单个视图中管理多个查找

1 个答案: