locked
How to load data from database to ajax and get values back on front end by asp.net? RRS feed

  • Question

  • User1741069310 posted

    string constr = "Server = 192.168.248.212; Database = testdb; Trusted_Connection = True;";
    int i;

    i = 0;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new System.Data.SqlClient.SqlCommand();
    cmd.CommandText = "select * from LoE";
    cmd.Connection = con;
    con.Open();
    SqlDataReader reader = cmd.ExecuteReader();


    con.Close();

    Monday, June 11, 2018 3:07 AM

All replies

  • User-369506445 posted

    hi

    please try below code :

    First created a webform called Default.aspx

    in code behind

    protected void Page_Load(object sender, EventArgs e)
            {
    
            }
            [System.Web.Services.WebMethod]
            [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)] 
            public static List<LoE> GetData()
            {
                List<LoE> list = new List<LoE>();
    
                int i = 0;
                SqlConnection con = new SqlConnection(constr);
                SqlCommand cmd = new System.Data.SqlClient.SqlCommand();
                cmd.CommandText = "select Id,Name from LoE";
                cmd.Connection = con;
                con.Open();
                SqlDataReader reader = cmd.ExecuteReader();
    
                while (reader.Read())
                {
                    LoE obj = new LoE();
                    obj.Id = reader["Id"].ToString();
                    obj.Name = reader["Name"].ToString();
    
                    list.Add(obj);
                }
                con.Close();
    
                return list;
    
            }
    
            public class LoE
            {
                public string Id { get; set; }
                public string Name { get; set; }
            }

    in View

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetData",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function () {
                            $.each(this, function (k, v) {
                                $("#Content").append("<p>" + v.Id + "</p><p>" + v.Name + "</p>")
                            });
                        });
                    },
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="frm" method="post">
            <div id="Content">
            </div>
        </form>
    </body>
    </html>
    

    now when you run your project , your data will fetch from database and shows on div tag

    Monday, June 11, 2018 5:33 AM