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

1 reply

Last post Jun 11, 2018 05:33 AM by vahid bakkhi

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

- Reply
fsze88
Member

28 Points

51 Posts

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

Jun 11, 2018 03:07 AM|fsze88|LINK

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();

vahid bakkhi

Star

8109 Points

2778 Posts

Re: How to load data from database to ajax and get values back on front end by asp.net?

Jun 11, 2018 05:33 AM|vahid bakkhi|LINK

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

vahid bakhtiary

Please MARK AS ANSWER if suggestion helps.

‹ Previous Thread|Next Thread ›