ASP.NET實戰006:MVC使用 Ajax數據傳遞

前面通過 我們瞭解了ASP.NET MVC模型中模型(model)、視圖(view)、控制器(controller)之間的數據傳遞方法,ASP.NET MVC支持Model、ViewBag、ViewData、TempData、JqGrid插件、Ajax等多種方式發送數據。而在我們實際的開發過程中,使用ViewData和ViewBag等方式在Controller與View間進行數據傳遞存在著類型轉換的問題,容易編譯出錯這樣不僅影響服務器性能,而且存在安全問題同時也破壞了Controller與View的低耦合原則。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

為了降低Controller與View的耦合性,同時提高服務器的性能,實現真正的前後端分離,我們有必要對MVC模式進行改進。之前用用Vue+Django+MySQL做前後端分離項目的時候都是通過Axios技術實現數據請求的,這樣我們同樣可以藉助這個邏輯,通過Ajax發送請求,當服務端接受該請求後將處理的數據通過JSON數據格式返回給視圖,最後通過瀏覽器渲染呈現給用戶。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

什麼是Ajax

Ajax 是一種針對Web 服務器開發的Web應用程序的技術,可以實現瀏覽器與 Web 服務器之間異步數據傳輸(HTTP 請求),它的特點就是無需重新加載整個網頁的情況下能夠進行局部數據更新。當網頁每次從服務器只需請求對應的信息進行局部更新,而不用刷新整個網頁,這樣不僅可以減少服務器壓力,也可以節省帶寬,提高響應速度,增強用戶體驗。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

MVC中使用 Ajax

由於MVC實現了前後端分類,所以在前端使用Ajax很簡單,我們利用JQuery就可以輕鬆的實現Ajax,它對 Ajax 做了大量的封裝分別是$.ajax()、$.load()、$.get()、$.post()、$.getScript()和$.getJSON()方法。使用的時候我們只要引入JQuery文件,在需要的地方使用對應的方法即可。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

登錄示例

這裡我們實現個簡單的登錄功能,在Login頁面輸入用戶名和密碼,驗證通過之後跳轉頁面Dome頁面。前端我們寫個簡單的登錄,用3個input元素構建,類型分別是text、password、submit,樣式我們先忽略主要實現功能。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

通過點擊登錄按鈕來觸發Ajax請求,這裡的@section>

ASP.NET實戰006:MVC使用 Ajax數據傳遞

後臺接收數據,這裡我寫個簡單的數據接收及驗證,為了更容易理解暫時不進行數據庫交互,先理解邏輯當從前端獲取到的數據與我們指定的數據相符時我們就認為驗證成功,反之則失敗。這裡的response是我定義的一個實例對象,用來返回處理狀態和結果的。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

運行效果

到這裡我們就實現了一個簡單的登錄功能測試了,通過Ajax實現了簡單的數據交互,而且我們可以看到局部刷新的。這也是Ajax的特點,可以與服務器進行異步通信從而實現局部刷新的。同時Ajax會對數據進行過濾,只有確定需要從服務器讀取新數據時,Ajax引擎才會向服務器提交請求。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

補全數據庫操作

前面我把數據庫給先忽略了,這樣理解起來就簡單了些,現在我把數據庫補全,具體如何操作數據庫可以參考 , 這裡我創建一個MysqlHelper類來專門處理數據庫操作,這裡的GetDataTable方法用來返回一個DataTable數據表。

ASP.NET實戰006:MVC使用 Ajax數據傳遞

接著我們修改下LoginController中的confirm方法,實例化MysqlHelper類,去數據庫中查找我們從前端獲取的用戶名和密碼(這裡我暫時沒做密碼加密處理,所以數據庫中密碼暫時是明文,可以直接查詢),GetDataTable方法會給我們返回查詢結果,如果存在則說明是已註冊用戶則驗證成功允許頁面跳轉,否則驗證失敗。

public JsonResult confirm(string user,string pwd)
{
UserInfo consumer = new UserInfo();
consumer.username = user;
consumer.password = pwd;
MysqlHelper sql = new MysqlHelper();
response rsq = new response();
DataTable dt = sql.GetDataTable(string.Format("select * from user where username='{0}' and password='{1}'", consumer.username, consumer.password));
if (dt != null)
{
rsq.state = true;
rsq.message = "驗證成功!";
}
else
{
rsq.state = false;
rsq.message = "驗證失敗!";
}
return Json(rsq);
}
ASP.NET實戰006:MVC使用 Ajax數據傳遞


分享到:


相關文章: