MVC學習筆記之使用JQuery方式傳送Ajax請求呼叫後臺Controller

阿新 • • 發佈：2019-01-15

通常情況下在MVC模式中我們會採用使用controller獲取業務資料（model）並將業務資料提交給view，或者由view傳遞資料給controller，再由controller更新model。在一些簡單的頁面中可以直接使用Model-->action-->View方式，但如果頁面較為複雜包含多個model及多個分部頁面時為了實現頁面資料的區域性重新整理就需要使用ajax特性，為此需要學習如何使用JQuery獲取頁面資料，並通過ajax傳送請求後臺controller，並返回不同型別的result。

先介紹一個簡單的實用例項，例項實現通過訪問使用者組檢視選擇的使用者組下的所屬使用者，本例項將建立一個treeview，通過選擇節點呼叫後臺資料返回該節點的使用者資訊。

本例項略過EF過程，先看Controller

[HttpPost]
        public JsonResult GetGroup()
        {
            var result = T_GROUPService.GetT_GROUPAllList();
           JsTreeModel rootNode = new JsTreeModel();
           PopulateTree(null, (List<T_GROUP>)result.AppendData, rootNode);
           return Json(rootNode);
            
        }
      public void PopulateTree(string id, List<T_GROUP> list, JsTreeModel node)
      {
          if (node == null)
              node = new JsTreeModel();
          foreach(var u in list.Where(p=>Equals(p.PARENTID,id)).OrderBy(o=>o.NORDER))
          {
              JsTreeModel node1 = new JsTreeModel();
              node1.id = u.ID;
              node1.grouptype = u.GROUPTYPE;
              node1.text = u.GROUPNAME;
              node.nodes.Add(node1);
              PopulateTree(u.ID, list, node1);
          }
      }

public class JsTreeModel
    {
        public string id;
        public string grouptype;
        public string text;
        public List<JsTreeModel> nodes = new List<JsTreeModel>();
    }

此方法通過獲取group資料生成json格式樹返回給view，過程很簡單，不多解釋，直接看View

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-treeview.css" rel="stylesheet" />
    <script src="@Url.StaticFile("~/Scripts/jquery-1.10.2.js")"></script>
    <script src="@Url.StaticFile("~/Scripts/bootstrap.js")"></script>
    <script src="@Url.StaticFile("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
    <script src="@Url.StaticFile("~/Scripts/bootstrap-treeview.js")"></script>
   

</head>

由於用到了bootstrap-treeview，所以先新增相關引用，本例項是簡單例項並未使用佈局頁，bootstrap-treeview資料格式如下

var tree = [
  {
    text: "Parent 1",
    nodes: [
      {
        text: "Child 1",
        nodes: [
          {
            text: "Grandchild 1"
          },
          {
            text: "Grandchild 2"
          }
        ]
      },
      {
        text: "Child 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  },
  {
    text: "Parent 4"
  },
  {
    text: "Parent 5"
  }
];

由此可以看出此資料格式是一個json格式的一個數組物件，那麼對應我們需要提供的資料也必須是json格式的陣列物件，這裡要注意上面我們的GetGroup方法返回的是一個json格式的物件例項而非陣列，我在走了很多彎路才發現居然和bootstrap-treeview要求的型別不一致。再來看看bootstrap-treeview的呼叫方法。

function getTree() {
    // Some logic to retrieve, or generate tree structure
    return data;
}
 
$('#tree').treeview({data: getTree()});

好了，基本的呼叫方法和資料格式知道了後開始我們的view設計

<div class="row">
            <div id="tree" class="col-sm-4">

            </div>
            <div id="user" class="col-sm-8">
                
            </div>
        </div>

定義一個treeview的div和一個顯示user的div，下面開始編寫指令碼，首先看看獲取樹的方法

function getTree() {
            var tree ;
            $.ajax({
                type: 'POST',
                url: "/Auth/GroupManager/GetGroup",
                dataType: 'json',
                async:false,
                success: function (responseData) {
                    tree= responseData.nodes;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {//請求失敗處理函式
                    console.log("請求失敗，無法獲取分組資料");
                }
            });
            return tree;
            
        }

        $('#tree').treeview({
            data: getTree(),
            nodeIcon: "glyphicon glyphicon-user",
            backColor: "#FFFFFF"
        });

$('#tree')獲取id為tree的div，然後指定treeview下的各屬性，其中data屬性使用了一個方法getTree進行呼叫獲取資料

在getTree方法中使用ajax呼叫後臺名為 GroupManager的controller下的名為GetGroup的action（即上面的方法注意指定了post標記），資料型別datatype則指定為‘json’型別，此處採用的是同步模式，即設定async：false。下面是如果呼叫成功則執行success中指定的回撥函式，此函式的引數即是返回的結果，由於我們前面返回的是一個json物件，所以將此物件下的所有節點作為陣列返回給treeview。如果呼叫失敗則執行error中指定的回撥函式，其中XMLHttpRequest可檢視具體的錯誤資訊，供除錯使用。

到此一個使用者組的樹檢視即完成，下面將實現點選節點查詢節點下的使用者，同樣是使用jquery的ajax方式傳送請求，然後通過載入一個分部檢視來替換名為user的div物件。

先看看分部檢視

@model IEnumerable<URS.Data.Contract.T_USER>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.SFZHM)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PASSWORD)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SSDW)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.XM)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.SFZHM)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PASSWORD)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SSDW)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.XM)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

一個很簡單的分部檢視，Model使用的是列表，再來看看呼叫該分部檢視的action

[HttpPost]
        public ActionResult GetUserByGroupID(string groupID)
        {
            var result = this.T_USERService.T_USERRepository.Entities.Include("Group").Where(p => Equals(p.Group.ID, groupID));
            //return Json(result.AppendData);
            return PartialView("GetUserList", result);
        }

同樣也是很簡單的一個查詢，使用了一個groupID的引數，這樣就需要我們在ajax請求時傳遞一個group的id

$('#tree').on('nodeSelected', function (event, node) {
            var guid = node.id;
            $.ajax({
                type: 'POST',
                url: "/Auth/UserManager/GetUserByGroupID",
                data:{groupID:guid},
                dataType: 'html',
                async: false,
                success: function (responseData) {
                    $('#user').html(responseData);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {//請求失敗處理函式
                    console.log("請求失敗，無法獲取分組資料");
                }
            });
            
        });

呼叫方法使用的是jquery方式，事件nodeSelected，繫結的回撥函式有兩個引數，其中第二個引數即是點選的node物件，可以很容易取得該物件的屬性值。下面看看ajax的請求：和上面請求有所不同的是需要加入一個引數，即data屬性，同樣也是以json格式進行傳遞，另外由於返回的是分部頁面，所以返回的資料型別datatype為html，呼叫成功回撥方法中將實現用返回值替換名為user的div物件。看看結果：

整個應用非常簡單，其邏輯也很簡單，重點實現了由以jquery方式傳送ajax請求到後臺的controller來執行，此例項提供了一種傳送請求返回Json資料的實現過程，同時提供了一種解決如何傳遞頁面資料到後臺並返回頁面的解決辦法。此方法不同於我們簡單的在controller中通過action返回view的方式，個人認為這種方法更據代表性，實現更靈活，同時充分利用了ajax的特性實現了局部資料的重新整理。當然microsft也提供了一些ajaxhelper方法實現ajax的呼叫，今後有空再研究吧。

示例很簡單，但卻提供我們常用的業務模型的一種解決方案，作為新手如果沒接觸過jquery，ajax，mvc的話，那麼此例項還是很有參考價值。

MVC學習筆記之使用JQuery方式傳送Ajax請求呼叫後臺Controller

MVC學習筆記之使用JQuery方式傳送Ajax請求呼叫後臺Controller

鋒利的JQuery學習筆記之JQuery

鋒利的jQuery學習筆記之jQuery選擇器

jquery的get方式傳送AJAX請求

jquery的post方式傳送AJAX請求

jquery的ajax方式傳送AJAX請求

ExtJS5.1學習筆記9——Ext中的Ajax請求

頁面通過jquery上的ajax請求到後臺通過POI匯出Excel的問題

jquery如何通過ajax請求獲取後臺資料顯示在表格上

jQuery學習筆記之ajax

Linux學習筆記之1——文件和目錄管理（硬連接和軟連接）(連結檔,相當於快捷方式）

jquery Select2 學習筆記之中文提示 - CSDN部落格

Linux學習筆記之1——檔案和目錄管理（硬連線和軟連線）(連結檔,相當於快捷方式）

Java Web 學習筆記之十二：JBoss RestEasy處理跨域OPTIONS請求方式

Ajax基礎學習筆記三—jQuery實現Ajax

Spring MVC學習筆記3，三種對映方式得到Handler

STM32學習筆記之ADC--DMA方式

jquery學習筆記之事件繫結on與事件解綁off用法

學習筆記之qt4程式中引入自定義視窗部件之多繼承方式

jQuery學習筆記之事件

MVC學習筆記之使用JQuery方式傳送Ajax請求呼叫後臺Controller

相關推薦