使用angularjs，jquery，json，ajax基于下拉选择绑定html表数据

Question

please rectify my corrections it not working i made a mistakes please rectify. i need html table based on selection. i tried but i cannot find any solution. i created drop down if i select any value in drop down & click button it display the selected table

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; }}

Answer 1

please rectify my corrections

Okay! Let's get to it.

You have this button in your current scope of work:

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

As i can see you are triggering the click() method defined in your controller's scope. so you have defined it badly i would say this don't mind . In my opinion you have to declare the method this way:

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;
      });
});

It would be nice if you can create a sample demo here @plnkr .

Answer 2

Though it is not clear exactly what your problem is, the basic understanding is that the code is not running properly, what I understand is, you have set your content type as json, but we are returning list from the getdata method.

So we need to serialize the data and return as json data.

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);

And change the return type of the method as string, I suppose that would solve your problem.