隐藏

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

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

一、使用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 = " "})