在ASP.NET中使用JSON和AJAX从SQL数据库检索数据

Question

I have a web method where I execute a SQL command (will write a stored proc. after test) and assign those values.

I then try to pass the data to an AJAX function and populate the textboxes but it returns [object Object]. I think it doesn't reach my web method since it is not hitting the break point. I have ensured that the AJAX url is correct.

This is what I have:

C#

public class Club {
    public int ClubID { get; set; }
    public string ClubName { get; set; }
    public string ClubEmail { get; set; }
    public string ClubPassword { get; set; }
}

[System.Web.Services.WebMethod]
public void ClubInfo(int ClubId) 
{
    Club club = new Club();

    SqlConnection con = new SqlConnection(
    WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
    con.Open();
    SqlCommand cmd = new SqlCommand("select * from [dbo].[tb_ClubDetails] where ClubID = @ClubID", con);
    cmd.Parameters.AddWithValue("@ClubID", ClubId);
    SqlDataReader rdr = cmd.ExecuteReader();
    while (rdr.Read()) {
        club.ClubID = Convert.ToInt32(rdr["ClubID"]);
        club.ClubName = rdr["ClubName"].ToString();
        club.ClubEmail = rdr["ClubEmail"].ToString();
        club.ClubPassword = rdr["ClubPassword"].ToString();
    }
    JavaScriptSerializer js = new JavaScriptSerializer();
    Context.Response.Write(js.Serialize(club));

}

AJAX

$(document).ready(function () {
    $("#btnRetrieve").click(function () {
        getData();
        return false;
    });
    function getData() {
        var clbId = $('#txtID').val();

        $.ajax({
            url: 'AddViewClub.aspx/ClubInfo',
            data: { ClubId: clbId },
            dataType: "json",
            method: 'post',
            success: function (data) {
                $('#txtClubName').val(data.ClubName);
                $('#txtEmail').val(data.ClubEmail);
                $('#txtPassword').val(data.ClubPassword);
            },
            error: function (err) {
                alert(err);
            }
        });

    }
});

Please assist me how I can pass data successfully from web method to AJAX function and populate textboxes. Thank you.

Answer 1

I got it to work by doing the following. However, I am not sure if it's best practice. Please correct me if I can improve my code below

    public class Club
    {
        public string ClubName { get; set; }
        public string ClubEmail { get; set; }
        public string ClubPassword { get; set; }
    }

    [WebMethod]
    public static List<Club> ClubInfo(string id)
    {
        SqlConnection con = new SqlConnection(
        WebConfigurationManager.ConnectionStrings["MyDbConn"].ConnectionString);
        con.Open();
        List<Club> clb = new List<Club>();
        SqlCommand cmd = new SqlCommand("select * from [dbo].[tb_ClubDetails] where ClubID = @ClubID", con);
        cmd.Parameters.AddWithValue("@ClubID", id);
        SqlDataReader rdr = cmd.ExecuteReader();
        while (rdr.Read())
        {
            clb.Add(new Club
            {
                //ClubID = Convert.ToInt32(rdr["ClubID"]),
                ClubName = rdr["ClubName"].ToString(),
                ClubEmail = rdr["ClubEmail"].ToString(),
                ClubPassword = rdr["ClubPassword"].ToString(),
            });

        }
        con.Close();
        return clb;
    }

AJAX

$(document).ready(function () {
    $("#btnRetrieve").click(function () {
        getData();
        return false;
    });
    function getData() {
        var clbId = $('#txtID').val();
        $.ajax({
            type: "POST",
            url: "AddViewClub.aspx/ClubInfo",
            data: "{'id': '" + clbId + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });

    }
    function OnSuccess(response) {
        var clb = response.d;
        $(clb).each(function () {
            $('#txtClubName').val(this.ClubName);
            $('#txtEmail').val(this.ClubEmail);
            $('#txtPassword').val(this.ClubPassword);
        });
    }
});