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

首先看主页面的代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="https://cdn.staticfile.org/angular.js/1.7.5/angular.min.js"></script>
  7.     <style>
  8.         .out {
  9.             height: 500px;
  10.         }
  11.  
  12.         .top {
  13.             background-color: lawngreen;
  14.             height: %;
  15.         }
  16.  
  17.         .content {
  18.             display: flex;
  19.             height: %;
  20.         }
  21.  
  22.         .left {
  23.             background-color: aqua;
  24.             width:%;
  25.         }
  26.  
  27.         .right {
  28.             width:%;
  29.             background-color: beige;
  30.         }
  31.  
  32.         .foot {
  33.             height: %;
  34.             background-color: blueviolet;
  35.         }
  36.     </style>
  37.  
  38. </head>
  39. <body>
  40.     <div class="out" ng-app="App" ng-controller="Parents2Ctl">
  41.         <div class="top">{{PublicArea1}}
  42.             <div>
  43.                 <input type="button" value="Get调用后台" ng-click="btn1()" />
  44.                 <input type="button" value="Get传参调用后台" ng-click="btn2()" />
  45.                 <input type="button" value="Get传参调用后台,获取对象返回值" ng-click="btn3()" />
  46.                 <input type="button" value="post调用后台" ng-click="btn4()" />
  47.                 <input type="button" value="post传参调用后台" ng-click="btn5()" />
  48.                 <input type="button" value="post传参调用后台,获取对象返回值" ng-click="btn6()" />
  49.             </div>
  50.         </div>
  51.  
  52.         <div class="content">
  53.             <div ng-include="'Childrens/LeftChild.html?v=3'" class="left"></div>
  54.             <div ng-include="'Childrens/RightChild.html'" class="right"></div>
  55.         </div>
  56.         <div class="foot">{{PublicArea2}}</div>
  57.     </div>
  58.     <script src="Parents2.js?v=2"></script>
  59.     <script src="Childrens/Left.js?v=2"></script>
  60.     <script src="Childrens/Right.js"></script>
  61. </body>
  62. </html>

页面中，还是通过ng-include的方式引入了子页面，同时对各个部分的html，下面引入了对应的js脚本文件。

Parents2.js：

  1. var publicData;
  2. var App = angular.module('App', []);
  3. App.controller('Parents2Ctl', function ($scope, $http) {
  4.         $scope.PublicArea1 = "公共区域顶部";
  5.     $scope.PublicArea2 = "公共区域底部";
  6.     $scope.btn1 = function () {
  7.         $http.get("/Home/Test1").then(function (response) {
  8.             alert(response.data);
  9.         });
  10.     }
  11.     $scope.btn2 = function () {
  12.         $http.get("/Home/Test2?name=Join&address=adaww.efw").then(function (response) {
  13.             alert(response.data);
  14.         });
  15.     }
  16.     $scope.btn3 = function () {
  17.         $http.get("/Home/Test3?txt=Join").then(function (response) {
  18.             alert(response.data.name);
  19.         });
  20.     }
  21.     $scope.btn4 = function () {
  22.         $http.post("/Home/Test1").then(function (response) {
  23.             alert(response.data);
  24.         });
  25.     }
  26.     $scope.btn5 = function () {
  27.         $http.post("/Home/Test2", { name: 'Join', address:'adaww.efw'}).then(function (response) {
  28.             alert(response.data);
  29.         });
  30.     }
  31.     $scope.btn6= function () {
  32.         $http.post("/Home/Test4", {txt:'Join'}).then(function (response) {
  33.             alert(response.data.name);
  34.         });
  35.     }
  36.     });

在主页面的js脚本中定义了一个公共变量publicData，用来在各个js脚本中传值。

这里主要是通过$http的get和post来访问mvc控制器中的函数。在Home控制器中，有以下的函数：

  1.   public string Test1()
  2.         {
  3.             return "Hello World!";
  4.         }
  5.         public string Test2(string name,string address)
  6.         {
  7.             return $"Hello {name}!Your famally in {address}";
  8.         }
  9.         public JsonResult Test3(string txt)
  10.         {
  11.             var t= new MT() { name = txt, age = , sex = "男" };
  12.             //当用get方式访问返回类型是JsonResult函数的时候，下面的json必须在第二个参数赋值 JsonRequestBehavior.AllowGet
  13.             return Json(t, JsonRequestBehavior.AllowGet);
  14.         }
  15.         public JsonResult Test4(string txt)
  16.         {
  17.             var t = new MT() { name = txt, age = , sex = "男" };
  18.             return Json(t);
  19.         }

这样主页面就完成了，运行效果：

LeftChild.html：

  1. <div ng-controller="LeftCtr">
  2.     <h2>{{LeftTitle}}</h2>
  3.     <input type="button" value="向右侧传值" ng-click="setValue()" />
  4.     <div>
  5.         <input type="button" value="Get调用后台" ng-click="service_btn1()" />
  6.         <input type="button" value="Post调用后台" ng-click="service_btn2()" />
  7.     </div>
  8. </div>

Left.js：

  1. App.controller('LeftCtr', function ($scope,  Home) {
  2.     $scope.LeftTitle = "左侧菜单";
  3.     $scope.setValue = function () {
  4.         publicData = '来自左侧的值';
  5.     }
  6.  
  7.     $scope.service_btn1 = function () {
  8.         var t= Home.Get("Test1");
  9.     }
  10.     $scope.service_btn2 = function () {
  11.         var t = Home.Post("Test2", { name: 'Join', address: 'adaww.efw' });
  12.     }
  13. });
  14.  
  15. App.service("Home", function ($http) {
  16.     this.Get = function (ActionName) {
  17.         //这里走的是异步
  18.         $http.get("/Home/" + ActionName).then(function (response) {
  19.             alert(response.data);
  20.         });
  21.         return "OK";
  22.     }
  23. });
  24. App.service("Home", function ($http) {
  25.     this.Post = function (ActionName,para) {
  26.         //这里走的是异步
  27.         $http.post("/Home/" + ActionName,para).then(function (response) {
  28.             alert(response.data);
  29.         });
  30.         return "OK";
  31.     }
  32. });

在子页面left的js脚本中，通过自定义服务的方式来访问后台，其本质还是$http的get和post。

RightChild.html：

  1. <div ng-controller="RightCtr">
  2.     <input type="button" value="显示来自左侧的值" ng-click="getValue()" />
  3.     <ul>
  4.         <li ng-repeat="x in books">{{x}}</li>
  5.     </ul>
  6.     <h1>{{formLeftData}}</h1>
  7. </div>

Right.js：

  1. App.controller('RightCtr', function ($scope) {
  2.     $scope.books = ['言情小说', '武侠小说', '玄幻小说', '修真小说'];
  3.     $scope.getValue = function () {
  4.         $scope.formLeftData = publicData;
  5.     }
  6. });

完整页面的效果：

AngularJs调用NET MVC 控制器中的函数进行后台操作的更多相关文章

  1. C语言学习_C如何在一个文件里调用另一个源文件中的函数

    问题 C如何在一个文件里调用另一个源文件中的函数,如题. 解决办法 当程序大了代码多了之后,想模块化开发,不同文件中存一点,是很好的解决办法,那我们如何做才能让各个文件中的代码协同工作呢?我们知道,m ...

  2. MVC控制器中动作方法返回的结果

    在MVC控制器中主要的返回方式有如下几种: 1.Content(): 返回文本类型的ContentResult,比如“这是我做的一个MVC”. 2.File(): 返回文件类型的内容FileResul ...

  3. asp.net MVC控制器中返回JSON格式的数据时提示下载

    Asp.net mvc在接收的是JSON格式的数据,但是奇怪的是在IE中提示下载文件,其他浏览器中一切正常,下载后,里面的内容就是在控制器中返回的数据.代码如下: 视图中js代码: $("# ...

  4. ASP.NET在MVC控制器中获取Form表单值的方法

    在网站开发中我们经常需要用到表单,那么,在前台页面的表单中提交到后台控制器后,后台控制器如何接收表单提交过来的数据呢?下面我们介绍几种常用的方法. 我们先看看前台页面,这里我们用一个用户名和密码的表单 ...

  5. 在ASP.NET MVC控制器中获取链接中的路由数据

    在ASP.NET MVC中,在链接中附加路由数据有2种方式.一种是把路由数据放在匿名对象中传递: <a href="@Url.Action("GetRouteData&quo ...

  6. 如何调用.so动态库中的函数，如何把自己的函数导出为.so的动态库函数供别人调用

    调用.so中的函数和平常的函数没有区别,只是在编译连接时加上-lxxxx就行了.要生成.so库,则编译时用下面的语句:gcc -shared -Wl,-soname,libmyfun.so -o li ...

  7. 在IE中MVC控制器中返回JSON格式的数据时提示下载

    最近做项目时,视图中用jquery.form.js异步提交表单时,接收的是JSON格式的数据,但是奇怪的是在IE中提示下载文件,其他浏览器中一切正常,下载后,里面的内容就是在控制器中返回的数据.代码如 ...

  8. C#调用GDI+1.1中的函数实现高斯模糊、USM锐化等经典效果。

    http://www.cnblogs.com/Imageshop/archive/2012/12/13/2815712.html 在GDI+1.1的版本中,MS加入不少新的特性,其中的特效类Effec ...

  9. asp.net mvc 控制器中操作方法重载问题 解决

    Controllers: public ActionResult Index() { return View(db.GuestBooks.ToList()); } // // GET: /Guest2 ...

随机推荐

  1. 为Java说句公道话

    为Java说句公道话 有些人问我,在现有的语言里面,有什么好的推荐?我说:"Java. " 他们非常吃惊:"什么?Java!" 所以我如今来解释一下. Java ...

  2. Office EXCEL 如何实现在单元格内换行

    按A/T+回车可以实现手动换行      

  3. stl 之set图解

    使用set或multiset之前,必须增加头文件<set> Set.multiset都是集合类,区别在与set中不同意有反复元素,multiset中同意有反复元素. sets和multis ...

  4. MySQL基础笔记（二） 完整性约束

    我们知道,一种数据模型必须包含三个基本的部分: 构造机制(数据结构):主要描述数据的类型.内容.性质以及数据间的联系等. 运算机制(数据操作):主要描述在相应的数据结构上的操作类型和操作方式. 约束机 ...

  5. Android网络编程（三）Volley使用方法全解析

    相关文章 Android网络编程(一)HTTP协议原理 Android网络编程(二)HttpClient与HttpURLConnection 前言 Volley想必许多人都用过,为了建立网络编程的知识 ...

  6. 设置清除html5页面缓存

    设置清除html5页面缓存 html5端设置 meta 标签: <meta http-equiv="Pragma" content="no-cache" ...

  7. RDD变换

    对Key/Value型RDD进行变换 groupBy按Key汇聚 fruit,applevegetable,cucumberfruit,cherryvegetable,beanfruit,banana ...

  8. Deep Learning 27：Batch normalization理解——读论文“Batch normalization: Accelerating deep network training by reducing internal covariate shift ”——ICML 2015

    这篇经典论文,甚至可以说是2015年最牛的一篇论文,早就有很多人解读,不需要自己着摸,但是看了论文原文Batch normalization: Accelerating deep network tr ...

  9. Remove '@override' annotation解决办法

    最近刚刚配置了新机器,将原来的代码放在eclipse上执行,总会出现Remove '@override' annotation,如果要一个个手动删除相当麻烦,最后在网上找了一下原因原来是编译器版本的问 ...

  10. iOS中的2x，3x问题

    iPhone的屏幕显示效果非常出色.刚进入市场时,iPhone是当时分辨率最高的手持电子设备.不过,iPhone 的显示空间并不大,比现代计算机的屏幕空间要小很多.最初几代iPhone的屏幕分辨率只有 ...