ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

简介:

ASP.NET MVC搭建项目后台UI框架—1、后台主框架

需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推。

突然要用到这个功能了,印象中曾经写过这个功能的文章,一下子找不到了,只好重新贴出来备忘。最近博客快2个月没更新了,因为这两个月一直在闭门写书。

引入js和css下载地址:http://download.csdn.net/detail/zouyujie1127/9550279

  <link href="~/libs/Autocomplete/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />   

  <script src="~/libs/Autocomplete/js/jquery-ui-1.8.17.custom.min.js"></script>

在View界面添加如下js代码:

复制代码
<script type="text/javascript">
    $(function () {
        getCustomerList("CusName");});
//自动加载客户列表
function getCustomerList(txt) {
    if (txt == undefined || txt == "") return; $("#"+txt).autocomplete({ source: "/Customer/GetCusNameList", minLength: 1 }); //$("#" + txt).focus(function () { // if ($(this).val() == "请输入用户名") { // $(this).css("color", "black").val(""); // } //}).blur(function () { // //光标离开 // if ($(this).val() == "") { // $(this).css("color", "Gray").val("请输入用户名"); // } //}); }

</script>
复制代码

CustomerController中的List方法如下:

复制代码
        /// <summary>
        /// 获取客户列表 模糊查询
        /// </summary>
        /// <param name="term"></param>
        /// <returns></returns>
        public string GetCusNameList(string term)
        {
            if (string.IsNullOrWhiteSpace(term))
                return null;

            var dataSource = CustomerInfo.GetByFilter(new CustomerFilter { CusName = term });

            List<string> list = dataSource.Select(x=>x.CusName).ToList();

            //序列化对象
            System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();

            return js.Serialize(list.ToArray());
        }
复制代码
相关文章
|
13天前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
44 3
|
6天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
19 3
|
11天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
20 2
|
20天前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
2天前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
|
2天前
|
Rust 自然语言处理 API
|
2天前
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
|
26天前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
|
23天前
|
开发框架 前端开发 API
C#/.NET/.NET Core优秀项目和框架2024年9月简报
C#/.NET/.NET Core优秀项目和框架2024年9月简报
|
23天前
|
开发框架 JavaScript 前端开发
一个适用于 ASP.NET Core 的轻量级插件框架
一个适用于 ASP.NET Core 的轻量级插件框架