如何根据MVC中的模型值更改模态对话框的颜色？

Question

我有一个模态对话框，我想根据模型中的值更改模态标题的颜色。我怎样才能最好地完成这个？ Model.AlertType.Description包含我想用来改变标题颜色的值（关键=红色，警告=黄色，信息=绿色）

编辑：我在这个领域没有很多经验，所以我不确定我错过了什么。我更改了div类以匹配我在以下链接中找到的作为指南：qazxsw poi

https://www.bootply.com/s6x5oKLiDG

Answer 1

由于

@model AgRSys.Models.Alerts

<div class="container">
  <div id="display-alerts-modal-dialog" class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header modal-header-primary">
            <button type="button" class="modal-header-close close" data- 
                dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title " id="myModal-label">Model.AlertType.Description </h4>

        </div>

        <div id="modal-body" class="form-group modal-body">
            @using (Ajax.BeginForm("DisplayAlert", ViewContext.RouteData.GetRequiredString("controller"), new { LID = Model.RelatedId }, new AjaxOptions { UpdateTargetId = "alerts-grid-body", OnFailure = "onFailure", OnSuccess = "onDisplayAlertSuccess", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))
            {
                <div id="modal-body" class="form-group modal-body">

                    @Html.LabelFor(model => model.Alert, htmlAttributes: new { @class = "control-label" })
                    @Html.TextAreaFor(model => model.Alert, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Alert, "", new { @class = "text-danger" })

                    </div>


                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" id="btnCancel">Cancel</button>
                    </div>

            }
        </div>
    </div>
</div>

似乎是一个字符串，其值与Model.AlertType.Description中的值相对应，所以请尝试按照Razor：

link

此行假设<div class="modal-header modal-header-@(Model.AlertType.Description.ToLower().Trim())"> 返回以下值：

Model.AlertType.Description

这是修复了cshtml代码的视图：

success, primary, info, warning, danger

它需要在以下行后附加到main.css文件：

@model AgRSys.Models.Alerts

<div class="container">
  <div id="display-alerts-modal-dialog" class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header modal-header-@(Model.AlertType.Description.ToLower().Trim())"> @*Here it is the fix*@
            <button type="button" class="modal-header-close close" data- 
                dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title " id="myModal-label">Model.AlertType.Description </h4>

        </div>

        <div id="modal-body" class="form-group modal-body">
            @using (Ajax.BeginForm("DisplayAlert", ViewContext.RouteData.GetRequiredString("controller"), new { LID = Model.RelatedId }, new AjaxOptions { UpdateTargetId = "alerts-grid-body", OnFailure = "onFailure", OnSuccess = "onDisplayAlertSuccess", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))
            {
                <div id="modal-body" class="form-group modal-body">

                    @Html.LabelFor(model => model.Alert, htmlAttributes: new { @class = "control-label" })
                    @Html.TextAreaFor(model => model.Alert, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Alert, "", new { @class = "text-danger" })

                    </div>


                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" id="btnCancel">Cancel</button>
                    </div>

            }
        </div>
    </div>
  </div>
</div>

Answer 2

一旦我将新样式直接添加到文件中，它就解决了问题。我已将它们附加到应用程序中的另一个.CSS文件，但它影响了应用程序中其他字段的字体样式。