如何从Controller动态添加CSS类，区分警告/错误与成功消息样式？

要实现根据操作结果动态给警告/错误、成功消息设置独立CSS类，我们可以分两步修改你的Controller和View：

第一步：更新Controller，传递消息类型和内容 #

首先需要在Controller里根据存储过程的返回结果，判断操作是成功还是失败，然后通过ViewBag传递对应的消息类型（用于指定CSS类）和消息内容。这里假设存储过程返回的V_OUT值为0代表注册成功，非0代表错误（你可以根据实际业务逻辑调整这个判断条件）：

public ActionResult Register(string username, string name, string role, string password) { 
    int role_ = Convert.ToInt32(role); 
    ObjectParameter output = new ObjectParameter("V_OUT", typeof(int)); 
    var result = db.P_SET_USER(username, name, role_, password, output); 
    int statusCode = Convert.ToInt32(output.Value);

    // 根据状态码设置消息类型和内容
    if (statusCode == 0) {
        // 成功状态：设置对应的CSS类标识和消息
        ViewBag.AlertType = "success";
        ViewBag.AlertMessage = "注册成功！欢迎加入我们！";
    } else {
        // 错误状态：这里也可以根据不同错误码细分警告/错误类型
        ViewBag.AlertType = "danger";
        ViewBag.AlertMessage = "注册失败，请检查用户名是否已存在或输入信息是否正确！";
        // 如果需要区分警告和错误，比如某些情况是警告，可以加额外判断：
        // if(statusCode == 1) { ViewBag.AlertType = "warning"; ViewBag.AlertMessage = "用户名格式不规范，已自动修正，请确认！"; }
    }

    ViewBag.StudentsCount = statusCode;
    return View(); 
}

第二步：在View中动态渲染带CSS类的消息框 #

接下来在View里，我们根据ViewBag传递的AlertType动态设置CSS类，同时渲染消息内容。这里以Bootstrap的alert类为例（如果你用自定义CSS，只需要替换类名即可）：

<!-- 在View的合适位置添加这段代码，比如表单上方或下方 -->
@if (!string.IsNullOrEmpty(ViewBag.AlertMessage))
{
    <!-- 动态绑定CSS类：alert-@ViewBag.AlertType -->
    <div class="alert alert-@ViewBag.AlertType" role="alert">
        @ViewBag.AlertMessage
    </div>
}

如果你是自定义CSS样式，比如自己定义了success-message、error-message、warning-message这些类，那么可以这样写：

@if (!string.IsNullOrEmpty(ViewBag.AlertMessage))
{
    <div class="@ViewBag.AlertType-message">
        @ViewBag.AlertMessage
    </div>
}

对应的自定义CSS示例：

.success-message {
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #2e7d32;
    margin-bottom: 16px;
}

.error-message {
    background-color: #ffebee;
    color: #c62828;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #c62828;
    margin-bottom: 16px;
}

.warning-message {
    background-color: #fff8e1;
    color: #f57f17;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid #f57f17;
    margin-bottom: 16px;
}

额外优化建议 #

如果你的项目比较复杂，建议使用强类型ViewModel代替ViewBag，这样更安全且易于维护。比如创建一个AlertViewModel类：

public class AlertViewModel
{
    public string Type { get; set; }
    public string Message { get; set; }
}

然后在Controller里把它放到ViewData或者直接作为View的Model的一部分，View里强类型引用即可。

内容的提问来源于stack exchange，提问作者user4221591