Bind Label based on TextBox value using jQuery AJAX in ASP.Net

Last Reply 6 months ago By dharmendr

Posted 6 months ago

Hello,

I have one textbox where user search for e.g 'Nauna'

i want where user finish the typing in textbox it make ajax call without page refresh

select data from sql server Select id, name from person table

bind the data in label

lblid= id -fetch from select statement

lblname=  name- fetch from select statement

if there is no value lbl say no datafound.

 

i want to fetch data and bind it on label.

all the time select query returns only one row. 

1. textbox user write 'nauna'

2. it returns only one rowa ALWAYS

3. and bind it to labels

You are viewing reply posted by: dharmendr 6 months ago.
Posted 6 months ago Modified on 6 months ago

Hi nauna,

You can pass json string and assign the data.

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <asp:TextBox runat="server" ID="txtSearch" />
    <br />
    Id :
    <asp:Label ID="lblId" runat="server" />
    <br />
    Name :
    <asp:Label ID="lblName" runat="server" />
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#txtSearch').on('blur', function () {
            var name = $(this).val();
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetPersonDetails",
                data: '{name: "' + name + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response.d != '') {
                        var user = JSON.parse(response.d);
                        $('#lblId').html(user.Id);
                        $('#lblName').html(user.Name);
                    }
                    else {
                        $('#lblId').html('no datafound');
                        $('#lblName').html('');
                    }
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    });
</script>

Namespaces

C#

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

VB.Net

Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Web.Script.Serialization

Code

C#

[WebMethod]
public static string GetPersonDetails(string name)
{
    string jsonData = "";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name FROM Customers WHERE Name = @Name", con))
        {
            cmd.Parameters.AddWithValue("@Name", name);
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            if (sdr.Read())
            {
                var input = new
                    {
                        Id = sdr["CustomerId"],
                        Name = sdr["Name"]
                    };
                jsonData = (new JavaScriptSerializer()).Serialize(input);
            }
            con.Close();
        }
    }

    return jsonData;
}

VB.Net

<WebMethod>
Public Shared Function GetPersonDetails(ByVal name As String) As String
    Dim jsonData As String = ""
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId,Name FROM Customers WHERE Name = @Name", con)
            cmd.Parameters.AddWithValue("@Name", name)
            con.Open()
            Dim sdr As SqlDataReader = cmd.ExecuteReader()
            If sdr.Read() Then
                Dim input = New With {Key
                    .Id = sdr("CustomerId"), Key
                    .Name = sdr("Name")
                }
                jsonData = (New JavaScriptSerializer()).Serialize(input)
            End If
            con.Close()
        End Using
    End Using

    Return jsonData
End Function