“21天好习惯”第一期-8-CSDN博客

本文链接：https://blog.csdn.net/m0_47108321/article/details/121060045

Ajax实现局部刷新效果

Ajax简介

Ajax是Asynchronous JavaScript and XML(异步JavaScript与XML)的缩写。这是在后台请求服务器数据，而不必重载Web页面的一种技术。
ASP.NET MVC 5是一个现代Web框架，并且与其他现代Web框架一样，它从一开始就支持Ajax技术。Ajax支持的核心来自于jQuery。
ASP.NET MVC 5框架中包含了对Ajax的支持。

实现局部刷新

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetDate() {
            return Content(DateTime.Now.ToString());  
        }
      
    }
}

index.cshtml

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="~/Scripts/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn").click(function () {
                    $.ajax({
                    //访问的action
                    url: "/home/getdate",
                        type: "post",
                    //success,但ajax请求成功时，会返回数据，方法中data就是返回的数据
                        success: function (data) {
                            //alert(data);
                            $("#show").html(data);
                    },
                    data: "id=2 & name=23"
                     });
                });
            });

        </script>

    <title></title>
    </head>
    <body>
        @* 点击按钮从服务器获取时间，显示在id为show标签上*@
        <input type="button" id="btn" value="获取时间" />
        获取到的时间;
        <div id="show" style="width:300px;height:30px; border:1px dotted silver"></div>


    </body>
</html>

使用Ajax.ActionLink

Ajax辅助方法
同样可以用于创建表单和指向控制器操作方法的链接，但不同的是，它们与服务器采用的是Ajax(异步交互)方式
当使用Ajax辅助方法时，无须编写任何脚本代码即可实现程序的异步性。■脚本
使用Ajax辅助方法必须先引入jQuery.unobtrusive-ajax.js■此文件默认包含在ASP.NET MVC应用程序模板中。

insterAfter：刷新在数据后面进行插入

insterBrfore：刷新在数据前面插入

Replace：刷新替换之前的数据

index.cshtml

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        function msg(data) {
            alert(data);
        }

    </script>
    <title></title>
</head>
    <body>
        @* 点击按钮从服务器获取时间，显示在id为show标签上*@
        <input type="button" id="btn" value="获取时间" /><br />
        @Ajax.ActionLink("获取时间新方法","getdata","home",new AjaxOptions { 
            Confirm="确认要提交吗？",
            HttpMethod="post",
            InsertionMode=InsertionMode.Replace,
           // OnSuccess="msg",
            UpdateTargetId="show"
        })
    <br />
        获取到的时间;
        <div id="show" style="width:300px;height:30px; border:1px dotted silver"></div>


    </body>
</html>

HomeComtroller.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxDemo.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetDate() {
            return Content(DateTime.Now.ToString());  
        }
        public ActionResult UserRegister(string UserName,string Password)
        {
            System.Threading.Thread.Sleep(3000);
            ViewBag.name = UserName;
            ViewBag.pwd = Password;
            //将result视图的内容作为返回值，返回给id为show的一个div标签
            //PartialView分部视图
            // view
            return PartialView("result");
        }


    }
}

index.cshtml

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        function msg(data) {
            alert(data);
        }

    </script>
    <title></title>
</head>
<body>
    @* 点击按钮从服务器获取时间，显示在id为show标签上*@
    @using (Ajax.BeginForm("UserRegister", "home", null, new AjaxOptions()
        {
            Confirm = "确定注册嘛?" ,
            HttpMethod="post",
            InsertionMode = InsertionMode.Replace,
            LoadingElementId = "loading",
            UpdateTargetId = "show"

    } ))
    {
    <table class="table table-bordered table-hover">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="UserName"  /></td>
        </tr>
        <tr>
            <td>密码: </td>
            <td><input type="password" name="Password"  /></td>
        </tr>
        <tr >
            <td colspan="2"><input type="submit" value="注册" /></td>
        </tr>
    </table>

    }
    <br />
    获取到的时间;
    @*loading标签用于展示加载效果：show标签用于展示ajax请求返回的数据内容*@
    <div id="loading" style="display:none">数据加载中......</div>
    <div id="show"></div>


</body>
</html>

Result.cshtml

@{
    ViewBag.Title = "Result";
    string name = ViewBag.name;
    string password = ViewBag.pwd;
}
<div>
    <h2>结果</h2>
    <p>你注册的名称是:@name</p>
    <p>你注册的密码是:@password</p>
</div>

实例

包含查询字段