使用angularjs，jquery，json，ajax根据下拉选择绑定html表数据答案

【问题标题】：bind html table data based on dropdown seletion using angularjs,jquery,json,ajax使用angularjs，jquery，json，ajax根据下拉选择绑定html表数据
【发布时间】：2015-11-26 07:27:26
【问题描述】：

请纠正我的更正它不起作用我犯了一个错误请纠正。我需要基于选择的 html 表。我试过了，但我找不到任何解决方案。如果我在下拉菜单中选择任何值并单击按钮，我会创建下拉菜单，它会显示所选表格

var app = angular.module("myApp", []);
        app.controller("myCntrl", function ($scope, $http) {
$("#Button1").click=function(RoleID){
var httpreq={
method:'POST',
 url: 'WebForm1.aspx/getdata',
   headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                    'dataType': 'json'
                },
                data: {}
            }
            $http(httpreq).success(function (response) {
 $scope.RolesList = response.d;

}) };

 <input id="Button1" type="button" class="button" value="button" ng-click="click()"  />

public List<User> getdata(int RoleName)
       {
           string strConnection = "Data Source=192.168.1.42,1433;Initial Catalog=Harneedi;User ID=chaitanya_t;Password=makrotech";
           List<User> userobj1 = new List<User>();
           DataTable dt = new DataTable();
           SqlConnection con = new SqlConnection(strConnection);
           con.Open();
           SqlCommand cmd = new SqlCommand("select userName,[RoleName],[status] from HN_Users_Details as t1 inner join HN_Master_User_Role as t2 on  t1.RoleID=t2.RoleID where RoleName='"+RoleName+"'", con);
           SqlDataAdapter da = new SqlDataAdapter(cmd);
           da.Fill(dt);
           if (dt.Rows.Count > 0)
           {
               for (int i = 0; i < dt.Rows.Count; i++)
               {
                   User userinfo = new User();
                   userinfo.UserName = dt.Rows[i]["UserName"].ToString();
                   userinfo.RoleName = dt.Rows[i]["RoleName"].ToString();
                   userinfo.status = dt.Rows[i]["status"].ToString();
                   userobj1.Add(userinfo);
               }
           }
           return userobj1;
       }

public class User{public string UserName { get; set; }public string RoleName { get; set; }public string status { get; set; }}

【问题讨论】：

标签： javascript jquery angularjs json ajax

【解决方案1】：

请纠正我的更正

好的！让我们开始吧。

您当前的工作范围内有这个按钮：

<input id="Button1" type="button" class="button" value="button" ng-click="click()"  />

正如我所见，您正在触发控制器范围内定义的click() 方法。所以你已经定义了它很糟糕我会说这个不介意。在我看来，您必须以这种方式声明该方法：

var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
   $scope.RolesList = {}; // declare the role list here
   $scope.click=function(RoleID){ // not sure how you pass this role id
      var httpreq={
         method:'POST',
         url: 'WebForm1.aspx/getdata',
         headers: {
            'Content-Type': 'application/json; charset=utf-8' // this is useless it is default in angularjs
         },
         responseType: 'json', // use responseType instead of dataType
         data: {}
      };
      $http(httpreq).then(function (response) { // ".success" is deprecated standard is set to use ".then()"
             $scope.RolesList = response.d;
      });
});

如果你能创建一个示例演示here @plnkr，那就太好了。

【讨论】：

【解决方案2】：

虽然不清楚你的问题到底是什么，但基本的理解是代码运行不正常，我的理解是，你将你的内容类型设置为json，但是我们从getdata方法返回列表。

所以我们需要将数据序列化，返回为json数据。

da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
     row = new Dictionary<string, object>();
     foreach (DataColumn col in dt.Columns)
     {
        row.Add(col.ColumnName, dr[col]);
     }
     rows.Add(row);
}
return serializer.Serialize(rows);

并将方法的返回类型更改为字符串，我想这会解决您的问题。

【讨论】：