C#.MVC+JQuery1.9自定义下拉框控件

最新推荐文章于 2021-04-20 21:15:35 发布

原创

最新推荐文章于 2021-04-20 21:15:35 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#下拉框控件

本文介绍了一种使用C#.MVC和jQuery 1.9创建的自定义下拉框控件，该控件具备自动查找、键盘操作选择、滚动条显示、事件触发及Text/Value值等功能，且具有良好的扩展性。作者计划在后续完善其外观并分享详细代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一组漂亮的CSS，加上一段功能强大的JS，加上前后分工明确的MVC，再加上我几天的打码时间，就蛋生了一个可扩展的下拉框控件:输入内容时自动查找下拉列表项、上下键回车选择、列表显示滚动条、下拉框选择后触发改变事件、附带Text值Value值(可扩展更多值)........

没时间整理了，直接贴代码上来，等过年有时间了再整了，到时候找个漂亮的皮肤换上去再贴截图给你们看。

(没用过VS.MVC的请按Alt+F4)

Controllers：

namespace MvcJSCommon.Controllers
{
    /// <summary>
    /// 
    /// </summary>
    public static class HtmlExtensions 
    {
        /// <summary>
        /// 自定义下拉框控件
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="htmlHelper"></param>
        /// <param name="name">控件名</param>
        /// <param name="source">列表源</param>
        /// <param name="exprValue">绑定值字段</param>
        /// <param name="exprText">绑定文本字段</param>
        /// <param name="defaultVal">默认值，可为null</param>
        /// <param name="htmlAttributes">html属性，可为null</param>
        /// <param name="edit">是否可编辑</param>
        /// <returns></returns>
        public static MvcHtmlString DropDownListCustom<T>
  (this HtmlHelper htmlHelper, string name, IEnumerable<T> source, Expression<Func<T, object>> exprValue
            , Expression<Func<T, object>> exprText, object defaultVal = null, object htmlAttributes = null, bool edit = false)
        {

            return MvcHtmlString.Create(DropDownListCustomHtml(name, source, exprValue, exprText, defaultVal, htmlAttributes, edit));
        }
        /// <summary>
        /// 生成下拉html代码重载
        /// </summary>
        /// <typeparam name="T">绑定实体类型</typeparam>
        /// <param name="name">Comobx的ID</param>
        /// <param name="source"></param>
        /// <param name="exprValue"></param>
        /// <param name="exprText"></param>
        /// <param name="defaultVal"></param>
        /// <param name="htmlAttributes"></param>
        /// <param name="edit"></param>
        /// <returns></returns>
        public static string DropDownListCustomHtml<T>(string name, IEnumerable<T> source, Expression<Func<T, object>> exprValue, Expression<Func<T, object>> exprText, object defaultVal = null, object htmlAttributes = null, bool edit = false)
        {
            List<SelectListItem> selectList = new List<SelectListItem>();

            if (exprValue != null && exprText != null)
            {
                var handlerValue = exprValue.Compile();
                var handlerText = exprText.Compile();
                if (source == null)
                {
                    source = new List<T>();
                }
                foreach (var i in source)
                {
                    var value = (handlerValue.Invoke(i) ?? new object()).ToString();
                    var text = (handlerText.Invoke(i) ?? new object()).ToString();
                    var selected = (defaultVal != null && defaultVal.ToString().Equals(value, StringComparison.OrdinalIgnoreCase));
                    selectList.Add(new SelectListItem()
                    {
                        Value = value,
                        Text = text,
                        Selected = selected
                    });
                }
            }

            return DropDownListCustomHtml(name, selectList, htmlAttributes, edit);
        }
        /// <summary>
        /// 生成下拉html代码
        /// </summary>
        /// <param name="name"></param>
        /// <param name="selectList"></param>
        /// <param name="htmlAttributes">样式处理只能以下几个new {@classinput="xxx",@inputwidth="110",@classdropdiv="drop",@dropdivwidth="20",@classselectdiv="selectDiv",@selectdivheight="100"}</param>
        /// <returns></returns>
        private static string DropDownListCustomHtml(string name, IEnumerable<SelectListItem> selectList, object htmlAttributes, bool edit = false)
        {

            StringBuilder attrs = new StringBuilder();
            #region 样式处理
            string classTop = "select";
            string width = "", height = "";

            if (htmlAttributes != null)
            {
                var t = htmlAttributes.GetType();
                foreach (var property in t.GetProperties())
                {
                    switch (property.Name.ToLower())
                    {
                        case "class"://总的样式
                            classTop = property.GetValue(htmlAttributes, null).ToString();
                            break;
                        case "width":       //宽
                            width = property.GetValue(htmlAttributes, null).ToString();
                            break;
                        case "height":      //高
                            height = property.GetValue(htmlAttributes, null).ToString();
                            break;
                         default:
                            break;
                    }


                }
            }
            #endregion

            StringBuilder sb = new StringBuilder();
            string defaultText = string.Empty;
            string defaultValue = string.Empty;

            StringBuilder sbText = new StringBuilder();

            if (!selectList.IsNullOrEmpty())
            {
                defaultText = selectList.ElementAt(0).Text;
                defaultValue = selectList.ElementAt(0).Value;
                //是否有默认值
                var model = from c in selectList