mvc 异步请求、异步连接、异步表单

》》》 利用Jquery ajax

》》》 mvc 异步表单

c# MVC 添加异步 jquery.unobtrusive-ajax.min.js 方法

具-->Nuget程序包管理器-->程序包管理器控制台

在控制台输入:PM>Install-Package Microsoft.jQuery.Unobtrusive.Ajax --version 3.0.0

回车执行即可在Scripts中看到改js文件

2、html代码 及视图代码

html 复制代码
<style type="text/css">
        #imgLoad {
            display: none;
        }
    </style>

@using (Ajax.BeginForm("Login_Ajax", "Login", new AjaxOptions {
 Confirm = "你是否确定要提交", 
 HttpMethod = "post", 
 InsertionMode = InsertionMode.InsertAfter,
 UpdateTargetId = "视图中html元素的ID", //  返回的信息,填充在这个ID中。
 OnSuccess = "back", //成功之后 方法的 js函数
 LoadingElemId="imgLoad" //视图中html元素的ID  一边服务器处理耗时,显示这个图片,请求之前是不显示的,请求显示,成功返回,就不显示了"
  }))
            {
               <table border="0" cellpadding="0" cellspacing="2">
                <tr>
                    <td width="330" height="331"> </td>
                    <td width="145"> </td>
                    <td width="62"> </td>
                    <td width="119"> </td>
                </tr>
                   
                <tr>
                    <td height="29"> </td>
                    <td>@Html.TextBoxFor(s => s.UserName, new { @tabindex = "1", @class = "login_text" })</td>
                    <td rowspan="2">
                        <button id="btnLogin" tabindex="3" class="button_1" type="submit" />
                    </td>
                    <td rowspan="2">@Html.ActionLink("注册账号", "Register") </td>
                </tr>
                <tr>
                    <td height="26"> </td>
                    <td>@Html.PasswordFor(s => s.PassWord, new { @tabindex = "2", @class = "login_text" })</td>
                    
                </tr>

                
            </table>
                
            }

 <div id="imgLoad">加载中~~~(一边是gif照片)</div>



VIEW 代码

html 复制代码
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <style type="text/css">
        #imgload {
            display:none;
        }
    </style>
    <script type="text/javascript">

        function suc(data)
        {
            //  成功回调函数
        }
        function fal(data)
        {
             //  失败回调函数
        }
    </script>
</head>
<body>
    <div>        
      
        <hr>
        @Ajax.ActionLink("获取时间", "GetDateTime", new AjaxOptions
        {
          Confirm="你确定获取数据",
          HttpMethod="Post",
          LoadingElementId="imgload",
          InsertionMode = InsertionMode.InsertBefore,
          UpdateTargetId = "rst",
          OnSuccess="suc",
          OnFailure="fal"
        })
        <hr />
        <p>
            <label id="rst"></label>
        </p>
        <h1>异步表单:</h1>
        @using (Ajax.BeginForm("GetDateTime", "Home", new AjaxOptions()
        {
            //提交请求的方法
            HttpMethod = "post",
            //成功时执行的异步函数
            OnSuccess = "suc",
            OnFailure = "fal",
             InsertionMode = InsertionMode.InsertBefore,
            UpdateTargetId = "rst",
            //请求时加载的图片
            LoadingElementId = "imgload"
        }))
        {
            <input type="text" name="txtName" />
            <input type="submit" />
            
        }
       
        <img id="imgload" src="~/imgs/load.gif" />
       
    
    </div>
</body>
</html>

Controller

相关推荐
Lucky me.1 天前
本地maven添加jar包
okhttp·maven·jar
阑梦清川2 天前
SpringMVC案例学习(二)--表白墙/图书管理系统1.0版本
spring·mvc·springboot·案例
网安_秋刀鱼2 天前
PHP代码审计 --MVC模型开发框架&rce示例
开发语言·web安全·网络安全·php·mvc·1024程序员节
HaiFan.2 天前
Spring MVC
java·spring·mvc
源码12152 天前
Asp.net Mvc 电脑销售系统
后端·asp.net·mvc
少说多做3432 天前
Android 网络请求(二)OKHttp网络通信
android·网络·okhttp
计算机毕设定制辅导-无忧学长3 天前
《深入理解 Spring MVC 工作流程》
java·spring·mvc
潜洋3 天前
Spring Boot教程之三:Spring Boot 与 Spring MVC 及 Spring的区别
java·spring boot·spring·mvc
清酒伴风(面试准备中......)3 天前
Spring MVC——针对实习面试
java·后端·spring·面试·mvc·实习
ac-er88884 天前
ThinkPHP6的ORM模型
开发语言·php·mvc