News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. *** 
  Jan 4 2015 7:53AM     Sara Silva
  0 Comments    1738 Views  
Here Sara Silva gave such a good explanation about to dynamically bind table data Using jQuery Ajax with example code and Demo.
Ajax stands for Asynchronous JavaScript and XML. Ajax is used to Update the part of the web page without reloading the entire page. In other words, Give request to the server and get response with out page reload.
HTML
<body>
    <div class="container login" style="float: left;">
        <div class="main">
            <h3>
                Search Using JQuery Ajax
            </h3>
            <div style="float: left;">
                <span>Search User:</span> <span>
                    <input id="txtUsername" style="width: 100%;" type="text">
                </span>
            </div>
            <div style="float: left;">
                <span style="float: left; display: block;" id="error1" class="dsNone error"></span>
            </div>
            <br >
            <br >
            <div class="">
                <br >
                <input type="button" value="Search" id="btnLoginUsingAjax" class="width55  btn" />
            </div>
        </div>
    </div>
    <span style="float: left; padding: 15px; width: 100%;" id="successMsg" class="dsNone">
    </span>
</body>
CSS
<style type="text/css">
        .btn
        {
            line-height: 2.0;
            border-radius: 4px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            color: #fff;
            background-color: #00a9da;
            border-color: #0094bf;
        }

        .error
        {
            color: white;
            background-color: rgb(247, 23, 23);
            margin-left: 12px;
            border-radius: 3px;
        }

        .width55
        {
            width: 100px;
        }

        .ml4px
        {
            margin-left: 4px;
        }

        .ml19px
        {
            margin-left: 19%;
        }

        .login
        {
            height: 220px;
            background-color: #f5f5f5;
            width: 35%;
            padding: 20px;
            border-radius: 16px;
        }
JavaScript
<script type="text/javascript">
        $(function () {
            $("#btnLoginUsingAjax").click(function () {
                if ($("#txtUsername").val() == "" || $("#txtUsername").val() == null) {
                    $("#error1").css("display""block");
                    $("#error1").text(" Enter Username ");
                    $("#successMsg").css("display""none");
                    return false;
                }
                else {
                    $("#error1").css("display""none");
                }
                $("#successMsg").css("display""block");
                $("#successMsg").html(" Searching Please wait.. ");
                $.ajax({
                    type: "POST",
                    url: "Bind-HtmlTableData-jQueryAjax.aspx/BindHtmlTable",
                    data: JSON.stringify({ name: $("#txtUsername").val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (data, status) {
                        var html = '';
                        var datas = $.parseJSON(data.d);
                        html += "<table style='border: 1px solid #81B411;border-collapse: collapse;width: 34%;' border='1' class='tblBorder' border='1'><tr style='background-color: #81B411;'><th>TopicName</th><th>Posted By</th></tr>";
                        for (var i = 0; i < datas.length; i++) {
                            var data = datas[i];
                            html += '<tr><td>' + data.TopicName + '</td><td>' + data.PostedBy + '</td></tr>';
                        }
                        html += '</table>';
                        $("#successMsg").css("display""block");
                        $("#successMsg").html(html);
                    },
                    failure: function (data) {
                        alert(" " + data.d);
                    },
                    error: function (data) {
                        alert(" " + data.d);
                    }
                });
            });
        });
    </script>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System.Data;

public partial class Bind_HtmlTableData_jQueryAjax : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    public static string BindHtmlTable(string name)
    {
        string result = string.Empty;
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        List<Dictionary<stringobject>> list = new List<Dictionary<stringobject>>();
        string connetionString = null;
        SqlConnection cnn;
        SqlCommand command;
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        connetionString = "Data Source=ServerName;Initial Catalog=DatabaseName;uid=username;password=password";
        cnn = new SqlConnection(connetionString);
        cnn = new SqlConnection(connetionString);
        try
        {
            cnn.Open();
            SqlCommand cmd = new SqlCommand("Select top 20 * from PageContent where TopicName like '%" + name + "%'", cnn);
            SqlDataAdapter da = new SqlDataAdapter();
            da.SelectCommand = cmd;
            da.Fill(dt);
            foreach (DataRow row in dt.Rows)
            {
                Dictionary<stringobject> dict = new Dictionary<stringobject>();
                foreach (DataColumn col in dt.Columns)
                {
                    dict[col.ColumnName] = row[col];
                }
                list.Add(dict);
            }
            da.Fill(ds);
            cnn.Open();
            cnn.Close();
        }
        catch (Exception ex)
        {
        }
        //return (result);
        return serializer.Serialize(list);
    }
}
Demo
Here, You can search data by keywords like below mentioned.The Given keywords will send to server and match with data base and matched result will be send back to the browser without page reload by jQuery Ajax.
Search keyword like this "Basics", "How to", "Create", "Introduction",ect.
Hi, This is Sara Silva.I hope this page will helps you to bind dynamic html table jQuery Ajax.Thanks.
BackToTop
Comments



 
Search
Recent Posts
Create Amazon ElasticCache Using Memcached in CSharp
Oct 29 2018 12:09PM Posted By Amose
Get Google Map Lat Lng (Geo Point) By Pincode in C#
Oct 28 2018 12:09PM Posted By Pranav
Google URL Shortener in C#
Oct 20 2018 12:09PM Posted By Sanjay
Bind Gridview from CSV file in Asp.Net C#
Oct 5 2018 12:09PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Sep 26 2018 12:09PM Posted By John
Gridview custom CSS in ASP.Net
Sep 14 2018 12:09PM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Sep 10 2018 12:09PM Posted By Micheal
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: