在ASP.Net Web应用程序中使用AngularJS时显示sql数据库中的数据

时间:2014-05-26 06:49:04

标签: c# asp.net angularjs

我试图从sql数据库中显示数据。首先,我将数据转换为UserService.asmx.cs文件中的JSON对象。

    public string GetUserDetails()
    {
        DataTable dt = new DataTable();
        using (SqlConnection con = new SqlConnection(GetConnectionString()))
        {
            using (SqlCommand cmd = new SqlCommand("select UserID=id,Name=username,Mail=Email from users", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                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);
            }
        }
    }

然后我尝试使用AngularJS控制器script.js

获取JSON对象
$scope.getUser = function () {
    $.ajax({
        type: "POST",
        url: "UserService.asmx/GetUserDetails",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var parsed = $.parseJSON(data.d);
            $.each(parsed, function (i, jsondata) {
                $("#showdata").append("ID: " + jsondata.UserID + "<br/>" + "Username: " + jsondata.Name);
            });
        },
        error: function (XHR, errStatus, errorThrown) {
            var err = JSON.parse(XHR.responseText);
            errorMessage = err.Message;
            alert(errorMessage);
        }
    });
};

然后数据应该在按钮点击事件getUser()

上显示
<form id="form1" ng-controller="UserCntrl" ng-submit="save()">
    <div>
        <p>Username: </p>
        <input id="Text1" type="text" placeholder="Select Username" ng-model="Username" />
        <p>Email: </p>
        <input id="Text2" type="email" placeholder="Email Address" ng-model="Email" />
        <p>Password: </p>
        <input id="Text3" type="password" placeholder="Provide Password" ng-model="Password" />
        <br /><br /><br />
        <input id="Button1" type="submit" value="Register" />
    </div>
    <div>
        <input type="button" id="btnFetch" value="Fetch" ng-click="getUser()" />
    </div>
    <div id="showdata">
    <table>
        <tr>
            <td>UserID</td>
            <td>Username</td>
            <td>Email</td>
        </tr>
        <tr>
            <td>{{IId}}</td>
            <td>{{Username}}</td>
            <td>{{Email}}</td>
        </tr>
    </table>            
    </div>
</form>

但是当我点击按钮时,没有显示任何数据。如果有人指出我正确的方向,将非常感激。

1 个答案:

答案 0 :(得分:1)

我认为您可能忘记了.Net方法的[WebMethod]属性