asp.net-mvc-3 - 如何在使用 jquery 的范围验证的基础上更改每个级别的剑道面板栏的颜色？

Question

          <div>
 @(Html.Kendo().PanelBar()
    .Name("LeaderPanelbar")
    .ExpandMode(PanelBarExpandMode.Single)
    .HtmlAttributes(new { style = "width:300px" })
    .Items(panelbar =>
    {
        foreach (var r in Model)
        {
            float PassKey = r.PassKey;
            panelbar.Add().Text(Convert.ToString(r.PassKey))
                .Expanded(true)
                .Content(@<div style="padding: 10px;">
           @Html.Action("PanelItemContent", new { Key = PassKey, sDateRange = ViewBag.SelectedDateRange, sListText = ViewBag.ListText, sCustomEndDate = ViewBag.CustomEndDate, sWidgetTitle = ViewBag.WidgetTitle, sWidgetType = ViewBag.WidgetType, HygieneDelay = ViewBag.HygieneDelay, GracePeriod = ViewBag.GracePeriod, RGracePeriod = ViewBag.RGracePeriod })

        </div>);
        }

    })
)
 </div>

然后我必须在面板栏中添加条件以在每个级别显示不同的颜色。

Answer 1

我会将该逻辑移动到您的模型而不是 jQuery 中，并使您的模型更复杂一些。看起来您的模型目前只是一个列表。

// Model
public class Leader
{
    public float PassKey { get; set; }
    public DateTime DateCompare { get; set; }
    public DateTime DateBaseline { get; set; }
    // Not sure what you are
    public string StatusColor
    {
        get {
            // do your logic on the dates?
            return "red" // Ex.
        }
    }
}

// Controller
public ActionResult LeaderPage()
{
    var model = new IList<Leader>();
    model.Add(new Leader {PassKey = "???", DateCompare = [YourDate], DateBaseLine = [AnotherDate]})
    // Add more (programatically)

    return View(model);
}

// View
for each (Leader leader in Model)
    float PassKey = leader.PassKey;
...
    .Content(@<div style="padding: 10px; color: @leader.StatusColor;">
...

或者类似的东西，只是在我的头顶上打字。如果可以，我认为最好尝试使您的数据更智能，而不是让您的 UI 更智能。

我希望这有帮助。