AngularJs調用NET MVC 控制器中的函數進行後臺操做

時間 2019-11-11

標籤 angularjs 調用 mvc 控制器函數進行後臺欄目 AngularJS 简体版

原文原文鏈接

題目中提到的控制器指的是.NET MVC的控制器，不是angularjs的控制器。html

首先看主頁面的代碼：angularjs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.staticfile.org/angular.js/1.7.5/angular.min.js"></script>
    <style>
        .out {
            height: 500px;
        }

        .top {
            background-color: lawngreen;
            height: 20%;
        }

        .content {
            display: flex;
            height: 70%;
        }

        .left {
            background-color: aqua;
            width:30%;
        }

        .right {
            width:70%;
            background-color: beige;
        }

        .foot {
            height: 10%;
            background-color: blueviolet;
        }
    </style>
    
</head>
<body>
    <div class="out" ng-app="App" ng-controller="Parents2Ctl">
        <div class="top">{{PublicArea1}}
            <div>
                <input type="button" value="Get調用後臺" ng-click="btn1()" />
                <input type="button" value="Get傳參調用後臺" ng-click="btn2()" />
                <input type="button" value="Get傳參調用後臺,獲取對象返回值" ng-click="btn3()" />
                <input type="button" value="post調用後臺" ng-click="btn4()" />
                <input type="button" value="post傳參調用後臺" ng-click="btn5()" />
                <input type="button" value="post傳參調用後臺,獲取對象返回值" ng-click="btn6()" />
            </div>
        </div>
        
        <div class="content">
            <div ng-include="'Childrens/LeftChild.html?v=3'" class="left"></div>
            <div ng-include="'Childrens/RightChild.html'" class="right"></div>
        </div>
        <div class="foot">{{PublicArea2}}</div>
    </div>
    <script src="Parents2.js?v=2"></script>
    <script src="Childrens/Left.js?v=2"></script>
    <script src="Childrens/Right.js"></script>
</body>
</html>

頁面中，仍是經過ng-include的方式引入了子頁面，同時對各個部分的html，下面引入了對應的js腳本文件。json

Parents2.js：mvc

var publicData;
var App = angular.module('App', []);
App.controller('Parents2Ctl', function ($scope, $http) {
        $scope.PublicArea1 = "公共區域頂部";
    $scope.PublicArea2 = "公共區域底部";
    $scope.btn1 = function () {
        $http.get("/Home/Test1").then(function (response) {
            alert(response.data);
        });
    }
    $scope.btn2 = function () {
        $http.get("/Home/Test2?name=Join&address=adaww.efw").then(function (response) {
            alert(response.data);
        });
    }
    $scope.btn3 = function () {
        $http.get("/Home/Test3?txt=Join").then(function (response) {
            alert(response.data.name);
        });
    }
    $scope.btn4 = function () {
        $http.post("/Home/Test1").then(function (response) {
            alert(response.data);
        });
    }
    $scope.btn5 = function () {
        $http.post("/Home/Test2", { name: 'Join', address:'adaww.efw'}).then(function (response) {
            alert(response.data);
        });
    }
    $scope.btn6= function () {
        $http.post("/Home/Test4", {txt:'Join'}).then(function (response) {
            alert(response.data.name);
        });
    }
    });

在主頁面的js腳本中定義了一個公共變量publicData，用來在各個js腳本中傳值。app

這裏主要是經過$http的get和post來訪問mvc控制器中的函數。在Home控制器中，有如下的函數：異步

  public string Test1()
        {
            return "Hello World!";
        }
        public string Test2(string name,string address)
        {
            return $"Hello {name}!Your famally in {address}";
        }
        public JsonResult Test3(string txt)
        {
            var t= new MT() { name = txt, age = 2, sex = "男" };
            //當用get方式訪問返回類型是JsonResult函數的時候，下面的json必須在第二個參數賦值 JsonRequestBehavior.AllowGet
            return Json(t, JsonRequestBehavior.AllowGet);
        }
        public JsonResult Test4(string txt)
        {
            var t = new MT() { name = txt, age = 2, sex = "男" };           
            return Json(t);
        }

這樣主頁面就完成了，運行效果：函數

LeftChild.html：post

<div ng-controller="LeftCtr">
    <h2>{{LeftTitle}}</h2>
    <input type="button" value="向右側傳值" ng-click="setValue()" />
    <div>
        <input type="button" value="Get調用後臺" ng-click="service_btn1()" />
        <input type="button" value="Post調用後臺" ng-click="service_btn2()" />
    </div>
</div>

Left.js：flex

App.controller('LeftCtr', function ($scope,  Home) {
    $scope.LeftTitle = "左側菜單";
    $scope.setValue = function () {
        publicData = '來自左側的值';
    }

    $scope.service_btn1 = function () {
        var t= Home.Get("Test1");
    }
    $scope.service_btn2 = function () {
        var t = Home.Post("Test2", { name: 'Join', address: 'adaww.efw' });
    }
});

App.service("Home", function ($http) {
    this.Get = function (ActionName) {
        //這裏走的是異步
        $http.get("/Home/" + ActionName).then(function (response) {
            alert(response.data);
        });
        return "OK";
    }
});
App.service("Home", function ($http) {
    this.Post = function (ActionName,para) {
        //這裏走的是異步
        $http.post("/Home/" + ActionName,para).then(function (response) {
            alert(response.data);
        });
        return "OK";
    }
});

在子頁面left的js腳本中，經過自定義服務的方式來訪問後臺，其本質仍是$http的get和post。this

RightChild.html：

<div ng-controller="RightCtr">
    <input type="button" value="顯示來自左側的值" ng-click="getValue()" />
    <ul>
        <li ng-repeat="x in books">{{x}}</li>
    </ul>
    <h1>{{formLeftData}}</h1>
</div>

Right.js：

App.controller('RightCtr', function ($scope) {
    $scope.books = ['言情小說', '武俠小說', '玄幻小說', '修真小說'];
    $scope.getValue = function () {
        $scope.formLeftData = publicData;
    }
});