Html 需要使用参数设置div的背景_Html_Css_Asp.net_Asp.net Core Mvc

Html 需要使用参数设置div的背景

html css asp.net asp.net-core-mvc

Html 需要使用参数设置div的背景,html,css,asp.net,asp.net-core-mvc,Html,Css,Asp.net,Asp.net Core Mvc,我目前正试图根据用户是否选择了背景来设置我的div的背景，我可以在一定程度上成功地做到这一点。但是，我不能通过CSS设置div的背景，因为我不能在CSS中连接字符串，这意味着我可以执行以下操作： background: url("/uploads/Example.png") !important; 但我做不到 background: url("/uploads/@Model.Banner") 或我当前的代码如下所示 <head> @if ("/uploads/

我目前正试图根据用户是否选择了背景来设置我的div的背景，我可以在一定程度上成功地做到这一点。但是，我不能通过CSS设置div的背景，因为我不能在CSS中连接字符串，这意味着我可以执行以下操作：

background: url("/uploads/Example.png") !important;

但我做不到

background: url("/uploads/@Model.Banner")

或

我当前的代码如下所示

<head>
        @if ("/uploads/" + @Model.Banner != "/uploads/")
        {
        <style>
            :root {
                --url: url("/uploads/@Model.Banner");
}
            .profile-header {
            height: 200px;
            background: var(--url) !important;
                background-size: 100%;
                -webkit-border-radius: 10px !important;
                -moz-border-radius: 10px !important;
                border-radius: 10px !important;
            }
        </style>
        }
        </head>

<div id="main">
    <label class="navigation-bar"><a>Home</a> - <a>Users</a> - <b>Profile</b></label>
    <hr />

    <div class="container profile-header"></div>


@如果（“/uploads/”+@Model.Banner！=”/uploads/”）
{
：根{
--url:url（“/uploads/@Model.Banner”）；
}
.个人资料标题{
高度：200px；
背景：var（--url）！重要；
背景大小：100%；
-webkit边界半径：10px！重要；
-moz边界半径：10px！重要；
边界半径：10px！重要；
}
}
主页-用户-配置文件

.profile头存在于另一个带有默认横幅的.css文件中，这意味着如果存在横幅，代码中的css将用于动态更改它

我想问的是如何将div的背景设置为路径+标题名，当前代码不起作用，因为它在输入IF语句时没有设置div的背景。

谢谢大家!

如果将用户的

Banner

值添加到相应视图的

模型中，我假设您将知道该用户在控制器操作中是否具有该值。例如：
public IActionResult Index()
{
    YourModel model = new YourModel();

    ...

    // you could supply a default image or just leave as "url(/uploads/)"
    model.BannerUrl = string.IsNullOrEmpty(model.Banner) ? "url(/uploads/Default.png)" : $"url(/uploads/{model.Banner})";

    return View(model);
}

然后在视图中：
<head>
@if (!@Model.Banner.Contains("Default.png"))
{
    <style>
        :root {
            --url: @Model.BannerUrl;
         }
        .profile-header {
        height: 200px;
        background: var(--url) !important;
            background-size: 100%;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            border-radius: 10px !important;
        }
    </style>
}
</head>

<div id="main">
    <label class="navigation-bar"><a>Home</a> - <a>Users</a> - <b>Profile</b></label>
    <hr />

<div class="profile-header"></div>


@如果（！@Model.Banner.Contains（“Default.png”））
{
：根{
--url:@Model.BannerUrl；
}
.个人资料标题{
高度：200px；
背景：var（--url）！重要；
背景大小：100%；
-webkit边界半径：10px！重要；
-moz边界半径：10px！重要；
边界半径：10px！重要；
}
}
主页-用户-配置文件


或者您可以将其全部添加到内联（只使用了两种样式，这样您就有了想法）：


编辑：
忘了说可以在如下视图中工作，但想给出替代选项
@{
    var url = $"/uploads/" + @Model.Banner;
}

<div style="background: url(@url) !important"></div>

@{
var url=$”/uploads/“+@Model.Banner；
}
太棒了，这是正确的答案。非常感谢你！
<div style="background:@Model.BannerUrl !important; height: 200px; background-size: 100%"></div>

@{
    var url = $"/uploads/" + @Model.Banner;
}

<div style="background: url(@url) !important"></div>