Using angularjs how to get table data from SQL Server

Question

When I click on button, table data taken from SQL Server is displayed in the browser using AngularJs. I tried table data is returned, but it is not binding. i need table display. Please help me thanks in advance

var app = angular.module("myApp", []);
    app.controller("myCntrl", function ($scope, $http) {
        $scope.fillList = function () {
            $scope.RoleName = "";
            var httpreq = {
                method: 'POST',
                url: 'WebForm1.aspx?Meth=GL',
                headers: {
                    'Content-Type': 'application/json; charset=utf-8',
                    'dataType': 'json'
                },
                data: {}
            }
            $http.get("WebForm1.aspx?Meth=GL")
            .then(function (response) {
                $scope.RolesList = response.data;
            });
        };
        $scope.fillList();        
        $scope.click = function () {
         alert("hi");
            var _reqObj = new Object();
            _reqObj.Name = $scope.dropdown;
            _reqObj.Meth = "PD";
            $.ajax({
                method: 'POST',
                url: 'WebForm1.aspx',
                data: _reqObj,
                success: function (response) {                    
                    $scope.Users =response.data;
                }
            });
        }
    });
<div ng-app="myApp" ng-controller="myCntrl">
    user Roles:
    <select id="dropdown" name="dropdown" ng-model="dropdown">
        <option value="" disabled>--Select--</option>
        <option ng-repeat="Role in RolesList">{{Role.RoleName}}</option>
    </select>
    </br>
    <input id="Button1" type="button" class="button" value="button" ng-click="click(dropdown)" />
    <div id="dvTable">
    </div>
    <table class="table-bordered">

                <tbody ng-repeat="user in Users">
                    <tr class="table-bordered" style="border-bottom:1px solid #DDDDDD;">
                        <input type="hidden" ng-model="user.USER_ID" />                                                                                  
                        <td style="text-align: left;padding-left:5px; max-width: 180px; word-wrap: break-word;">
                            {{ user.UserName }}
                        </td>
                        <td style="text-align: left;padding-left:5px; max-width: 220px; word-wrap: break-word;">
                            {{ user.RoleName }}
                        </td>
                        <td style="text-align: left;padding-left:5px">
                            {{status}}
                        </td>
                        <td style="text-align: center;">
                            <input type="button" ng-click="edit(user.USER_ID)" value="Edit" style="width:50px;" class="buttonCustG" />
                            &nbsp;&nbsp;
                            <input type="button" ng-click="deactivate(user.USER_ID)" value="Delete" style="width:50px;" class="buttonCustG">
                        </td>
                    </tr>
                </tbody>
            </table>

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        {
            if (Request.QueryString["Meth"] != null && Request.QueryString["Meth"].ToString() != "")
            {
                string Req = Request.QueryString["Meth"].ToString();
                if (Req == "GL")
                {
                    List<Names> lst = new List<Names>();
                    lst = GetList();
                    if (lst != null)
                    {
                        string m_Result = JsonConvert.SerializeObject(lst);
                        HttpResponse res1 = HttpContext.Current.Response;
                        res1.Clear();
                        res1.BufferOutput = true;
                        res1.StatusCode = 200;
                        res1.Write(m_Result);
                        res1.ContentType = "text/json";
                        res1.End();


                    }
                }
                if (Req == "PD")
                {
                    List<User> lst1 = new List<User>();
                    string m_Name = Request.QueryString["name"].ToString();
                    lst1 = getdata(m_Name);
                    if (lst1 != null)
                    {
                        string result = JsonConvert.SerializeObject(lst1);
                        HttpResponse res1 = HttpContext.Current.Response;
                        res1.Clear();
                        res1.BufferOutput = true;
                        res1.StatusCode = 200;
                        res1.Write(result);
                        res1.ContentType = "text/json";
                        res1.End();

                    }
                }
            }
        }
    }

    public static List<Names> GetList()
    {
        List<Names> names = new List<Names>();
        DataSet ds = new DataSet();
        using (SqlConnection con = new SqlConnection(@"Data Source=192.168.1.42,1433;Initial Catalog=Harneedi;User ID=chaitanya_t;Password=makrotech"))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.Connection = con;
                cmd.CommandText = "select RoleName from HN_Master_User_Role";
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    da.Fill(ds);
                }
            }
        }

        if (ds != null && ds.Tables.Count > 0)
        {
            foreach (DataRow dr in ds.Tables[0].Rows)
                names.Add(new Names(dr["RoleName"].ToString()));
        }
        return names;
    }

    public static List<User> getdata(string name)
    {
        //string Rolename = Request.QueryString["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='" + name + "'", 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 Names
{
    public string RoleName;
    public Names(string _RoleName)
    {
        RoleName = _RoleName;
    }
}

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

Since it's an asynchronous function, you need to trigger the Angular digest process after it finishes. To do so, I recommend you using the service $http instead of the classical jQuery ajax method, which doesn't have any influence in the angular internals docs.angularjs.org/api/ng/service/$http — Eduardo Páez Rubio
– Eduardo Páez Rubio, Commented Dec 16, 2015 at 14:23
Are you 100% certain that $http.get("WebForm1.aspx?Meth=GL") is returning success? Did you breakpoint it in the developer console (and why don't you handle errors?) — Mawg
– Mawg, Commented Dec 16, 2015 at 15:26

chaitanya · Accepted Answer · 2015-12-17 07:15:41Z

1

instead of click function modify this code.i got the correct output

 $scope.Users = "";
        $scope.click = function () {              
            var _reqObj = new Object();
            _reqObj.Name = $scope.dropdown;
            _reqObj.Meth = "PD";

            $.ajax({
                method: 'POST',
                url: 'WebForm1.aspx',
                data: _reqObj,
                success: function (response) {
                    $scope.Users = response;
                    //double click disable purpose
                    $scope.$apply(function () { 
                    $location.path("/PD"); });
                }
            });                
        }

answered Dec 17, 2015 at 7:15

chaitanya

1091 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using angularjs how to get table data from SQL Server

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related