【.NET框架】—— MVC5 与jQuery库（四）

喜欢ヅ旅行 2022-11-11 14:46 154阅读 0赞

### 1.1.MVC5引入jQuery库 ###

①直接在项目的script文件夹中拖拽引入；

![1309074-20200807220238561-1308984497.png][]

②使用@Scripts.Render("~/bundles/jquery")注解方式，不限制版本，全局引用；

具体配置：

@Scripts.Render("~/bundles/jquery")

![1309074-20200807220310103-234647663.png][]

这个路径是由MVC5为我们创建的一个虚拟路径，具体路径如下：

![1309074-20200807220322505-1975042991.png][]

### 1.2.MVC5 Ajax.ActionLink参数详解及实例 ###

Ajax.ActionLink语法会生成一个a标签，点击a标签会执行一个Ajax请求。

使用方式：

@Ajax.ActionLink(“显示内容”,”方法”, “控制器名称”, “参数信息”, “属性信息”)

简单使用：

<div id="div1">
        @Ajax.ActionLink("请单击", "About", "Home", new { id = 1, name = "世界你好" }, new AjaxOptions { HttpMethod = "get", UpdateTargetId = "div1" })
    </div>
    //对应的Controller接收name值并显示在界面上
          public ActionResult About(string name)
            {
                ViewBag.Message = name;
    
                return View();
            }

## ##

### 1.3.MVC5 Ajax.BeginForm参数详解与实例 ###

使用Ajax.BeginForm方法会生成一个form表单，最后以Ajax的方式提交表单数据；

使用方式：

@using(Ajax.BeginForm(“方法”,”控制器名称”,参数,属性信息))\{

--- 表单

实例：

<div>
        @using (Ajax.BeginForm("About", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "div1" }))
        { 
        
        <input type="text" name="name1"/>
         <input type="submit" value="请单击" />
        }
    </div>
    //使用get方式进行ajax异步跳转到about路由进行显示
    public ActionResult About(string name1)
            {
                ViewBag.Message = name1;
    
                return View();
            }

## ##

### 1.4.MVC5 Ajax.ActionLink异步调用实例 ###

之前实现的Ajax.ActionLink并没有引入Ajax的相关包，所以不是异步的，这里我们需要实现一个异步的Ajax.ActionLink：

①需要引入相关的js包：

1   jquery-1.10.2.min.js
    2   jquery.validate.min.js //验证
    3   jquery.validate.unobtrusive.min.js //验证辅助包
    4   jquery.unobtrusive-ajax.min.js //ajax辅助包
    5 
    6   其中jquery.unobtrusive-ajax.min.js是默认不存在的，需要安装对应的js包

![1309074-20200807221024964-304123805.png][]

②安装Ajax插件

工具—— NuGet包管理器——程序包管理控制台

输入Install-Package Microsoft.jQuery.Unobtrusive.Ajax -version 3.0.0

![1309074-20200807221041683-292674765.png][]

之后看到script文件夹中已经安装了ajax对应的js包：

![1309074-20200807221055399-1975069672.png][]

③引入对应的Ajax包，并编写路由方法About()，异步传参返回name参数并设置到div2中，实现异步设置值：

![1309074-20200807221130705-60575088.png][]

### 1.5.MVC5 Ajax.BeginForm异步调用的实例 ###

Ajax.BeginForm与Ajax.ActionLink的实际操作类型，都需要引入四个js包，对于Controller部分的参数传递、返回都是一致的，不同的是对于Ajax.BeginForm在View界面的代码及显示效果为form提交刷新效果不一致：

<div>
        @using (Ajax.BeginForm("About", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "div2" }))
        {
            <input type="text" name="name" />
            <input type="submit" value="请单击" />
        }
    </div>
    <div id="div2">
        要修改的东西
    </div>
    
    public ActionResult About()
    {
        ViewBag.Message = "";
    
        return View();
    }
    
    [HttpPost]
    public String About(string name)
    {
        return name;
    }

![1309074-20200807221208865-1379870114.png][]

[1309074-20200807220238561-1308984497.png]: /images/20221022/3c0905c19f8e436eb4c5cfa59a2830f0.png
[1309074-20200807220310103-234647663.png]: /images/20221022/49e80770f5264bfb8f5d94d2949f696d.png
[1309074-20200807220322505-1975042991.png]: https://img2020.cnblogs.com/blog/1309074/202008/1309074-20200807220322505-1975042991.png
[1309074-20200807221024964-304123805.png]: https://img2020.cnblogs.com/blog/1309074/202008/1309074-20200807221024964-304123805.png
[1309074-20200807221041683-292674765.png]: https://img2020.cnblogs.com/blog/1309074/202008/1309074-20200807221041683-292674765.png
[1309074-20200807221055399-1975069672.png]: https://img2020.cnblogs.com/blog/1309074/202008/1309074-20200807221055399-1975069672.png
[1309074-20200807221130705-60575088.png]: https://img2020.cnblogs.com/blog/1309074/202008/1309074-20200807221130705-60575088.png
[1309074-20200807221208865-1379870114.png]: https://img2020.cnblogs.com/blog/1309074/202008/1309074-20200807221208865-1379870114.png