MVC4 简单异步演示

发布时间：2020-12-16 01:57:59 所属栏目：百科来源：网络整理

导读：MVC中的异步提交有两种方法，一种是JQuery方式，一种是MVC中自带的Ajax.BeginForm方式，两种都可以实现异步提交与刷新 JQuery.Ajax Controllers代码 public ActionResult Index() { return View(); } public ActionResult GetDate() { //获取参数信息 string

MVC中的异步提交有两种方法，一种是JQuery方式，一种是MVC中自带的Ajax.BeginForm方式，两种都可以实现异步提交与刷新

JQuery.Ajax

Controllers代码

  public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetDate()
        {
            //获取参数信息
            string id = Request["id"].ToString();
            string name = Request["name"].ToString(); 
            return Content("用户："+name+" 时间:"+ DateTime.Now.ToString());
        }

View页面代码

@{
    ViewBag.Title = "Index";
}
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    @*使用JQuery的异步方式获取后台的信息*@
    <script type="text/javascript">
        $(function () {
            $("#btnJQ").click(function () {
                //从后台获取时间
                $.ajax({
                    url: "/Ajax/GetDate",//请求地址
                    type: "Get",//请求的类型
                    success: function (data) {  //成功后的回调函数
                        alert(data);
                    },data: "id=1&name=信息"//传递的数据
                });               
            });
        });
    </script>
</head>
<body>
    <h2>Ajax页面</h2>
    <div>
        <input type="button" id="btnJQ" value="显示后台返回的数据" />
    </div>
</body>
</html>

Ajax.BeginForm

Controllers代码

 public ActionResult MicrosoftAjax()
        {
            return View();
        }

        public ActionResult ReData()
        {
            //获取参数信息           
            string sname = Request["UserName"].ToString();
            //让网站睡眠1秒钟
            //System.Threading.Thread.Sleep(1000);
            return Content("用户名：" + sname);
        }

View页面代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MicrosoftAjax</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        function afterSuccess(data) {
            //数据执行成功后，触发的事件
            alert(data);
        }
    </script>
</head>
<body>
    <div>
        @using (Ajax.BeginForm("ReData","Ajax",new AjaxOptions()
        {
            Confirm = "您是否要提交吗？",HttpMethod = "Post",InsertionMode = InsertionMode.Replace,UpdateTargetId = "result",OnSuccess = "afterSuccess"
        }))
        {
            <div>
                用户名：<input type="text" name="UserName" /><br />
                密码：<input type="text" name="Pwd" /><br />
                <input type="submit" value="提交" />
            </div>
        }

        <div id="result">
            这个是要显示结果的div
        </div>
        
    </div>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!