将单个模型值(字符串)作为参数传递给可重用的javascript函数，以在MVC视图中设置表格单元格类
将单个模型值(字符串)作为参数传递给可重用的javascript函数，以在MVC视图中设置表格单元格类
提问于 2018-12-06 04:12:58
我的视图显示了一个表，其中包含一些数据的状态，并按列进行分组：
- Ready
- Done
- 跳过了
- N/A
我需要设置单元格的背景颜色，这很容易通过css完成，但是每次通过视图中的重复代码来设置样式类对于每一列都是乏味的耗时的，并且容易出错。
因此，我想到了使用javascript函数，使用模型值的参数(上面列出的状态)来动态设置类css样式。
我不是百分之百确定该怎么做。
示例代码：
@using NS.Data
@model NS.Models.PublicationsModel
@{
ViewBag.Title = "PublicationState";
Layout = "~/Views/Shared/_Layout.cshtml";
var PublicationState = Model.PublicationState.ToList();
}
@*Below the idea of the intended "reusable" javascript function*@
<script type="text/javascript" language="javascript">
$(function ToggleCellColour(StepState) {
switch (StepState) {
case "Ready":
return "cssReadyState";
break;
case "Done":
return "cssDoneState";
break;
case "Skipped":
return "cssSkippedState";
break;
default:
return "";
break;
}
});
</script>
<h2>Publication State</h2>
@Html.ActionLink("Back to previous page", "ActionName", "ControllerName", new { returnActive = true }, null)
<table class="table">
<tr>
<th>Client</th>
<th>Availability Communicated to Team</th>
<th>Schedule Test</th>
<th>Tested</th>
<th>Planned Prod Implementation</th>
<th>Implemented to Prod</th>
</tr>
@*Returned Publication States: N/A, Ready, Skipped, Done*@
@foreach (var PubSt in PublicationState)
{
<tr>
<td>@PubSt.Client</td>
<td align="center" class="ToggleCellColour(@PubSt.Availability_Communicated_to_Team)"> @*This is where I thought of calling the javascript method to determine the css formatting for the cell*@
@if (PubSt.Availability_Communicated_to_Team != "N/A")
{
if (PubSt.Availability_Communicated_to_Team == "Done" || PubSt.Availability_Communicated_to_Team == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else @*The "Ready" State*@
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Availability_Communicated_to_Team
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Schedule_Test)">
@if (PubSt.Schedule_Test != "N/A")
{
if (PubSt.Schedule_Test == "Done" || PubSt.Schedule_Test == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Schedule_Test
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Tested)">
@if (PubSt.Tested != "N/A")
{
if (PubSt.Tested == "Done" || PubSt.Tested == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Tested
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Planned_Prod_Implementation)">
@if (PubSt.Planned_Prod_Implementation != "N/A")
{
if (PubSt.Planned_Prod_Implementation == "Done" || PubSt.Planned_Prod_Implementation == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Planned_Prod_Implementation
}
</td>
<td align="center" class="ToggleCellColour(@PubSt.Implemented_on_Prod)">
@if (PubSt.Implemented_on_Prod != "N/A")
{
if (PubSt.Implemented_on_Prod == "Done" || PubSt.Implemented_on_Prod == "Skipped")
{
<img src="~/Images/MailClosed.png" />
}
else
{
<img src="~/Images/MailOpen.png" />
}
}
else
{
@PubSt.Implemented_on_Prod
}
</td>
</tr>
}
}
</table>可以像显示图像一样重复if else语句代码，但我认为使用javascript函数可以省去麻烦，并引入更少的错误。
任何帮助都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-06 04:43:05
如果你使用的是JQuery，你可以在单元格中添加一个数据属性和一些标识符(比如类名)，然后让JS为你设置一个CSS类：
<tr>
<td class="coloredCell" data-availability="@PubSt.Planned_Prod_Implementation">stuff</td>
</tr>然后使用JS在文档ready上设置颜色：
$(function ()
{
$('.coloredCell').each(function (index, element)
{
var availability = $(element).attr("data-availability");
var cssClass;
switch (availability)
{
case "Ready":
cssClass = "cssReadyState";
break;
case "Done":
cssClass = "cssDoneState";
break;
case "Skipped":
cssClass = "cssSkippedState";
break;
default:
cssClass = "";
break;
}
$(element).addClass(cssClass);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53640021
复制相关文章
相似问题