如何将控制器中的json数据传递给ASP.NET MVC中的angularjs？ [英] How to pass the json data from the controller to angularjs in ASP.NET MVC?

问题描述

我想将json数据从控制器传递给angularjs..i已经尝试了下面的代码，但只是显示表头不显示我的产品数据..下载我的代码..这是我的angularjs代码。 。

 $ scope.ViewPro = function（）{
 $ http（{method：'GET'，url：'AddToCart / ProList'}）。 
成功（函数（p）{
调试器; 
 console.log（p）; 
 $ scope.Products = p; //响应数据
 $位置。 path（'/ ViewProduct'）; 
}）。 
错误（函数（数据）{
 alert（数据+错误）; 
 console.log（数据）; 
}）; 
}; 

这是我的json控制器方法..

 public JsonResult ProList（）
 {
 var ProductList = db.tblProducts.ToList（）; 
 var Products = ProductList.Select（d => new 
 {
 d.ProductId，
 d.ProductName，
 d.Price，
 d .Descripation，
 d.SEOURL，
 d.Image，
 d.IsPubliesd，
}）。ToList（）; 
返回Json（Products，JsonRequestBehavior.AllowGet）; 
} 
 

这是我的路线提供者

 .when（'/ ViewProduct'，{templateUrl：'AddToCart / ViewProduct'}）

this是我的观点..

< div ng-app =MyAppng-controller =AddToCartng-model =AddToCart > 
< div class =table-responsive> 
< table class =table table-striped table-bordered> 
< tr> 
< td align =center>  ProductId < / td> 
< td align =center>  ProductName < / td> 
< td align =center> 描述< / td> 
< td align =center> 价格< / td> 
< td align =center>  SEOURL < / td> 
< td align =center>  IsPubliesd < / td> 
< td align =center>  AddToCart < / td> 
< / tr> 
< tr ng-repeat =产品中的产品> 
< td ng-bind =Product.ProductId>< / td> 
< td> {{Product.ProductName}}< / td> 
< td> {{Product.Descripation}}< / td> 
< td> $ {{Product.Price}}。00< / td> 
< td> {{Product.SEOURL}}< / td> 
< td> {{product.ispubliesd}}< / td> 
< / tr> 
< / table> 
< / div> 
< / div> 

我尝试过：



i想显示我的产品数据，但我得到的错误只是显示表头不显示我的数据我尝试了上面的代码，但我没有得到完美的结果所以请任何一个想法所以请帮帮我..

解决方案

scope.ViewPro = function（）{

http（{method：'GET'， url：'AddToCart / ProList'}）。
成功（函数（p）{
调试器;
console.log（p）;

scope.Products = p; //响应数据

i want to pass the json data from controller to angularjs..i have tried the below code but just only show the table header don't show my product data..below put my code.. this is my angularjs code..

 $scope.ViewPro = function () {    
    $http({ method: 'GET', url: 'AddToCart/ProList' }).
    success(function (p) {
        debugger;            
        console.log(p);
        $scope.Products = p; // Response Data                 
        $location.path('/ViewProduct');
    }).
    error(function (data) {
        alert(data + "Error");
        console.log(data);
    });
};

this is my json controller method..

public JsonResult ProList()
   {
       var ProductList = db.tblProducts.ToList();
       var Products = ProductList.Select(d => new
       {
           d.ProductId,
           d.ProductName,
           d.Price,
           d.Descripation,
           d.SEOURL,
           d.Image,
           d.IsPubliesd,
       }).ToList();
       return Json(Products, JsonRequestBehavior.AllowGet);
   }

this is my routeProvider

.when('/ViewProduct', { templateUrl: 'AddToCart/ViewProduct' })

this is my view..

<div ng-app="MyApp" ng-controller="AddToCart" ng-model="AddToCart"> 
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <tr>
                <td align="center">ProductId</td>
                <td align="center">ProductName</td>
                <td align="center">Descripation</td>
                <td align="center">Price</td>
                <td align="center">SEOURL</td>
                <td align="center">IsPubliesd</td>                    
                <td align="center">AddToCart</td>
            </tr>
            <tr ng-repeat="Product in Products">
                <td ng-bind="Product.ProductId"></td>
                <td>{{Product.ProductName}}</td>
                <td>{{Product.Descripation}}</td>
                <td>${{Product.Price}}.00</td>
                <td>{{Product.SEOURL}}</td>
                <td>{{product.ispubliesd}}</td>                                      
            </tr>
        </table>
    </div>     
</div>

What I have tried:

i want to show my product data but i get the error just only show table header don't show my data i tried the above code but i am not get perfect result so please any one idea so please help me..

解决方案

scope.ViewPro = function () {

http({ method: 'GET', url: 'AddToCart/ProList' }). success(function (p) { debugger; console.log(p);

scope.Products = p; // Response Data

这篇关于如何将控制器中的json数据传递给ASP.NET MVC中的angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！