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>