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());
        }
复制代码
相关文章
|
2月前
|
监控 前端开发 API
一款基于 .NET MVC 框架开发、功能全面的MES系统
一款基于 .NET MVC 框架开发、功能全面的MES系统
|
5月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
64 7
|
5月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
111 0
|
6月前
|
Linux C# C++
【Azure App Service For Container】创建ASP.NET Core Blazor项目并打包为Linux镜像发布到Azure应用服务
【Azure App Service For Container】创建ASP.NET Core Blazor项目并打包为Linux镜像发布到Azure应用服务
|
6月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
82 0
|
6月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
|
6月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
184 0
|
9月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
242 0
|
9月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
97 0
|
9月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
404 5