mvc ajax定时刷新数据库,通过Ajax.ActionLink()在ASP.NET MVC5中实现无刷新加载操作方法...

第1节. Ajax辅助方法

#NET编程#在ASP.NET MVC 5中除了支持HTML辅助方法之外,还支持另外一套与Ajax相关的辅助方法,称为Ajax辅助方法。这些Ajax辅助方法是异步进行的。

ef90ae29b099782aa1349dd91e9eb6ef.pngASP.NET MVC 5 ActionLink()方法

要想使用Ajax辅助方法,需要引入文件:jquery.unobtrusive-ajax.js,此文件是支持ajax的基础,微软的MVC 5 Ajax辅助方法是借助于jquery实现的。

在创建MVC 5 Web应用程序之后,项目的根目录下会存在script的文件夹,其中就存在与jquery相关的js文件,如果需要的js文件不存在,可以通过NuGet添加。

jquery.unobtrusive-ajax.js文件如果不存在项目中,可以使用如下方法添加,右击Web项目,弹出右键菜单。

b0e708f22bc100cf952e7a0469a4845b.png

在菜单中找到“管理NuGet程序包”,以可视化的方式添加需要的组件,微软现在也是推荐大家通过NuGet添加组件,支持添加和删除,实现可插拔的方式使用第三方或自己开发的组件。

37e38f46a585129755ff79ff0c58c1eb.pngNuGet包管理器

输入需要安装组件的关键字,就可以在NuGet中查找出结果,然后使用NuGet程序包即可安装需要的功能包。

9fd756c30d01b25a1262f11320f64c2d.png

功能包安装完成之后,就可以将程序集或文件添加到需要的程序中。

一、 Ajax的ActionLink方法

对于Ajax的ActionLink()方法是一个非常重要的方法,使用该方法完全可以实现异步加载数据,也就是无刷新的数据,并且可以直接将控制器中的数据返回给视图。

@Ajax.ActionLink()方法的基本语法如下:

@Ajax.ActionLink("异步加载", "SyncLoad", new AjaxOptions{UpdateTargetId = "div1",InsertionMode = InsertionMode.Replace,HttpMethod = "GET"});

此代码要全部掌握牢,非常之重要,说明如下:

(1). 首先最外层的div1表示通过Ajax.ActionLink()方法将服务器端的数据异步加载到id=“div1”的div标记中。

(2). Ajax.ActionLink()方法的第一个参数表示超链接的文本信息。

(3). Ajax.ActionLink()方法的第二个参数用于指定加载数据的控制器中的操作方法名称,当然也可以在重载中指定控制器,不指定控制器,默认是当前视图所在方法的控制器。

(4). Ajax.ActionLink()方法的第三个参数是new AjaxOptions()对象,其中的参数说明如下:

A. UpdateTargetId属性表示返回的数据要更新哪那个HTML标记中,使用标记的ID指定。

B. InsertionMode属性表示从服务器返回的数据以什么样的方式添加到HTML元素中,InsertionMode.Replace表示替换。

7b9fc6107d0e19cbdb9fbfdcf958c66d.pngActionLink()方法的参数

C. HttpMethod属性表示设置的HTTP请求方式。

在控制器中编写一个简单的方法,并使用Ajax.ActionLink()方法调用,该方法是被异步加载的。

dbcfd15bf1d413e2d135ec3a9c80c624.png

这里的SyncLoad()方法只是返加一个简单的字符串。上面的Ajax.ActionLink()方法中调用的就是SyncLoad()方法,现在运行一下结果:

a3da9a45be28cc5d04357944b0102f1d.png

运行后的页面上出现了一个超链接,该超链接点击后不会跳转页面,也不会刷新页面,是一个无刷新的页面。点击一下此链接,看一下运行结果。

8c3718fc854acb98ebdac488709df033.png

当点击过链接之后,页面并没有刷新,而是通过异步的方式加载服务器的数据,将SyncLoad()方法返回的结果显示在页面上了。

二、 HTML 5特性

在具有@Ajax.ActionLink()方法的页面调用后,查看一下网页源代码,我们看看最终被翻译成了什么Html代码?

a5a0c363f54316909457d0989241a41f.png

微软使用了HTML5特性完整的实现了异步加载。并且是非侵入式的,没有任何的JS代码。

三、 Ajax表单

在ASP.NET MVC 5中,可以使用异步表单功能实现表单数据的无刷新提交,也就是Ajax表单。

@{Layout = null;}

@*异步提交数据*@@using (Ajax.BeginForm("Add", new AjaxOptions(){InsertionMode = InsertionMode.Replace,HttpMethod = "POST",OnFailure = "searchFaild",OnSuccess = "searchSuccess",LoadingElementId = "ajax-loader"})){@Html.TextBox("q")timg.gif}

这是一段完整的视图代码,并且将@Ajax.ActionLink()方法的参数都用上,我们来测试一下会发生什么样的效果。

d515fc0f125a76c39a29d9ecf37841a2.png

从运行的结果上看,我们还添加了动画效果,由于页面没有刷新,所以我们可以放一个gif的图片,让加载具有动态性,给用户一种友好的体验。

第2节. 返回JSON

对于ASP.NET MVC 5控制器中的操作方法,也是可以直接给视图返回JSON字符串的,这样在其它页面就可以使用Jquery的$.ajax()方法获取JSON数据,这里的操作方法返回的JSON字符串相当于一般处理程序ASHX返回JSON字符串来使用。

/// /// 返回JSON数据/// /// [HttpGet]public JsonResult GetJSON(){InfoDev.DBHelper db = new InfoDev.DBHelper();System.Data.DataTable dt = db.GetDataTable("select * from StudentInfo");return Json(JsonConvert.SerializeObject(dt), JsonRequestBehavior.AllowGet);}

在控制器中,编写的返回JSON字符串的方法与其它方法是有区别的。区别如下:

(1). 返回类型是JsonResult。

(2). 将数据库返回的数据使用SerializeObject()序列化,且还要指定允许HTTP Get提交。

当在视图中使用@Ajax.ActionLink()方法调用GetJSON()方法后,返回的JSON字符串是由数组组成的原始字符串,不容易理解,需要进一步的处理获取有用的数据。

bd03ae66e156e427bc44cb4a1cea7bb9.png

在其它的任何平台上可以使用$.ajax()方法获取JSON数据,然后再进一步处理。如下是通过$.ajax()在html页面上调用的代码:

此段代码是使用了jQuery的ajax技术获取GetJSON()方法中返回的JSON字符串,得到结果后,可以进一步的处理,将需要的数据遍历出来,并显示在页面上或再提交给其它服务器处理。

举报/反馈

matlab生成blocks、bumps和doppler标准测试信号 关键函数:wnoise使用方式X = wnoise(FUN,N) [X,XN] = wnoise(FUN,N,SQRT_SNR) [X,XN] = wnoise(FUN,N,SQRT_SNR,INIT)X = wnoise(FUN,N) 返回由 FUN给出的信号,长度为2^N,幅值范围[0,1].[X,XN] = wnoise(FUN,N,SQRT_SNR) ,返回了一个测试信号X,以及一个加噪 阅读详情

相关推荐

如何在MVC4 Razor中刷新(重新加载)页面

成功执行代码后,可以使用JavaScript。

.NET MVC】页面定时刷新

虽然这个是很简单大家都知道的,写下了就是为以后忘了,直接过来copy: function myrefresh() { //相关处理 window.location.reload();//重新加载页面 } setTimeout('myrefresh()', 60000); //每分钟刷新一次

何处是故乡。 5049

基于YOLOv8深度学习框架的变电站设备缺陷隐患智能检测与识别系统_该项目旨在利用包含8000余张高分辨率图像的数据集涵盖渗漏油鸟巢表盘破损呼吸器变色表盘模糊地面油污.zip

基于YOLOv8深度学习框架的变电站设备缺陷隐患智能检测与识别系统_该项目旨在利用包含8000余张高分辨率图像的数据集涵盖渗漏油鸟巢表盘破损呼吸器变色表盘模糊地面油污.zip

Web开发:ASP.NET CORE中前端使用Ajax定时获取后端数据

给a标签每15s刷新一次,显示最新的时间(时间必须由后端获取) 应该如何操作呢。

m0_67412019的博客 761

Ajax实现定时器任务

时间为9秒执行一次这个ajax,相当于一个小的定时器 setInterval(function () { $.ajax({ async: false, url: "请求路径", type: "post", success(data){ console.log("success");

leo 1万+

初识ReactJS的组件化开发(六):ajax更新评论列表时的定时器bug修改

前面我们定时加载评论数据,当评论组件被移除的时候,定时器依然在运行。我们需要在移除组件的时候,把定时器清除了// 电影评论组件 var ReviewList = React.createClass({ getInitialState: function () { return { review:[], //保存电影json对象数组

1654

js ajax定时执行,js定时每天某个时间,执行异步方法

1.页面客户长期打开,需要在每天某个时间进行定时刷新数据(执行异步方法)。2.function getProductFileList() {$.ajax({url: MMBS_IP + '/resources/rest/climate/alarm/getProductFileList',type: 'get',async: true,beforeSend: ajaxLoading,success:...

weixin_35851553的博客 663

mvc ajax定时刷新数据库,asp.net Mvc4 使用ajax结合分页插件实现刷新分页

本文为在mvc4中使用ajax实现刷新分页demo,记录一下。解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据。后端控制器处理完后利用PartialView方法把数据返回到分部视图中,利用ViewBag来返回总记录数和pageSize。ajax通过...

weixin_33816685的博客 218

ASP.NET-MVC-Ajax辅助方法

Ajax辅助方法通过“@Ajax”调用,如“@Ajax.ActionLink”,"@Ajax.BeginForm" 使用Ajax时,需要引入库文件 <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 如Script文件夹中存在jquery.unobtrusive-ajax.js

qq_45262877的博客 576

基于ASP.NET MVC 5的婚庆网站开发实战:从架构到部署

在Web开发领域,ASP.NET MVC是一种广泛应用的架构模式,它通过模型(Model)、视图(View)和控制器(Controller)的分离,实现了业务逻辑、数据与用户界面的解耦,从而提升了代码的可维护性和可测试性。这一原理对于构建需要稳定数据管理和动态内容展示的企业级应用,如电商、内容管理系统和展示型网站,具有显著的技术价值。特别是在婚庆服务这类注重案例展示与在线咨询的行业场景中,一个结构清晰、易于扩展的网站是高效获客与专业服务的关键。本文以ASP.NET MVC 5为核心技术栈,结合Entity

weixin_30883311的博客 437

Mvc Html.ActionLink 使用的一些小技巧

1. 如果是链接字体加 css。比如 加红色 @Html.ActionLink("<<最开始一页", "AllMedias","ListenMedia", new { page = 1, sortOrder = ViewBag.CurrentSort, currentFilter=ViewBag.CurrentFilter },new {style="color:...

dee31670的博客 714

mvc ajax教程,MVC3----AJAX辅助方法

===================Ajax.ActionLinkActionLink方法可以创建一个具有一步行为的锚标签。例如:给页面一个链接,点击链接在当前页面显示信息,而是打开一个新的页面--视图代码:@Ajax.ActionLink("ajax",//页面链接名称"GetAjax",//控制器中的方法newAjaxOptions{UpdateTargetId="getajax",...

weixin_26907201的博客 216

asp.net ajax删除数据,Asp.net MVC 2 使用Ajax删除数据

.新建一个Asp.net MVC 2 Empty Web Application..添加一个名叫DataClasses1.dbml的Model,拖放Student表,最后如下图所示..添加一个名叫Home的Controllers..HomeController的Index Action代码如下.public class HomeController : Controller{//// GE...

weixin_42355252的博客 279

ASP.NET MVC如何使用Ajax的辅助方法

前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书笔记,如果那里写的好,还请各位朋友提出来,我们共同学习。1.准备工作   (1)在MVC刚开始学习的时候,我们就需要介绍ASP.NET MVC框架中的HTML的辅助方法,但是这类文章现在已经很多了,...

weixin_30576827的博客 125

mvc ajax 删除数据,.Net MVC4 使用心得(四)分页、Partial View、删除、ajax返回

分页成功后,下面是ajax的页面操作。众所周知,webform中,对数据做了编辑或者删除操作后,只需调用相应控件的DataBind()方法,就可以在页面更新数据。只要将控件和触发器放在updatepanel里,便可以实现无页面刷新ajax数据刷新,可谓easy到妈妈再也用担心。可是到了mvc,似乎一切又回到了最原始的状态,需要手动的提交,通过接口获取刷新后的数据,然后通过js刷新部分页面…… ...

weixin_30045711的博客 276

ASP.NET MVC 项目 EXCEL导出

记录一下在项目中需要用到EXCEL导出功能,详细教程 在本文的开始你需要在UI层添加两个.DLL ICSharpCode.SharpZipLib.dll   和 NPOI.dll 首先在model层添加类 namespace YM.Model.CustomModel {    public  class JiJiaModel     {         public int 

qq_37258636的博客 537

ASP.NET MVC5中局部视图的更新

参考网址: http://cache.baiducontent.com/c?m=9d78d513d98112ef1eb6c7201a17a7224203c5743ca68344398fce1487231b1f483ca5fd65630705a0d8612244ea5e5c9df067346a1420c0ca95d75784ef8f282d8b26367401864110d713a9dc46529b...

jszj的专栏 1813

Ajax.ActionLink接收服务端返回值,根据返回值执行操作

1、切记,页面必需要引用  jquery.unobtrusive-ajax.min.js。 前端 @Ajax.ActionLink("***", "AddItem", "shop", new { t=new Random().NextDouble() }, new AjaxOptions { HttpMethod = "Get

Lucky_For_Us的专栏 1589

微软MVC Ajax简单应用

目标:做一个功能:

邓福勇 1775

MVC3中Ajax.ActionLink用法

首先加载如下代码: &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")

weixin_34235457的博客 130
上一篇: 如何打开计算机无线功能灰色,win10系统下无线开关变成灰色如何解决
下一篇: tl-wdr5620虚拟服务器,TP-Link TL-WDR5620路由器手机怎么设置?
许海平
博客等级 码龄7年 25粉丝 84原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值