Question

我的一个观点包含一个dl元素，里面重复了很多以下结构：

<dt>
    <label>Accept this thing?</label>
</dt>
<dd>
    @Html.CheckBoxFor(model => model.ThisThingAccepted)
</dd>

有许多这样的东西＆＃34;。我希望一旦用户接受了该东西并将数据发回以便可以保存，则复选框和标签就会消失。

但是，不允许在div内使用span和dl元素，因此唯一符合HTML法律的方法似乎是：

<dt  @if (Model.ThisThingAccepted) { <text> style="display: none;" </text> }>
    <label>Accept this thing?</label>
</dt>
<dd @if (Model.ThisThingAccepted) { <text> style="display: none;" </text> }>
    @Html.CheckBoxFor(model => model.ThisThingAccepted)
</dd>

这一切都很糟糕。

我知道我可以通过使用自定义显示模板来整理它，但有没有更简洁的方法来隐藏这些元素？

Answer 1

通过在模型中添加属性来实现此目的的方法之一

public class YourModel
{
public bool ThisThingAccepted{get;set;}
public string CssClass{get;set;}
}

在样式表中创建一个css类

.HideElements
{
 display:none;
}

绑定模型时会填充css属性像

Public ActionResult GetDetails()
{
var data  = getdatafromsomewhere();

var model = new YourModel();
model.ThisThingAccepted = data.ThisThingAccepted;
model.CssClass = data.ThisThingAccepted ? "HideElement" : string.Empty;

return View(model);
}

在旁注中，您可以使用其他一些html元素代替dt，dl。渲染视图时，请使用模型中的css类，并将其分配给要使用它的元素。

Answer 2

我认为他们需要在渲染的UI中出现？如果没有，请将它们包装在if语句中，并且根本不渲染它们。

我有时会这样做：

style='@(Model.ThisThingAccepted ? "display: none;" : "" }'

或者在视图的功能块中使用方法：

@functions {
   public string GetInitialState(ModelType model)
   {
       return model.ThisThingAccepted ? "style=display:none;" : "";
   }
}

<dt @GetInitialState(Model)>

在.net MVC中是否有更好的方法来隐藏dt元素而不是向每个元素添加display：none？

2 个答案: