如何在控制器中更改div的类/样式?我试过使用runat，但它不起作用。下面是一个例子
<div id="MainDiv" class="flex justify-between items-center">
<a>Done</a>
</div>
在满足一定条件的情况下，如何将bg-red-300类添加到MainDiv中，而不添加bg-green-300类?
第一种方法，您可以像下面这样判断客户端的数据:
@model Test
<div id="MainDiv" class="flex justify-between items-center @(Model.IsDone=="Yes"?"bg-red-300":"bg-green-300")">
控制器:
public IActionResult Index()
{
var model = new Test()
{
IsDone=="Yes"
};
return View(model);
}
第二种方法，您可以使用ViewData在服务器端存储类和判断:
Index.cshtml:
@{
var styleClass = ViewData["Style"];
}
<div id="MainDiv" class="flex justify-between items-center @styleClass">
<a>Done</a>
</div>
控制器:
public IActionResult Index()
{
if(YourCondition)
{
ViewData["Style"] = "bg-red-300";
}
else
{
ViewData["Style"] = "bg-green-300";
}
return View();
}
我将假设你有一个模型支持你的视图，用一些布尔类型的c#属性来定义这个字段是否有效，让我们称之为Valid。通常这样的验证是基于一些更复杂的逻辑，所以我假设你有这样的东西。
你可以编辑内联样式，或者替换整个HTML视图块，这取决于你需要基于这个模型值改变多少视图。
这两种方法都附有示例，供您最终使用。我看到你在用顺风样式，所以我就复制了这个样式。
using System;
namespace ExampleApp
{
public class SampleViewModel
{
public bool Valid { get; set; }
}
}
示例控制器:
using System;
using System.Web.Mvc;
namespace ExampleApp
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
var model = new SampleViewModel();
model.Valid = false;
return View(model);
}
}
}
和示例视图:
@model ExampleApp.SampleViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Css based on Model</title>
<style type="text/css">
.bg-red-300 {
background-color: #feb2b2;
}
</style>
</head>
<body>
<div id="MainDiv" class="flex justify-between items-center">
<span>Done</span>
</div>
<!-- Whole block change -->
@if (Model.Valid)
{
<div id="MainDiv" class="flex justify-between items-center">
<span>Done</span>
</div>
}
else
{
<div id="MainDiv" class="flex justify-between items-center bg-red-300">
<span>Done</span>
</div>
}
<!-- inline style change -->
<div id="MainDiv2" class="flex justify-between items-center @(Model.Valid ? "" : " bg-red-300")">
<span>Done</span>
</div>
</body>
</html>
我张贴了一个简单的。net小提琴为您检查现场:https://dotnetfiddle.net/h7JTR2