Jquery 在Razor模板（cshtml）中初始化javascript变量并在运行时更改样式-这是一种糟糕的做法吗？_Jquery_Html_Asp.net Mvc_Razor

Jquery 在Razor模板（cshtml）中初始化javascript变量并在运行时更改样式-这是一种糟糕的做法吗？

jquery html asp.net-mvc razor

Jquery 在Razor模板（cshtml）中初始化javascript变量并在运行时更改样式-这是一种糟糕的做法吗？,jquery,html,asp.net-mvc,razor,Jquery,Html,Asp.net Mvc,Razor,注意：以下代码只是一个5分钟的想法，用作起点，而不是最终解决方案最近，我提出了一个想法，通过从web.config获取URL作为背景来更改元素的CSS（CSS类myclass应用于一些需要此功能的div） var bgUrl='@System.Configuration.ConfigurationManager.AppSettings[“BackgroundUrl”]； $（文档）.ready（函数（）{ $（'.myclass'）.css（'background-image'，'url（'

注意：以下代码只是一个5分钟的想法，用作起点，而不是最终解决方案

最近，我提出了一个想法，通过从web.config获取URL作为背景来更改元素的CSS（CSS类myclass应用于一些需要此功能的div）


var bgUrl='@System.Configuration.ConfigurationManager.AppSettings[“BackgroundUrl”]；
$（文档）.ready（函数（）{
$（'.myclass'）.css（'background-image'，'url（'+bgUrl+'））；
});

这是非常线框的解决方案，代码可以移动到单独的文件，使用“数据-”属性存储图像名称等

但团队中的另一位开发人员表示，这是一种不好的做法，因为：

它允许在客户端脚本中使用服务器元素

它旨在用于在线脚本编写/样式设置，这是一种糟糕的做法

在线脚本可以在最终解决方案中处理，但其他问题让我担心

提前谢谢

Vijay

通常建议避免使用内联样式。这并不是说应该不惜一切代价避免它们。查看任何JS UI库控件。它们都有一定程度的内联样式

我面临的更大的设计问题是，为什么应用程序设置中会存储背景图像文件名？您现在必须手动保持两个独立工件的同步

了解大图将为您提供首选解决方案的上下文。

通常建议避免使用内联样式。这并不是说应该不惜一切代价避免它们。查看任何JS UI库控件。它们都有一定程度的内联样式

我面临的更大的设计问题是，为什么应用程序设置中会存储背景图像文件名？您现在必须手动保持两个独立工件的同步

了解大局将为您提供首选解决方案的背景。

我个人更喜欢在razor视图中保留较少的服务器端代码。我个人的观点是，视图应该纯粹用于标记（在新版本的MVC（MVC6）中，我们有标记帮助程序，它比Html帮助程序方法更为HTMLish）。只在视图中添加绝对必要的razor/C#代码

使用当前的方法，如果明天您想切换页面中另一个元素的背景图像，该怎么办？是否要添加另一个C#语句/行以再次从配置中读取并使用该语句/行？这看起来不太好

将样式保存在css文件中是个好主意。既然你想切换它，你应该考虑支持某种主题。您可以在配置中保留一个条目，以确定使用哪个主题/css文件

这里有一个非常简单（可以改进）的解决方案

为

~/Contents

过滤器中所需的每个主题创建css文件

ThemeGreen.css文件

themerd.css文件

您可以编写一个动作过滤器，让当前主题使用它来构建您想要使用的css文件的正确名称/路径

public class MyThemePicker : ActionFilterAttribute
{
    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        var themeCssName = ConfigurationManager.AppSettings["Theme"] as string;
        var vb = filterContext.Controller.ViewBag;
        vb.ThemeCssName = themeCssName;
        base.OnActionExecuted(filterContext);
    }
}

假设您有一个名为Theme的AppSettings条目

<appSettings>   
    <add key="Theme" value="GreenSite"/>
</appSettings>

现在在布局中，您将加载当前主题的css文件

<head>
  <link href="~/Content/@(ViewBag.ThemeCssName).css" rel="stylesheet" />
</head>
<body>
  <div class="myclass">Some div with themed css</div>
  @RenderBody()
</body>


一些带有主题css的div
@RenderBody（）

如果需要，您可以创建多个主题文件夹并使用它。在这种情况下，在构建css路径时，您将获得目录名，而不是文件名。

将样式保存在css文件中是个好主意。既然你想切换它，你应该考虑支持某种主题。您可以在配置中保留一个条目，以确定使用哪个主题/css文件

这里有一个非常简单（可以改进）的解决方案

为

~/Contents

过滤器中所需的每个主题创建css文件

ThemeGreen.css文件

themerd.css文件

您可以编写一个动作过滤器，让当前主题使用它来构建您想要使用的css文件的正确名称/路径

public class MyThemePicker : ActionFilterAttribute
{
    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        var themeCssName = ConfigurationManager.AppSettings["Theme"] as string;
        var vb = filterContext.Controller.ViewBag;
        vb.ThemeCssName = themeCssName;
        base.OnActionExecuted(filterContext);
    }
}

假设您有一个名为Theme的AppSettings条目

<appSettings>   
    <add key="Theme" value="GreenSite"/>
</appSettings>

现在在布局中，您将加载当前主题的css文件

<head>
  <link href="~/Content/@(ViewBag.ThemeCssName).css" rel="stylesheet" />
</head>
<body>
  <div class="myclass">Some div with themed css</div>
  @RenderBody()
</body>


一些带有主题css的div
@RenderBody（）

如果需要，您可以创建多个主题文件夹并使用它。在这种情况下，不是文件名，构建css路径时，您将获得目录名。

您可以使用ViewBag或类似的东西……您使用的是C#还是VB？C#。div的其他样式必须来自css，背景图像URL除外。请在返回视图的方法上尝试：

ViewBag.MyBackPic=ConfigurationManager.AppSettings[“BackgroundUrl”].ToString（）；

在您的视图中：

var bgUrl='@ViewBag.MyBackPic'；

如何更改样式（设置背景图像URL）？是否可以接受？谢谢。如果是在AppSettings中，则更改图像的路径更容易，只需在web上更改值即可。Config您可以使用ViewBag或类似的东西…您使用的是C#还是VB？C#。div的其他样式必须来自CSS，背景图像URL除外。请尝试以下方法：t返回您的视图：

ViewBag.MyBackPic=ConfigurationManager.AppSettings[“BackgroundUrl”].ToS
<head>
  <link href="~/Content/@(ViewBag.ThemeCssName).css" rel="stylesheet" />
</head>
<body>
  <div class="myclass">Some div with themed css</div>
  @RenderBody()
</body>