使用angularjs，jQuery的，JSON，AJAX基于下拉seletion绑定的HTML表中的数据 [英] bind html table data based on dropdown seletion using angularjs,jquery,json,ajax

问题描述

请纠正我改正它不工作我犯了一个错误，请改正。我需要根据选择HTML表格。我试过，但我无法找到任何解决方案。我创建下拉，如果我选择在下跌的任何值向下放大器;点击按钮，它显示选定表

  VAR应用= angular.module（对myApp，[]）;
        app.controller（myCntrl功能（$范围，$ HTTP）{
$（＃Button1的）。单击=功能（RoleID）{
VAR HTT preQ = {
方法：POST，
 网址：WebForm1.aspx /的getData，
   标题：{
                    内容类型：应用/ JSON的;字符集= UTF-8，
                    的dataType：JSON
                }，
                数据： {}
            }
            $ HTTP（HTT preQ）.success（函数（响应）{
 $ scope.RolesList = response.d;
 

}） };

 ＆LT;输入ID =Button1的类型=按钮级=按钮值=按钮NG点击=点击（）/＆GT;

公开名单＆lt;使用者＆GT;的getData（INT角色名）
       {
           字符串strConnection =数据源= 192.168.1.42,1433;初始目录= Harneedi;用户ID = chaitanya_t;密码= makrotech;
           清单＆lt;使用者＆GT; userobj1 =新的List＆lt;使用者＆GT;（）;
           数据表DT =新的DataTable（）;
           SqlConnection的CON =新的SqlConnection（strConnection）;
           con.Open（）;
           的SqlCommand CMD =新的SqlCommand（选择用户名，[角色名]，[状态]从HN_Users_Details为T1内部联接HN_Master_User_Role为T2的t1.RoleID = t2.RoleID其中，角色名='+角色名+'，CON）;
           SqlDataAdapter的DA =新的SqlDataAdapter（CMD）;
           da.Fill（DT）;
           如果（dt.Rows.Count大于0）
           {
               的for（int i = 0; I＆LT; dt.Rows.Count;我++）
               {
                   用户用户信息=新用户（）;
                   userinfo.UserName = dt.Rows [I] [用户名]的ToString（）。
                   userinfo.RoleName = dt.Rows [I] [角色名]的ToString（）。
                   userinfo.status = dt.Rows [一] [身份]的ToString（）。
                   userobj1.Add（用户信息）;
               }
           }
           返回userobj1;
       }

公共类用户{公共字符串用户名{获得;组; }公共字符串角色名{获得;组; }公共字符串状态{获得;组; }}
 

解决方案

请纠正我改正的

好了！让我们开始吧。

您在你目前的工作范围按钮：

 ＆LT;输入ID =Button1的类型=按钮级=按钮值=按钮NG点击=点击（）/＆GT;
 

我可以看到你触发点击（）方法，在控制器的范围界定。所以你已经定义的很糟糕的我会说这的不介意的。在我看来，你必须声明的方法是这样的：

  VAR应用= angular.module（对myApp，[]）;
app.controller（myCntrl功能（$范围，$ HTTP）{
   $ scope.RolesList = {}; //这里宣布角色列表
   $ scope.click =功能（RoleID）{//不知道你通过这个角色ID
      VAR HTT preQ = {
         方法：POST，
         网址：WebForm1.aspx /的getData，
         标题：{
            内容类型：应用/ JSON的;字符集= UTF-8//这是没有用的是默认angularjs
         }，
         responseType：JSON，//使用的数据类型responseType代替
         数据： {}
      };
      $的http（htt的preQ）。然后（功能（响应）{//.success是德precated标准设置为使用。然后（）
             $ scope.RolesList = response.d;
      }）;
}）;
 

这将是很好，如果你可以创建一个示例演示这里@plnkr 。

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

解决方案

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.

这篇关于使用angularjs，jQuery的，JSON，AJAX基于下拉seletion绑定的HTML表中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！