无法绑定数据从数据库中获取的视图中使用angularJS视图、数据库中、绑定、数据

2023-09-14 00:18:22 作者：EXO、吥変De垨堠

我试图从数据库中提取数据，并使用AngularJS绑定在一个视图。对于我写了一个WEM方法如下：

  [的WebMethod]公共静态字符串的getName（）{  提供SQLHelper SQL =新提供SQLHelper（）;  DataTable的DT = sql.ExecuteSelectCommand（选择客户cust_F_name）;  字典＆LT;字符串对象＆gt;字典=新词典＆LT;字符串对象＆gt;（）;  [对象] ARR =新对象[dt.Rows.Count]  的for（int i = 0; I＆LT; = dt.Rows.Count  -  1;我++）{    改编[I] = dt.Rows [I] .ItemArray;  }  dict.Add（dt.TableName，ARR）;  JSON的JavaScriptSerializer =新的JavaScriptSerializer（）;  返回json.Serialize（字典）;}

和我叫它使用AngularJS：

  VAR DemoApp = angular.module（'DemoApp'，[]）;DemoApp.factory（'SimpleFactory'，函数（$ HTTP）{  返回{    getCustomer：功能（）{      返回$ http.post（'Home.aspx /的getName'，{名字：}）;    }  };}）;DemoApp.controller（'SimpleController'，函数（$范围，SimpleFactory）{  SimpleFactory.getCustomer（）。然后（函数（客户）{    $ scope.Customer = $ parseJSON（customer.d）。  }，功能（错误）{    //错误处理  }）;}）;

我绑定鉴于这样的：

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml数据-NG-应用=DemoApp＆GT;  ＆LT;头=服务器＆GT;    ＆LT;标题＆GT;＆LT; /标题＆GT;  ＆LT; /头＆GT;  ＆LT;车身数据-NG-控制器=SimpleController＆GT;    ＆LT;表ID =form1的=服务器＆GT;      ＆LT; DIV＆GT;        名称＆LT;输入类型=文本数据-NG-模式=名/＆GT; {{名}}        ＆LT; UL＆GT;          ＆LT;李数据-NG-重复=客户名称在客户|过滤器：名称＆GT; {{客户名称}}＆LT; /李＆GT;        ＆LT; / UL＆GT;      ＆LT; / DIV＆GT;    ＆LT; /表及GT;    ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js＆GT;＆下; /脚本＆GT;    ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.10.1.min.js＆GT;＆下; /脚本＆GT;    ＆LT;脚本SRC =脚本/ Home.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;  ＆LT; /身体GT;＆LT; / HTML＆GT;

asp.net mvc angularjs web api单页应用之CRUD操作

但它给了我这样的：

请告诉我如何从一个JSON对象得到的唯一名字。

解决方案

$ HTTP方法返回一个承诺。

在设计上，承诺调用回调仅一个参数

所以在使用时，。然后（功能（客户）{，客户将实际引用一个承诺对象，而不是响应主体允诺对象有这些属性：

数据 - {字符串|对象} - 与变换函数变换的响应体。状态 - {数} - HTTP响应状态code。标题 - {功能（[headerName]）} - 头getter函数配置 - {}对象 - 这是用来生成请求的配置对象

解决方案：

 DemoApp.controller（'SimpleController'，函数（$范围，SimpleFactory）{  SimpleFactory.getCustomer（）。然后（函数（对象）{    $ scope.Customer = object.data.d;  }，功能（错误）{    //错误处理  }）;}）;

此外，您还可以使用成功和错误，传递给这些函数的参数被解构再$ P $响应对象psentation传入则方法。

了解更多： $ HTTP文档

I am trying to take data from a database and bind it in a view using AngularJS. For that I wrote a WEM method as follows:

[WebMethod]
public static string getname() {
  SqlHelper sql = new SqlHelper();
  DataTable dt = sql.ExecuteSelectCommand("select cust_F_name from customer");
  Dictionary<string, object> dict = new Dictionary<string, object>();
  object[] arr = new object[dt.Rows.Count];
  for (int i = 0; i <= dt.Rows.Count - 1; i++) {
    arr[i] = dt.Rows[i].ItemArray;
  }
  dict.Add(dt.TableName, arr);
  JavaScriptSerializer json = new JavaScriptSerializer();
  return json.Serialize(dict);
}

And I call it using AngularJS:

var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', function ($http) {
  return {
    getCustomer: function () {
      return $http.post('Home.aspx/getname', { name: "" });
    }
  };
});

DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
  SimpleFactory.getCustomer().then(function(customer){
    $scope.Customer =$.parseJSON( customer.d);
  }, function(error){
    // error handling
  });
});

I bind it in view like this:

<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DemoApp">
  <head runat="server">
    <title></title>
  </head>
  <body data-ng-controller="SimpleController">
    <form id="form1" runat="server">
      <div>
        Name<input type="text" data-ng-model="Name" />{{ Name }}
        <ul>
          <li data-ng-repeat="customerName in Customer | filter:Name">{{ customerName }}</li>
        </ul>
      </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="Script/Home.js" type="text/javascript"></script>
  </body>
</html>

But it gives me this:

Please tell me how to get the only the name from a JSON object.

解决方案

$http methods return a promise.

By design, promises invoke callbacks with only one argument.

so when using .then(function(customer) { , 'customer' will actually reference a promise object rather than the response body. A promise object has these properties:

data – {string|Object} – The response body transformed with the transform functions. status – {number} – HTTP status code of the response. headers – {function([headerName])} – Header getter function. config – {Object} – The configuration object that was used to generate the request.

Solution:

DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
  SimpleFactory.getCustomer().then(function(object){
    $scope.Customer = object.data.d;
  }, function(error){
    // error handling
  });
});

Also, You can use success and error, The arguments passed into these functions are destructured representation of the response object passed into the then method.