Как изменить цвет модального диалога на основе значения модели в MVC?

Question

У меня есть модальное диалоговое окно, в котором я хочу изменить цвет модального заголовка на основе значения в модели.Как я могу лучше всего достичь этого?Model.AlertType.Description содержит значение, которое я хочу использовать для изменения цвета заголовка (критический = красный, предупреждение = желтый, информация = зеленый)

РЕДАКТИРОВАТЬ: у меня нет большого опыта в этой области, поэтомуЯ не уверен, что мне не хватает.Я изменил класс div, чтобы он соответствовал тому, что я нашел по следующей ссылке в качестве руководства: https://www.bootply.com/s6x5oKLiDG

@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>

Answer 1

Как только я добавил новые стили непосредственно в файл, это исправило проблему.Я добавил их в другой файл .CSS в приложении, но это отразилось на стилях шрифта других полей приложения.

Answer 2

Поскольку кажется, что Model.AlertType.Description является строкой, а ее значения соответствуют значениям в ссылке , просто попробуйте выполнить следующее: Razor:

<div class="modal-header modal-header-@(Model.AlertType.Description.ToLower().Trim())">

В этой строке предполагается, что Model.AlertType.Description возвращаетследующее значение:

success, primary, info, warning, danger

Это фиксированный код cshtml вида:

@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>

Необходимо добавить в файл main.css следующие строки:

/* CSS used here will be applied after bootstrap.css */
.modal-header-success {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #5cb85c;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-warning {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #f0ad4e;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-danger {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #d9534f;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-info {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #5bc0de;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}
.modal-header-primary {
    color:#fff;
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #428bca;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
}