默许状况下,.NETFramework仅自带了最基本的Ajax控件,如UpdatePanel,UpdateProgress等,假如你想让现有ASP.NET运用程序Ajax化,最简略的方法便是利用Ajax控件工具箱中的扩展控件,但VisualStudio默许并没有顺便Ajax工具箱,你需求从这里下载,将其添加到VisualStudio工具箱中之后就能够在ASP.NET运用程序中运用了,留意,本文是针对.NETFramework3.5而非4.0的。
1、主动完结扩展(AutoComplete)
这是我最喜欢的一个ASP.NETTextBox控件的扩展控件,当用户在文本框中输入字符时,它以下拉列表形式显现一切有用的值让用户挑选,被选中的值主动填充到TextBox控件中,这个控件在很多ASP.NET运用程序中都得到了运用,图1显现了一个简略的示例。
1
图1主动完结控件运转作用
这个控件在供给查找功用时用得最多,它能够为用户供给查找主张,下拉列表中的内容通过一个Web服务进行露出。
2、动画扩展(Animation)
假如你想运用ASP.NETAjax制造一个很花俏的网站,那你应该测验一下动画控件,它能够节省开发人员创立动画需求的很多时刻,它能够作为任何ASP.NET控件的扩展。
运用动画扩展能够轻松创立褪色,移动,改动巨细和上色等许多作用,当方针控件触发下列事件时能够调用这些动画作用。
?OnLoad
?OnClick
?OnMouseOver
?OnMouseOut
?OnHoverOver
?OnHoverOut
3、拾色器扩展(Colorpicker)
它能够作为TextBox控件的扩展控件,点击TextBox控件时,弹出色彩拾取面板,用户能够在这个窗口中进行色彩挑选,如图3所示。
假如没有这个扩展控件,我不知道自己创立这样一个控件会有多大的难度,这也是我将其列在10大控件之中的原因,我也承认在ASP.NET运用程序中运用这个控件的时候很少。
4、模态弹出扩展(Modalpopup)
这是一个简直适用于一切ASP.NET服务端容器控件的扩展,它答应你以一种滑润的方法显现服务器控件,它答应你给方针控件编写服务端代码,但客户端代码更快,用户体会更好,不过总之逃不脱要编写服务端代码,这个扩展为这种状况供给了极大的便当。
这个控件让弹出作用更滑润,更清爽,用户体会更丰厚,当然你还能够供给服务端代码,图4显现了一个简略的示例。
5、可折叠面板扩展(CollapsiblePanel)
当你的网页大部分由控件和文本内容组成时,聪明的人会将它们分组放在不同面板下,在分组顶部运用可折叠面板扩展,增加页面的层次感,这是一个ASP.NET面板的扩展控件,它十分有用,是运用最广泛的扩展控件之一,图5显现了一个简略的可折叠面板扩展示例。
6、动态填充扩展(DynamicPopulate)
这是一个十分有用功用强大的扩展控件,它为改动运用Ajax的控件中的HTML内容供给了方便,控件的HTML内容修改由TargetControlID控制,内容填充由PopulateTriggerControlId触发,HTML内容应该由Web服务供给。
当你创立一个动态网页时,这个扩展很有用,你不必一开始就加载一切内容,而是依据上下文环境进行显现和躲藏,需求时才显现动态内容,因而这样能够极大地削减页面巨细,进步页面性能。
7、幻灯作用扩展(SlideShow)
这个扩展实际上是一个ASP.NET图像控件,借助它能够轻松创立出幻灯片播放作用,你需求做的是通过WebMethod供给幻灯显现的图像,它供给了下一页,上一页,播放/中止按钮和标题标签,图6显现了一个简略的幻灯显现作用示例。
8、选项卡控件(Tabs)
严格来说,它不能算作一个扩展,由于选项卡是一个独立的控件,在开发ASP.NET网页时最让我头痛的便是创立选项卡,必须结合运用JavaScript和HTML,选项卡的优点是让页面变得更美观,让导航变得更滑润,答应.NET开发人员按一定逻辑将项目进行分组,有TabContainer的选项卡控件是一个容器,它能够包含多个TabPanels,即子选项卡,图7显现了一个简略的选项卡示例。
1
图7选项卡控件示例
9、HTML修改器控件(HTMLEditor)
和选项卡控件相同,HTML修改器也是一个独立的控件,它为最终用户供给了丰厚的HTML文本修改功用,现在你在网页上见到的HTML修改器功用都现已十分强大了。
在后台修改文章或来访者发表谈论的当地,都能够运用HTML修改器,当然你能够限制提交的内容,如后台修改时通常能够是全HTML格式的内容,而谈论则只能是纯文本的内容,图8显现了一个简略的HTML修改器示例。
10、列表查找扩展(ListSearch)
这个扩展能够是一个列表框控件,也能够是一个下拉列表控件,用户输入字母就能够查找列表框或下拉列表中的内容,图9显现了一个简略的列表查找扩展示例。
小结
毫无疑问,Ajax控件工具箱扩展让我们的ASP.NETWeb运用程序变得更丰厚多彩,供给更好的用户体会,一切Ajax控件工具箱扩展中的CSS和动画都能够自定义,也便是说,你能够发扬Hack精力,将页面作用和用户体会做到极致。

asp

asp.netajax实现模糊查询

第一节:查询概述
查询功用在每个软件项目中,都是必备的且是适当重要的一个功用,像百度的查找框,便是一个查询功用,一个查询功用就可以实现百度的核心功用。
查询功用,有的就一个文本框,比较简单,还有的查询条件比较多,查询的更精准,常用于企业内部的系统。
那么查询的核心工作原理是什么呢?
查询其实便是挑选的意思,依据某个字或词语,在数据库中进行有条件的查询,然后将查询到的成果集回来给客户端,这样在客户端上就可以将查询到的成果以各种办法出现出来。
这儿运用jQuery的AJAX技能以异步的办法从SQLServer2019数据库中查询数据。并出现在Html页面上。
02第二节:页面布局
咱们在VisualStudio2019IDE开发工具中,来实现这个功用,下面,创建一个空白项目:
上图是一个空白的Web项目,现在咱们创建一个Index.html页面,并编写如下代码:
一都编程,每个常识便是一个案例。width=”300px”cellpadding=”1″cellspacing=”1″>
ID名字性别年纪
在VisualStudio2019中运转一下上面的Html代码:
运转一下成果:
在上图中,页面上有一个查找框和一个“查询”按钮,还有一个表头。
这儿咱们只查询“编号”和“名字”这2个字段的值,图4中的表头已经做好了,后边只是在此表头下增加行数据即可。
03第三节:服务器端数据源编写
这儿,咱们运用ASP.NET中的一般处理程序来实现从SQLServer2019数据库中拉取数据,并运用DBHelper.cs类库作为操作数据库的工具。
在Web项目中创建一个一般处理程序GetStudent.ashx,并在GetStudent.ashx.cs文件中编写如下代码:
usingSystem.Web;usingNewtonsoft.Json;namespaceYidosoft.Edu.Search{publicclassGetStudent:IHttpHandler{DBHelperdb=newDBHelper();publicvoidProcessRequest(HttpContextcontext){//接收值varkeyWord=context.Request[“keyWord”];context.Response.ContentType=”text/plain”;System.Data.DataTabledataTable=db.GetDataTable($”select*fromStudentwhereSNamelike’%{keyWord}%’”);varjson=JsonConvert.SerializeObject(dataTable,Formatting.Indented);context.Response.Write(json);}publicboolIsReusable{get{returnfalse;}}}}
一般处理程序的C#代码阐明如下:
运用了DBHelper数据库操作类库,DBHelper.cs参考如下:NET开发-在DBHelper中封装ADO.NET目标,并调用执行增加数据功用
代码编写在ProcessRequest()办法中,并运用HttpContext作为参数的类型,获取Http上下文目标。运用context.Request[“keyWord”];获取从客户端传过来的查询关键字。运用DBHelper.cs类库的GetTable()办法得到查询后的成果集。这儿运用了第三方的Newtonsoft对DataTable表数据进行JSON序列化,转换为JSON格局的数据。Newtonsoft可经过NuGet办法增加。测验一下这个一般处理程序是否能正常运转:
在运转的成果中,运用了“小”作为关键字,并查询出来了3行数据,并存放在数组中。
04第四节:运用jQuery的AJAX恳求数据
现在,咱们在Html代码中编写JS代码,当然,这些JS代码也可以放在单独的*.js文件中,这儿为了演示便利,就与html放在一起了。
在Html代码的头中增加运用jQuery的Ajax技能恳求远程数据的代码。
这儿咱们先写一个基本的AJAX恳求,先确保可以恳求成功:
一都编程,每个常识便是一个案例。
此JS代码阐明如下:
运用jQuery选择器先得到查找文本框中输入的关键字。然后将关键字放在*.ashx?后边作为参数恳求。期望服务器回来的类型是json。运用GET恳求办法。$.ajax()的回调函数中,data参数便是恳求后回来的JSON数据。这儿在控制台上输出。运转一下上面的代码,成果如下:
当咱们在文本框中输入查询关键字“小”时,并查询后,得到一个具有3个目标的数组。
这阐明咱们恳求成功,还可以在“Network”中检查恳求信息:
此时,恳求后回来的状态码是200,表明恳求成功了。
剩余的事便是如何将得到的数据在Html页面上显示出来了。
完整的jQueryAJAX代码如下:
好了,上面咱们将html代码和jQuery代码悉数编写完成了,现在咱们运转一下终究的作用:
当在文本框中输入“小”并点击“查询”按钮后,依据名字开端在数据库中查找,并最后将所有带“小”字的名字显示出来了。
在上面,经过四个过程运用AJAX技能在服务器上获取到了表格数据:
先布局好页面作用,主要运用Html+CSS技能。在服务器端编写从数据库获取数据的代码,并转换为JSON格局。运用jQuery的ajax技能从客户端开端向服务器发起GET恳求,并将恳求后的数据放在表格中显示出来。在运用AJAX技能时,一定要多测验几次,确保能100%从服务器得到数据,然后才干进行后边的操作。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。