Monday, 27 January 2014

Retrieve Data from SQL Server and Dispaly using Jquery in Asp.net

Take the look at this:




In the previous example we saw, How to insert data in database using jquery in asp.net? now we will see how to display data in jquery in asp.net. Here we will use html page and a aspx.cs file.
First Step:
CreateTable with column name "Name" and "Email"
Second Step:
 Create a new project
Third Step:
Add a html file in your project.
Fourth Step:
Create input textbox and a button with id "Button1".
Fifth Step:
Add the following code in the aspx.cs file


[WebMethod]

    public static string InsertMethod(string Name)
    {
        string shashi = "";
         StringBuilder sb = new StringBuilder();
        SqlConnection con = new SqlConnection("Data Source=PREETI-PC;Initial Catalog=Record;Integrated Security=True");

        {

            SqlCommand cmd = new SqlCommand("select * from Test where Name='"+Name+"'", con);

            {

                con.Open();
                cmd.ExecuteNonQuery();
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    sb.Append(dr["Name"].ToString()+"</br>");
                    sb.Append(dr["Email"].ToString());
                }
                shashi = sb.ToString();
                return shashi;

            }

        }

    }
Sixth Step: 

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"


        rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#Button1').click(function () {

                $.ajax({

                    type: 'POST',

                    contentType: "application/json; charset=utf-8",

                    url: 'Default.aspx/InsertMethod',

                    data: "{'Name':'" + document.getElementById('Text1').value + "' }",
                  
                    async: false,

                    success: function (data) {

                      

                        //                        $('#Text6').val('');
                        //                        $('#Text1').val('');
                        //                        $('#Text2').val('');
                                                document.getElementById('message').innerHTML = data.d ;

                    },

                    error: function ()

                    { alert("error"); }

                });

            });

        });     
  
    </script>
  your process is okay.

Now here in code behind we have added string builder object and append our data according to our requirement you can also append it in the form of table. Return the sting "shashi" which contain string builder object in string formate.
This video is not exactly same as written but this may also help you.