本文探讨了在ASP.NET MVC应用中，如何通过集成DataGrid控件来提升用户界面的交互性，特别是通过引入时间筛选和枚举值填充下拉框来丰富搜索功能。
主要实现的功能点包括：
- 使用jQuery UI的DatePicker插件展示时间选择器，并设置其格式和样式。
- 通过Javascript设置日期选择器的联动效果，确保选定的开始日期早于或等于结束日期。
- 将枚举类型的数据动态地加载到下拉列表中，以供用户选择。
本文重点在于前端视图的实现，后端逻辑处理不在讨论范围内。有关如何根据搜索条件过滤数据的内容，建议参考系列文章的其他部分。
时间选择器的实现
在HTML部分，我们创建了一个包含两个输入框的表单，分别用于输入开始时间和结束时间：
时间范围： 至
接下来，在Javascript部分，我们为这两个输入框配置了jQuery UI的DatePicker插件：
枚举值填充下拉框
为了使下拉列表能够显示枚举类型的值，我们首先定义了一个枚举类型，并为其每个成员添加了自定义的描述属性：
public enum Status { [Description("启用")] Enabled = 0, [Description("禁用")] Disabled = 1 } 然后，我们创建了一个辅助方法，用于将枚举类型转换为SelectListItem列表，以便在视图中使用：
public static ListGetSelectListFromEnum () where T : struct { var list = new List (); foreach (var item in Enum.GetValues(typeof(T))) { var memberInfo = typeof(T).GetMember(item.ToString()); if (memberInfo.Length > 0) { var description = memberInfo[0].GetCustomAttribute ()?.Description ?? item.ToString(); list.Add(new SelectListItem { Text = description, Value = ((int)item).ToString() }); } } return list; }
最后，在控制器中调用此方法，并将结果传递给视图：
public ActionResult Index() { ViewBag.StatusOptiOns= GetSelectListFromEnum(); return View(); } 在视图中，使用HtmlHelper方法渲染下拉列表：
@Html.DropDownList("status", ViewBag.StatusOptions as List, "--请选择状态--") 通过上述步骤，我们可以实现一个功能完善的时间筛选和枚举值选择界面，为用户提供更好的交互体验。
京公网安备 11010802041100号