[英]ASP.net Textbox Live Search - GridView Results Filter
My scenario is;我的情况是; I'm trying to do a live search feature for my ASP.net project.
我正在尝试为我的 ASP.net 项目执行实时搜索功能。 In the form, I have a description textbox where the user will type in the search and as the user types in anything, the GridView below filters the results accordingly.
在表单中,我有一个描述文本框,用户将在其中输入搜索内容,当用户输入任何内容时,下面的 GridView 会相应地过滤结果。 I have tried this on desktop applications and it's not much of a hassle but I recently dipped in on Web Applications.
我已经在桌面应用程序上尝试过这个,这并不麻烦,但我最近涉足了 Web 应用程序。 Any help would be appreciated.
任何帮助,将不胜感激。 I'm sure there is an easy way to do this but I seem to be having trouble finding "that" way.
我确信有一种简单的方法可以做到这一点,但我似乎很难找到“那种”方式。
Below are what I tried already:
I have tried using onTextChanged property of the textbox but it only populates after the event request.
I have added a function using Ajax+ JQuery which calls the method but the gridview is not displaying the data.
enter code here
<script type="text/javascript">
$(function () {
GetCustomers();
});
$("[id*=TxtDescription]").live("keyup", function () {
GetCustomers();
});
function SearchTerm() {
return jQuery.trim($("[id*=TxtDescription]").val());
};
function GetCustomers() {
$.ajax({
type: "POST",
url: "frmDrugMaster.aspx/GetCustomers",
data: '{searchTerm: "' + SearchTerm() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
var row;
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Drugs");
alert(customers.length);
if (row == null) {
row = $("[id*=gvCustomers] tr:last-child").clone(true);
}
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
if (customers.length > 0) {
alert(customers.length);
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("DR_Code").text());
$("td", row).eq(1).html($(this).find("DR_Description").text());
$("td", row).eq(2).html($(this).find("DR_UnitDose").text());
alert($("td", row).eq(0).html($(this).find("DR_Description").text()));
$("[id*=gvCustomers]").append(row);
$
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
} else {
var empty_row = row.clone(true);
$("td:first-child", empty_row).attr("colspan", $("td", row).length);
$("td:first-child", empty_row).attr("align", "center");
$("td:first-child", empty_row).html("No records found for the search criteria.");
$("td", empty_row).not($("td:first-child", empty_row)).remove();
$("[id*=gvCustomers]").append(row);
}
};
</script>
[WebMethod]
public static string GetCustomers(string searchTerm)
{
SqlConnection cn = new SqlConnection(WebConfigurationManager.ConnectionStrings["dbconn"].ConnectionString);
SqlCommand cmd = new SqlCommand("SELECT a.DR_UNITDOSE, a.DR_CODE, a.DR_DESCRIPTION, a.DR_GENERIC1, a.DR_GENERIC2, a.DR_GENERIC3, a.DR_GENERIC4, a.DR_COSTPRICE, a.DR_SELLPRICE, a.DR_STATUS FROM DRUGMASTER a, DRUGCATEGORY b where a.DR_CATEGORY = b.DC_CODE and DR_DESCRIPTION='"+ searchTerm + "' ", cn);
cn.Open();
cmd.ExecuteNonQuery();
cn.Close();
DataTable dt = new DataTable();
dt.TableName = "Drugs";
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
DataSet ds = new DataSet();
ds.Tables.Add(dt);
return ds.GetXml();
}
I found a solution to this or atleast a sort to workaround it.我找到了解决方案或至少一种解决方法。 I used AJAX + JQuery.
我使用了 AJAX + JQuery。 I just created a web service for the particular page where the text change will be applied.
我刚刚为将应用文本更改的特定页面创建了一个 Web 服务。 The codes used are as follows.
使用的代码如下。 Hope this helps someone:
希望这有助于某人:
/*form*/
create a webform with a textbox and a gridview:
/*Add this script*/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
script type="text/javascript">
$(function () {
$("[id*=txtCountry]").on("keyup", function () {
$.ajax({
type: "POST",
url: "WebForm2.aspx/GetCustomers",
data: '{searchTerm: "' + $(this).val() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var row;
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
if (row == null) {
row = $("[id*=gvCustomers] tr:last-child").clone(true);
}
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
if (customers.length > 0) {
$.each(customers, function () {
$("td", row).eq(0).html($(this).find("PD_FSTNM").text());
$("td", row).eq(1).html($(this).find("PD_GENDER").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
} else {
var empty_row = row.clone(true);
$("td:first-child", empty_row).attr("colspan", $("td", row).length);
$("td:first-child", empty_row).attr("align", "center");
$("td:first-child", empty_row).html("No records found for the search criteria.");
$("td", empty_row).not($("td:first-child", empty_row)).remove();
$("[id*=gvCustomers]").append(empty_row);
}
},
failure: function (response) { alert(response.d); },
});
});
});
</script>
/*C# Code*/
[System.Web.Services.WebMethod]
public static string GetCustomers(string searchTerm = "")
{
string strConnString = ConfigurationManager.ConnectionStrings[""].ConnectionString;
SqlConnection con = new SqlConnection(strConnString);
string query = "SELECT * FROM patientdetails";
if (!string.IsNullOrEmpty(searchTerm))
{
query += " WHERE PD_FSTNM LIKE '" + searchTerm + "%'";
}
SqlCommand cmd = new SqlCommand(query, con);
cmd.CommandType = CommandType.Text;
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
sda.Fill(ds, "Customers");
return ds.GetXml();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.