Display No record Found in ASP.Net GridView Populated using jQuery AJAX

Hi simfex,

Please refer below sample.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" Text="Search" runat="server" OnClientClick="GetDetail();return false;" />
<asp:GridView ID="gvCustomers" runat="server">
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        GetDetail();
    });

    function GetDetail() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetDetails",
            data: '{customerId: "' + $("#<%=txtSearch.ClientID%>")[0].value + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: function (response) {
                alert("Error: " + response.responseText);
            }
        });
    }
    var row;
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var booksData = xml.find("BooksData");
        if (row == null) {
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        }
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        if (booksData.length == 0) {
            var emptyRow = row.clone(true);
            $("td:first-child", emptyRow).attr("colspan", $("td", row).length).attr("align", "center");
            $("td:first-child", emptyRow).html("No records found.");
            $("td", emptyRow).not($("td:first-child", emptyRow)).remove();
            $("[id*=gvCustomers]").append(emptyRow);
        } else {
            $.each(booksData, function () {
                var bookData = $(this);
                $("td", row).eq(0).html(bookData.find("CustomerId").text());
                $("td", row).eq(1).html(bookData.find("Name").text());
                $("td", row).eq(2).html(bookData.find("Country").text());
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
        }
    };
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindHeaderRowInGridview();
    }
}

private void BindHeaderRowInGridview()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("CustomerId");
    dt.Columns.Add("Name");
    dt.Columns.Add("Country");
    dt.Rows.Add();
    gvCustomers.DataSource = dt;
    gvCustomers.DataBind();
}

[WebMethod]
public static String GetDetails(string customerId)
{
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("BooksData");
    string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection sqlCon = new SqlConnection(constring);
    using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name,Country FROM Customers WHERE CustomerId = @CustomerId OR @CustomerId IS NULL", sqlCon))
    {
        cmd.Parameters.AddWithValue("@CustomerId", !string.IsNullOrEmpty(customerId) ? customerId : (object)DBNull.Value);
        sqlCon.Open();
        using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
        {
            sda.Fill(dt);
            ds.Tables.Add(dt);
        }
    }
    return ds.GetXml();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        BindHeaderRowInGridview()
    End If
End Sub

Private Sub BindHeaderRowInGridview()
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("CustomerId")
    dt.Columns.Add("Name")
    dt.Columns.Add("Country")
    dt.Rows.Add()
    gvCustomers.DataSource = dt
    gvCustomers.DataBind()
End Sub

<WebMethod()>
Public Shared Function GetDetails(ByVal customerId As String) As String
    Dim ds As DataSet = New DataSet()
    Dim dt As DataTable = New DataTable("BooksData")
    Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim sqlCon As SqlConnection = New SqlConnection(constring)
    Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId,Name,Country FROM Customers WHERE CustomerId = @CustomerId OR @CustomerId IS NULL", sqlCon)
        cmd.Parameters.AddWithValue("@CustomerId", If(Not String.IsNullOrEmpty(customerId), customerId, CObj(DBNull.Value)))
        sqlCon.Open()
        Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
            sda.Fill(dt)
            ds.Tables.Add(dt)
        End Using
    End Using

    Return ds.GetXml()
End Function

Screenshot