网络编程 Asp编程 Php编程 CodeIgniter .Net编程 Xml编程 VB编程 asp.net(c#) 支付接口 PayPal 支付宝 iOS开发 Android Xamarin.Android Android Studio ORM Dapper 其他 IbatisNet MVC WCF 微信开发 微信小程序 WPF Solr SignalR CMD xarmin.android Tesseract ASP.NET Core Vue VsCode JAVA Tomcat spring mvc MyBatis JDBCTemplate Dubbo swagger IDEA HSSFWorkbook Spring Cloud HBuilderX AI .net core AutoMapper SqlSugar IdentityServer4 Razor Blazor Redis Quartz NPOI HSSFWorkbook DevExpress 分布式存储技术 LINQ RabbitMQ 淘宝客 Dockerfile cron表达式 阿里云OSS服务 JWT SolrNet AngleSharp Elasticsearch perl Golang AutoJs adb appium python bat c Smobiler Power apps Power Bi 开发PCF RTSP视频推流服务器 OutSystems echarts 服务器 Web服务器 Ftp服务器 Mail服务器 Dns服务器 Win服务器 Linux服务器 安全防护 系统激活 wifi SVN服务器 虚拟机 Flash Media Server IIS服务器 ngrok服务器 分布式系统 版本控制系统 Git 监控系统 Nginx zookeeper SolrCloud node Nacos Docker PHP服务器 Web前端 Jquery js AJAX EasyUI CSS HTML 自适应/响应式 HTML5 地图API MP3 编辑器 UEditor 插件 highcharts SVG Bootstrap layer Element React Ant Design Nextjs yarn 软件开发 winform BAT编程 项目管理 数据模型工具 PowerDesigner PDMan UML流程图 物联网 开发工具 Flash工具 VS2010 VS2012 VS2017 VS2019 wget 抓包工具 Eclipse IntelliJ Idea VS2022 cmder 网络攻击 CC攻击 数据库 Access Mssql Mysql SQLite php_sqlsrv Oracle MongoDB NOSql Redis 设计在线 酷站推荐 网页设计 WEB标准 视频处理 设计活动 网站运营 建站经验 策划盈利 SEO优化 网站推广 淘宝秘籍 短信通道 新闻资讯 业界动态 收购融资 门户动态 搜索引擎 网络游戏 电子商务 广告传媒 厂商开发 手机应用 各业合同 法律法规 名词解释 钓鱼技巧 百科知识 理财 生肖星座 操作系统 windows xp sp3 windows server 2008 win10 windows server 2016 windows11 Linux 图形图像 Photoshop教程 illustrator教程 CAD设计教程 开放平台 腾讯 新浪 手机应用 小米手机 魅族手机 装修 壁纸施工 防水技术 室内平面设计 蹲便器 卫生间 CAD室内三维图形 装修知识 学生学习资料库 小学生学习资料库 初中生学习资料库 高中生学习资料库 搜索引擎 百度 360 搜狗 神马 头条 集群搭建 Hadoop集群 k8s集群 平台架构 SaaS 测试工具 JMeter 大数据 站长在线 好站推荐 联盟资讯 联盟新闻 联盟介绍 联盟点评 网赚技巧
隐藏

在ASP.NET中MVC两种Ajax方法实现无刷新验证实例

发布:2023/2/4 14:20:09作者:管理员 来源:本站 浏览次数:699

一、使用Ajax.ActionLink


1.Ajax辅助方法:同样可以用于创建表单和指向控制器操作方法的链接,但不同的是,它们与服务器采用的是Ajax(异步交互)方式。


2.当使用Ajax辅助方法时,无须编写任何脚本代码即可实现程序的异步性。


3.脚本使用:


   使用Ajax辅助方法必须先引入jQuery.unobtrusive-ajax.js此文件默认包含在http://ASP.NET MVC应用程序模板中。


4.Ajax辅助方法通过“@Ajax”调用,如“@Ajax.ActionLink”、“@Ajax.BeginForm”


5.Ajax.ActionLink方法


   可以创建一个具有异步行为的超链接。ActionLink方法的第一个参数是超链接的文本,第二个参数是操作方法的名称。ActionLink方法可以通过设置AjaxOptions对象的属性值来调整Ajax请求的行为


6.AjaxOptions对象能够配置对服务器的异步请求以及处理返回的数据

强类型辅助方法 说明

Confirm 获取或设置提交请求之前,显示在确认窗口中的消息

HttpMethod 获取或设置HTTP请求方法(“GET”或“POST”)

InsertionMode 获取或设置指定如何将响应结果插入到目标DOM元素的模式

LoadingElementId 获取或设置加载时要显示的HTML元素的id属性值

OnBegin 获取或设置更新页面之前调用的JavaScript函数的名称

OnComplete 获取或设置数据响应之后、更新页面之前,调用的JavaScript函数

OnFailure 获取或设置页面更新失败时调用的JavaScript函数

OnSuccess 获取或设置页面更新成功之后调用的JavaScript函数

UpdateTargetId 获取或设置要使用服务器响应来更新的DOM元素的id

Url 获取或设置要向其发送请求的URL


使用示例:(视图页)


  <script src="~/Scripts/jQuery-3.3. 1.min.js"></script>

 <script src="~/Scripts/jQuery.unobtrusive-ajax.min.js"></script>

<body>

   <div id="div1">

       @Ajax.ActionLink("显示小组名单","Go",new AjaxOptions {UpdateTargetId="div1",InsertionMode=InsertionMode.Replace,HttpMethod="Get" })

   </div>


<div style="font:bold 20px; color:blue;">

@foreach (var a in ViewBag.Items)

{

@a  <br />

}

</div>

</body>


(控制器):


public class HomeController : Controller

{

public ActionResult Go()

{

ViewBag.Items = new string[] { "张三", "李四", "王五", "钱三", "老六" };

// 分部视图_Partial1.cshtml

return PartialView("_Partial1");

}

}


注意:


   若创建的http://ASP.NET MVC5项目里不包含jQuery.unobtrusive-ajax.min.js文件,可以直接去官网下载使用,也可以使用Nuget程序包管理或其控制台安装进来。管理解决方案的Nuget程序包安装=>工具-》Nuget包管理器-》管理解决方案的Nuget程序包


二、使用Ajax.BeginForm(异步表单)


1、提交到当前页面,提交方式为Post,异步更新模块ID为UserContainer


Ajax.BeginForm( new AjaxOptions{

         UpdateTargetId = "UserContainer", //替换元素id

         HttpMethod = "Post",  // 提交方式

         OnSuccess = " "})     //成功执行的方法


2、提交到指定控制器下的操作方法,提交方式为Post,异步更新模块ID为UserContainer


Ajax.BeginForm("action", "controller", null, new AjaxOptions{

UpdateTargetId = "UserContainer",

HttpMethod = "Post",

OnSuccess = " "})