使用 MVC 从 URL 构建基于 Id 的布局视图模型

Question

我需要为我的 Layout 的 Web 应用程序构建一个 ViewModel，我已经尝试过 this solution，但它不是基于来自 URL 的 URL 的 Id 来生成 Layout 的 ViewModel。

我尝试了这个，但我首先遇到了不存在的空控制器错误，然后我尝试将 id 作为参数包含在内，但我收到错误“对象引用未设置为对象的实例”。因为没有设置 LayoutColorRGB。

public MobileController(int id)
{
    Event model = db.Events.Where(s => s.Id == id).FirstOrDefault();

    LayoutVM = new LayoutVM()
    {
        EventId = model.Id,
        LayoutColorRGB = model.LayoutColorRGB,
        SponsorLogoLink = model.SponsorLogoLink,
        SponsorLogoURL = model.SponsorLogoURL
    };

    ViewData["LayoutVM"] = LayoutVM;
}

Answer 1

有很多情况需要根据请求上下文提取数据并在布局页面上显示一些东西。例如：

• 您可能希望显示登录用户信息
• 您可能希望显示访问者或在线访问者的数量
• 您可能希望显示当前语言并让用户更改语言。
• 您可能希望从数据库加载站点菜单或侧边栏或页脚

为此，您可以考虑以下几点：

• 局部视图：您可以为每个局部视图具有特定模型的那些部分创建一些小的局部视图，并将它们呈现在布局页面中。

• 使用上下文获取数据：您可以通过从Request、ViewContext、RouteData、ValueProvider和其他上下文对象中提取信息来初始化模型。 p>

• 通过 HTML 助手访问数据：您可以创建 HtmlHelper 以从上下文中获取数据并在布局或部分视图中使用助手。

• 通过依赖注入访问数据：您可以定义一些服务来提取数据，然后将这些数据注入到布局页面。在服务中，您将使用上下文对象初始化模型。如果您使用的是 ASP.NET CORE，这是一个不错的选择。

• 作为基本控制器的属性访问数据：您可以在基本控制器中拥有一个属性，并在控制器的构造函数或OnActionExecuting 中对其进行初始化。然后在布局中，通过将ViewContext.Controller 转换为基本控制器的类型来获取属性并读取属性。

• ViewBag 访问数据：可以在基控制器的构造函数中或基控制器的OnActionExecuting 方法中初始化模型实例，然后放入ViewBag。然后就可以在view中轻松使用了。

• 布局页面：不要忘记您可以根据需要定义不同的布局页面并使用不同的布局。您可以在操作中或_ViewStart 中设置布局。

示例

尝试在每个请求中解析 id，这意味着您需要将 id 作为所有请求的一部分，或者您需要知道在没有 id 时应该做什么。考虑到这一事实并为一个最小的示例保持简单，我将定义以下模型和基本控制器，并尝试在基本控制器的 OnActionExecuting 方法中解析 id，然后将派生我所有需要这种行为的控制器基础控制器。

您可以使用ActionFilter 或控制器的OnActionExecuting 方法的全局操作过滤器来执行相同操作。

使用以下代码：

• 如果您浏览/home/index，您将在页面底部看到一个红色条。
• 如果您浏览/home/index/1，您将在页面底部看到一个蓝色条
• 如果您浏览/home/index/2，您会在页面底部看到一个绿色条

布局模型

public class LayoutViewModel
{
    public int? Id { get; set; }
    public string Color { get; set; }
}

基本控制器

public class BaseControllr : Controller
{
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        //Get the id from route
        var id = int.TryParse(ValueProvider.GetValue("id")?.AttemptedValue, out var temp)
            ? temp : default(int?);
        var model = new LayoutViewModel();

        //Your logic to initialize the model, for example
        model.Id = id;
        if (model.Id == null)
            model.Color = "FF0000";
         else if (model.Id%2==0)
            model.Color = "00FF00";
        else
            model.Color = "0000FF";

        //Set ViewBag
        ViewBag.MainLayoutViewModel = model;
        base.OnActionExecuting(filterContext);
    }
}

家庭控制器

public class HomeController : BaseControllr
{
    public ActionResult Index(int? id)
    {
        return View();
    }
} 

_Layout.cshtml

然后在_Layout.cshtml中，在关闭<body/>标签之前添加如下代码进行测试：

@{ 
    string color = ViewBag.MainLayoutViewModel?.Color;
    int? id = ViewBag.MainLayoutViewModel?.Id;
}
<div style="background-color:#@color;">
    Id:@id
</div>

Answer 2

您应该为布局的每个属性设置一个默认值。然后，如果您的模型没有某些属性，您可以从默认布局中使用它。

internal static readonly LayoutVM defaultLayout = new LayoutVM()
{
    EventId = 0,
    LayoutColorRGB = "#FFFFFF",
    SponsorLogoLink = "AnyLink",
    SponsorLogoURL = "AnyImageUrl"
};

public MobileController(int id)
{

    Event model = db.Events.Where(s => s.Id == id).FirstOrDefault();

    if (model == null)
    {
        ViewData["LayoutVM"] = defaultLayout;
        return;
    }

    LayoutVM = new LayoutVM()
    {
        EventId = model.Id,
        LayoutColorRGB = model.LayoutColorRGB ?? defaultLayout.LayoutColorRGB,
        SponsorLogoLink = model.SponsorLogoLink ?? defaultLayout.SponsorLogoLink,
        SponsorLogoURL = model.SponsorLogoURL ?? defaultLayout.SponsorLogoURL
    };

    ViewData["LayoutVM"] = LayoutVM;
}