[原创]Asp.net Mvc异步

MainContent：Jquery异步，Asp.net Mvc异步完成：点击按钮更新时间

Jquery异步实现

新建一个AjaxController，在index视图下：

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#btn_time").click(function() {
            $.ajax({
                url: "/Ajax/Data",    //请求Ajax控制器下的Data方法，所以我们应该在控制器下编写该Data方法来返回时间
                type: "post",
                data: {},
                success:function(data) {
                    $("#showTime").html(data);
                }
        });
        });
    })
</script>
<h2>Index</h2>
<input type="submit" value="更新时间" id="btn_time"/>
<label class="text-success" id="showTime"></label>

在Controller下新建一个Data方法

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

namespace Asp.netMvc_2017_03_10.Controllers
{
    public class AjaxController : Controller
    {
        // GET: Ajax
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Data()
        {
            return Content(DateTime.Now.ToString());  //返回当前时间
        }wei
    }
}

Asp.net Mvc 异步实现

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
//1，需要调用这个js，如果你的Scripts文件夹下没有的话需要通过Nuget安装：
//Install-Package Microsoft.jQuery.Unobtrusive.Ajax 
//2，需要在Web.config文件的<appSettings></appSettings>里面添加一条：
//<add key="UnobtrusiveJavaScriptEnabled" value="true" />


<script type="text/javascript">
    function FunSuccess(data) {
        $("#mvc_showTime").html(data);
    }
</script>

@*Asp.net Mvc异步*@
@using (Ajax.BeginForm("Data","Ajax",new AjaxOptions()
{
    Confirm = "是否确认提交",
    HttpMethod = "post",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "FunSuccess"
  //还有很多其他的属性这里没有一一列举
}))
{
    //<input type="text" id="mvc_text"/>
    <input type="submit" id="btn_mvc_time"/>
}

<label class="text-danger" id="mvc_showTime"></label>

效果

结果.gif

安利一枚非常好用的屏幕录制Gif的软件：​​Screen to gif​​ 免费！！！非常奈斯

<b>~谢谢O(∩_∩)O</b>