如何将 ASP.NET MVC 视图值传递给 Angular JS 控制器

Question

我想 ASP.NET MVC 视图 （.cshtml） 值传递给角度 js 控制器。我熟悉Angular js，但不熟悉MVC。我在MVC cshtml中有值。我想将该值传递给我的角度控制器。请向我提供一些详细解释的信息或演示项目或链接。

我想要下面这样的东西，

1. 从 mvc 模型中获取值并将其传递给 cshtml。
2. 从CSHTML传递值到Angular JS控制器并显示在Angular HTML页面
   中我不想使用 cshtml 作为我的观点。我想将数据从cshtml获取到角度控制器并以单独的html显示

Answer 1

使用我拉起的第一个教程，我抓住了这个片段：

var AwesomeAngularMVCApp = angular.module('AwesomeAngularMVCApp', ['ngRoute']);
AwesomeAngularMVCApp.controller('HomeController', HomeController);
var configFunction = function ($routeProvider) {
    $routeProvider.
        when('/Listings', {
            url: 'routesDemo/one'
        })
        .when('/Listing', {
            url: 'routesDemo/two'
        })
        .when('/Listings', {
            url: 'routesDemo/three'
        });
}
configFunction.$inject = ['$routeProvider'];
AwesomeAngularMVCApp.config(configFunction);

现在，您将视图链接到 MVC 中的控制器操作的方式如下：

using System.Web.Mvc;
namespace AwesomeAngularMVCApp.Controllers
{
    public class RoutesDemoController : Controller
    {
        public ActionResult One(string title)
        {
            var listings = db.Articles.Contain(title);
            return PartialView(listings, "..ViewsSharedWhateverPartialView.cshtml");
        }
        [HttpPost]
        public async Task<ActionResult> Two(Article article)
        {
            if(ModelState.isValid){
                  _db.Add(article)
            }
            return View(article); //This one returns entire page
        }
        public JsonResult Three(string title)
        { 
            var listing = db.Articles.Where(t => t.Title == title).SingleOrDefault();
            return Json(listing, JsonRequestBehavior.AllowGet);
        }
    }
}

这些分部视图将位于子文件夹 RoutesDemo 的"视图"文件夹中

1. one.cshtml GET

2. two.cshtml POST ie： a href="#/Article/6" type=submit" class="btn"

   $（"form"）.submit（ function（）{ $.ajax（ function（url， data）{});});

3. three.cshtml get ie

   $.ajax（{ url： '@Url.Action（"routeDemo"， "three"）'， 网址： baseUrl + url， 数据：{ 搜索： 搜索蓝色.val（） }, 成功：函数（数据）{ $（"#msg"）.html（"Results for" + searchBlue.val（））; searchBlue.searchMeme（{ searchComplete： true }）; $（'#main'）.fadeOut（800， function （） { $（'#main'）.html（" + data + "）.fadeIn（）.delay（800）; }); 搜索Blue.val（"）; }, 错误：函数（xhr、状态、错误）{ 警报（错误）; }});

如果要将值传递给角度控制器，请使用 razor 语法并将值绑定到 html 输入。视图文件的顶部将使其角度知道要期望的对象类型。

IE：Two.cshtml的顶部

 @model AwesomeAngularMVCApp.Article

那应该是它除了 route.config 的角度

如果要使用 razor 语法处理 Model 对象，请查看本教程。相当干练。如果这还不够，我将展示明天下班后将 @Model.attribute/property 绑定到 html 元素的示例

编辑

<div class="row-fluid" ng-controller="PersonDetailsController" ng-init="personId=@Model.Id">

Angular 在初始化期间将其注入作用域，因此您可以将其称为$scope.personId