AngularJs调用NET MVC 控制器中的函数进行后台操作
题目中提到的控制器指的是.NET MVC的控制器，不是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: %;
} .content {
display: flex;
height: %;
} .left {
background-color: aqua;
width:%;
} .right {
width:%;
background-color: beige;
} .foot {
height: %;
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脚本文件。
Parents2.js：
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脚本中传值。
这里主要是通过$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 = , sex = "男" };
//当用get方式访问返回类型是JsonResult函数的时候，下面的json必须在第二个参数赋值 JsonRequestBehavior.AllowGet
return Json(t, JsonRequestBehavior.AllowGet);
}
public JsonResult Test4(string txt)
{
var t = new MT() { name = txt, age = , sex = "男" };
return Json(t);
}
这样主页面就完成了，运行效果：
LeftChild.html：
<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：
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。
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;
}
});
完整页面的效果：
AngularJs调用NET MVC 控制器中的函数进行后台操作的更多相关文章
- C语言学习_C如何在一个文件里调用另一个源文件中的函数
问题 C如何在一个文件里调用另一个源文件中的函数,如题. 解决办法 当程序大了代码多了之后,想模块化开发,不同文件中存一点,是很好的解决办法,那我们如何做才能让各个文件中的代码协同工作呢?我们知道,m ...
- MVC控制器中动作方法返回的结果
在MVC控制器中主要的返回方式有如下几种: 1.Content(): 返回文本类型的ContentResult,比如“这是我做的一个MVC”. 2.File(): 返回文件类型的内容FileResul ...
- asp.net MVC控制器中返回JSON格式的数据时提示下载
Asp.net mvc在接收的是JSON格式的数据,但是奇怪的是在IE中提示下载文件,其他浏览器中一切正常,下载后,里面的内容就是在控制器中返回的数据.代码如下: 视图中js代码: $("# ...
- ASP.NET在MVC控制器中获取Form表单值的方法
在网站开发中我们经常需要用到表单,那么,在前台页面的表单中提交到后台控制器后,后台控制器如何接收表单提交过来的数据呢?下面我们介绍几种常用的方法. 我们先看看前台页面,这里我们用一个用户名和密码的表单 ...
- 在ASP.NET MVC控制器中获取链接中的路由数据
在ASP.NET MVC中,在链接中附加路由数据有2种方式.一种是把路由数据放在匿名对象中传递: <a href="@Url.Action("GetRouteData&quo ...
- 如何调用.so动态库中的函数，如何把自己的函数导出为.so的动态库函数供别人调用
调用.so中的函数和平常的函数没有区别,只是在编译连接时加上-lxxxx就行了.要生成.so库,则编译时用下面的语句:gcc -shared -Wl,-soname,libmyfun.so -o li ...
- 在IE中MVC控制器中返回JSON格式的数据时提示下载
最近做项目时,视图中用jquery.form.js异步提交表单时,接收的是JSON格式的数据,但是奇怪的是在IE中提示下载文件,其他浏览器中一切正常,下载后,里面的内容就是在控制器中返回的数据.代码如 ...
- C#调用GDI+1.1中的函数实现高斯模糊、USM锐化等经典效果。
http://www.cnblogs.com/Imageshop/archive/2012/12/13/2815712.html 在GDI+1.1的版本中,MS加入不少新的特性,其中的特效类Effec ...
- asp.net mvc 控制器中操作方法重载问题 解决
Controllers: public ActionResult Index() { return View(db.GuestBooks.ToList()); } // // GET: /Guest2 ...
随机推荐
- 【转】ubuntu 下安装mongodb php 拓展的方法
按照上面的方法安装成功之后,写一个 mongodb 的php测试脚本,用来测试是否可以 正确连接上mongodb ,并查询结果. 参考:http://php.net/manual/en/class.m ...
- USB多重系統 - 開機碟工具 – WinSetupFromUSB
WinSetupFromUSB下載與安裝 讓USB磁碟擁有多重開機的功能,WinSetupFromUSB有著提軟體和硬體的高相容性. [官方網頁]:http://www.winsetupfromusb ...
- Direct Buffer vs. Heap Buffer
1. 劣势:创建和释放Direct Buffer的代价比Heap Buffer得要高. 2. 差别:Direct Buffer不是分配在堆上的,它不被GC直接管理(但Direct Buffer的JAV ...
- pagePiling.js - 创建美丽的全屏滚动效果
在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
- JIRA运行太慢，修改JVM
JIRA运行太慢,根据实际实况,修改JVM内存大小 2. 非NT服务修改JVM内存大小 修改%JIRA_HOME%/bin下面的setenv.bat文件,修改JAVA_OPTS这个环境变量 set J ...
- 矩阵经典题目七：Warcraft III 守望者的烦恼（矩阵加速递推）
https://www.vijos.org/p/1067 非常easy推出递推式f[n] = f[n-1]+f[n-2]+......+f[n-k]. 构造矩阵的方法:构造一个k*k的矩阵.当中右上角 ...
- mysql备份及还原
mysql怎样复制数据库?或者说,将数据库拷贝到另外一台机? 按照我的理解,复制数据库,如果是: 1.直接拷贝数据库文件,应该先停数据服务,否则拷不出来.但是,生产机器,哪能说停就停呢? 2.在线拷贝 ...
- JavaScript对象（复习笔记）
js对象 对象构造器 function person(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname ...
- ubuntu安装jdk 1.6
linux下安装JDK1.6 1. 去http://java.sun.com/j2se/1.4.2/download.html 下载一个Linux Platform的JDK,建议下载RPM自解压格式的 ...
- YTU 2954: A改错题--是虫还是草
2954: A改错题--是虫还是草 时间限制: 1 Sec 内存限制: 128 MB 提交: 83 解决: 55 题目描述 冬虫夏草为虫体与菌座相连而成,冬天是虫子,夏天却是草.根据类生物(bio ...