使用angularjs,jquery,json,ajax基于下拉列表绑定html表数据

时间:2015-11-26 07:27:26

标签: javascript jquery angularjs json ajax

请纠正我的更正它不工作我犯了错误请纠正。我需要基于选择的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; }}

2 个答案:

答案 0 :(得分:0)

请纠正我的更正

好!让我们来看看吧。

您目前的工作范围内有此按钮:

<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,那就太好了。

答案 1 :(得分:0)

虽然目前还不清楚你的问题究竟是什么,但基本的理解是代码运行不正常,我理解的是,你已经将内容类型设置为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);

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