如何在使用jquery进行范围验证的基础上更改每个级别的kendo面板栏的颜色?

时间:2012-12-12 07:12:58

标签: asp.net-mvc-3 kendo-ui

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

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

1 个答案:

答案 0 :(得分:0)

我会将这个逻辑移到你的模型而不是jQuery中,让你的模型变得更复杂一些。看起来你的模型目前只是一个List。

// 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;">
...

或类似的东西,只需键入我的头顶。如果你能让我认为最好让你的数据变得更聪明,而不是你的用户界面更聪明。

我希望这会有所帮助。