How to create AutoComplete TextBox with ASP.NET and jQuery UI

This article explains how to use JQuery UI AutoComplete widget

AutoComplete – A feature that suggests text automatically based on the first few characters that a user types.

Step:1 Add following code in “default.aspx” page

<linkhref=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/&gt;

$(function () {
$(“[id$=txtAuto]”).autocomplete({
source: function (request, response) {
$.ajax({
url: “NameList.asmx/GetNameList”,
data: “{ ‘Name’: ‘” + request.term + “‘ }”,
dataType: “json”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
async: true,
success: function (data) {
var Details = [];
for (i = 0; i

Add HTML Code:

Enter Name:

Step:2 Add Web Service and write following code in it.

[WebMethod]
public List GetNameList(string Name)
{
var emp = new UserNameList();
var fetchName = emp.GetEmpList()
.Where(m => m.Name.ToLower().StartsWith(Name.ToLower()));  returnfetchName.ToList();
}

public class UserNameList
{
public int ID { get; set; }
public string Name { get; set; }
public List GetEmpList()
{
List emp = new List();
emp.Add(new UserNameList() { ID = 1, Name = “Arjun” });
emp.Add(new UserNameList() { ID = 2, Name = “Aaryan” });
emp.Add(new UserNameList() { ID = 3, Name = “Anoop” });
emp.Add(new UserNameList() { ID = 4, Name = “Bob” });
emp.Add(new UserNameList() { ID = 5, Name = “Boby” });
emp.Add(new UserNameList() { ID = 6, Name = “Cristen” });
emp.Add(new UserNameList() { ID = 7, Name = “Cris” });
return emp;
}
}

 Now run the application and check the output.It would be like this

What is ASP.NET

ASP.NET is a Web application framework developed by Microsoft to build dynamic data driven Web applications and Web services.
1. ASP.NET is a subset of .NET framework. In simple terms a framework is a collection of classes.
2. ASP.NET is the successor to classic ASP (Active Server Pages).

What other technologies can be used to build web applications
1. PHP
2. Java
3. CGI
4. Ruby on Rails
5. Perl

What is a Web Application?
A web application is an application that is accessed by users using a web browser. Examples of web browsers include
1. Microsoft Internet Explorer
2. Google Chrome
3. Mozilla FireFox
4. Apple Safari
5. Netscape Navigator

What are the advantages of Web applications?
1. Web Applications just need to be installed only on the web server, where as desktop applications need to be installed on every computer, where you want to access them.
2. Maintenance, support and patches are easier to provide.
3. Only a browser is required on the client machine to access a web application.
4. Accessible from anywhere, provided there is internet.
5. Cross Platform

How Web applications work?
1. Web applications work on client/server architecture
2. On the client all you need is a browser, that can understand HTML
3. On the server side, the Web application runs under Microsoft Internet Information Services (IIS)

How web applications work

When the client enters the URL of the web application in the browser, and submits the request. The web server which hosts the web application, receives the request. The request is then processed by the application. The application generates, the HTML and hands it over to the IIS (web server). Finally, IIS sends the generated HTML to the client, who made the initial request. The client browser will the interpret the HTML and displays the user interface. All this communication, happens over the internet using HTTP protocol. HTTP stands for Hyper Text Transfer Protocol. A protocol is a set of rules that govern how two or more items communicate.

Read xml node value and attribute value from stroed xml in sql server

——Stored XML in DATA BASE——–

<container>
<param name=”paramA” value=”valueA” />
<param name=”paramB” value=”valueB” />
<Address>
<Mobile>9899999999</Mobile>
</Address>
</container>
select convert(xml,@XMLColumn).value(‘(/container/param[@name=”paramA”]/@value)[1]’, ‘varchar(50)’)
,*
from Table_Name where Status=0
select convert(xml,@XMLColumn).value(‘(/container/Address[Mobile])[1]’, ‘varchar(50)’)
,*
from Table_Name where Status=0

0

Image size and file type validation using Jquery

function validateReceipt() {
var File = $(“#<%=gvBankDeposit.ClientID%> tr”).find(‘.file’);
var lenght = $(“#<%=gvBankDeposit.ClientID%> tr”).find(‘.file’).size();
for (var i = 0; i < lenght; i++) {
//var File = trItem.eq(i).find(‘.file’);
if (File.val() != “”) {
if (typeof (File[0].files) != “undefined”) {
var size = parseFloat(File[0].files[0].size / 1024).toFixed(2);
if (size > 200) {
alert(“Filesize of image is too large. Maximum file size permitted is 50 KB”);
File.focus();
return false;
}
}
var ext = File.val().split(‘.’).pop().toLowerCase();
if ($.inArray(ext, [‘gif’, ‘png’, ‘jpg’, ‘jpeg’, ‘bmp’]) == -1) {
alert(‘Please choose only .jpg, .png ,.gif and .bmp image types!’);
File.focus();
return false;
}
}
}
}

Bind Dropdown in MVC Razor using Entity Framework.

———————–View———————————–

@model MDemo.Models.TestModel
@{
ViewBag.Title = “CtrlTest”;
}

<h2>CtrlTest</h2>
@Html.DropDownList(“ddlCity”,Model.CityList,”select city”)

—————–Controller————
public ActionResult BindCity()
{
TestModel M = new TestModel();
IEnumerable<TestModel> list = db.testData.ToList();
M.CityList = new SelectList(list, “CityId”, “CityName”);
return View(M);
}

———————MOdel—————
[Table(“Test_City”)]
public class TestModel
{
[Key]
public int CityId { get; set; }
public string CityName { get; set; }
public int CountryId { get; set; }
public string CityCode { get; set; }
[NotMapped]
public SelectList CityList { get; set; }
}

How to get node name and values from an xml variable in t-sql.

declare @xml xml

set @xml = ‘<DATA><book Category=”Hobbies And Interests” PropertyName=”C#” CategoryID=”44″>Sunil</book>
<sport Category=”Hobbies And Interests” PropertyName=”Cricket” CategoryID=”46″>Anil</sport></DATA>’

select T.c.value(‘@PropertyName’, ‘varchar(100)’),
T.c.value(‘(.)[1]’, ‘varchar(100)’)
from @xml.nodes(‘DATA/*’) T(c)

SQL SERVER – Better Performance – LEFT JOIN or NOT IN?

Get Client IP Address using API

<script type=”text/javascript”>
var Ip;
function getIP(json) {
Ip = json.ip;
}
$(document).ready(function () {
$(‘[id$=hdnIP]’).val(Ip);
});
</script>
<script type=”application/javascript”
src=”http://api.ipify.org?format=jsonp&callback=getIP”&gt;
</script>

<asp:HiddenField ID=”hdnIP” runat=”server”/>

Select Items in GridView Using CheckBox ,MultiSelection.

<script language=”javascript” type=”text/javascript”>
function validate() {
var checkedItems = $(“#<%=gvData.ClientID%> input[id*=’chkItem’]:checkbox:checked”).size();
if (checkedItems == 0) {
alert(“Please Select At Least One Item.”);
return false;
}
}
function SelectAll(chk) {
$(‘#<%=gvData.ClientID%>’).find(“input:checkbox”).each(function () {
if (this != chk) {
this.checked = chk.checked;
}
});
}
$(“.chkCss”).change(function () {
var all = $(‘.chkCss’);
if (all.length === all.find(‘:checked’).length) {
$(“.chkAll”).attr(“checked”, true);
} else {
$(“.chkAll”).attr(“checked”, false);
}
});
</script>
<asp:GridView ID=”gvData” runat=”server” AllowPaging=”True” AutoGenerateColumns=”False” >
<Columns>
<asp:TemplateField ItemStyle-Width=”20px”>
<ItemTemplate>
<asp:CheckBox ID=”chkItem” name=”lineup[]” runat=”server” CssClass=”chkCss” />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID=”chkHeaderItems” runat=”server” onclick=”javascript:SelectAll(this);” CssClass=”chkAll” />
</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

My Script

<script type=”text/javascript”>
function showdetail() {

document.getElementById(“ctl00_MainContent_RefundPayment_lbltaxRefund”).innerHTML = document.getElementById(‘ctl00_MainContent_hdnTaxRefund’).value;
document.getElementById(‘ctl00_MainContent_RefundPayment_lblSupplierPenality’).innerHTML = document.getElementById(‘ctl00_MainContent_hdnTaxRefund’).value;
document.getElementById(“lblRefundTotal”).innerHTML = document.getElementById(‘hdnTotalRefund’).value;
document.getElementById(‘<%=btnProceedAdjust.ClientID%>’).style.display = “none”;
document.getElementById(“Cancelled”).style.display = “none”;
document.getElementById(“proceedAdjustBalance”).style.display = “block”;
var gv = document.getElementById(“ctl00_MainContent_grdPax”);
var rbs = gv.getElementsByTagName(“input”);

for (var i = 0; i < rbs.length; i++) {
if (rbs[i].type == “radio”) {
rbs[i].disabled = true;

}
}
if (document.getElementById(“ctl00_MainContent_RefundPayment_hdnIsRQ”).value == “True”) {
document.getElementById(“proceedAdjustBalance”).style.display = “none”;
document.getElementById(“Cancelled”).style.display = “none”;
}
if (document.getElementById(“ctl00_MainContent_RefundPayment_hdnIsUnsuccessFull”).value == “True”) {
document.getElementById(“proceedAdjustBalance”).style.display = “none”;
document.getElementById(“Cancelled”).style.display = “block”;
document.getElementById(“ctl00_MainContent_RefundPayment_divNonAirUnSuccessFullBooking”).style.display = “none”;
}
}

function DisableGridRadio() {
var gv = document.getElementById(“ctl00_MainContent_grdPax”);
var rbs = gv.getElementsByTagName(“input”);
for (var i = 0; i < rbs.length; i++) {
if (rbs[i].type == “radio”) {
rbs[i].disabled = true;

}
}
}
function CheckFullRefund() {
if ($(‘#chkterms’).is(‘:checked’)) {
return true;
}
else {
alert(“Yes, I want to refund the complete amount to Traveler.”)
return false;
}
}
function CheckUnsuccessRefund() {
if ($(‘#chkUnsuccessterms’).is(‘:checked’)) {
return true;
}
else {
alert(“Yes, I want to refund the this booking.”)
return false;
}
}
function extractNumeric(str) {
return str.replace(/[^\d\.]/g, ”);//replace(/\D/g, “”);
}
$(document).ready(function () {
GetPaymentOptions();

});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
GetPaymentOptions();
}

function GetPaymentOptions() {
$(“[id$=rbtlIndividualCompany]”).click(function () {

if ($(this).find(“:checked”).val() == “Company”) {
$(“#<%=rbtlAB.ClientID%>”).hide();

}
if ($(this).find(“:checked”).val() == “Traveller”) {

$(“#<%=rbtlAB.ClientID%>”).show();

HideShowControl();
}

});
$(“[id$=rbtlAB]”).click(function () {

HideShowControl();

});
function HideShowControl() {
if ($(“[id$=rbtlAB]”).find(“:checked”).val() == “PA”) {
$(“[id$=trTotalPA]”).show();

}
if ($(“[id$=rbtlAB]”).find(“:checked”).val() == “TAT”) {
$(“[id$=trTotalTAT]”).show();
}
if ($(“[id$=rbtlAB]”).find(“:checked”).val() == “CASH”) {

$(“[id$=trTotalCash]”).show();
}
if ($(“[id$=rbtlAB]”).find(“:checked”).val() == “CHQ”) {
$(“[id$=trTotalCheque]”).show();
}
}
$(“[id$=rbtlCash]”).click(function () {

if ($(this).find(“:checked”).val() == “CASH”) {

$(“[id$=trTotalCash]”).show();
}
if ($(this).find(“:checked”).val() == “CHQ”) {
$(“[id$=trTotalCheque]”).show();
}
if ($(this).find(“:checked”).val() == “PA”) {
$(“[id$=trTotalPA]”).show();
}
if ($(this).find(“:checked”).val() == “TAT”) {
$(“[id$=trTotalTAT]”).show();
}
});
$(“[id$=rbtlSPAN]”).click(function () {

if ($(this).find(“:checked”).val() == “CASH”) {
$(“[id$=trTotalCash]”).show();
}
if ($(this).find(“:checked”).val() == “CHQ”) {
$(“[id$=trTotalCheque]”).show();
}
});

}

function getKeyCode(e) {
if (window.event)
return window.event.keyCode;
else if (e)
return e.which;
else
return null;
}

function keyRestrict(e, validchars) {
var key = ”, keychar = ”;
key = getKeyCode(e);
if (key == null) return true;
keychar = String.fromCharCode(key);
keychar = keychar.toLowerCase();
validchars = validchars.toLowerCase();
if (validchars.indexOf(keychar) != -1)
return true;
if (key == null || key == 0 || key == 8 || key == 9 || key == 13 || key == 27)
return true;
return false;
}

function AddAmount() {
var countMode = $(“.Noofpmtmode”);
var TotalAmt = 0.00;
for (var i = 0; i < countMode.length; i++) {
var PaidAmt = countMode.eq(i).find(“.lblPaidAmt”);
var RefundAmt = countMode.eq(i).find(“.lblRefundAmt”);
var vCount = countMode.eq(i).find(“.pmtmode”);
var rAmt = 0;
var RemainPaidAmt = parseFloat(PaidAmt.text()).toFixed(2);
for (var j = 0; j < vCount.length; j++) {
var Amt = parseFloat(vCount.eq(j).val() != ” ? vCount.eq(j).val() : “0”).toFixed(2);
RefundAmt.text(parseFloat(RemainPaidAmt – Amt).toFixed(2));
RemainPaidAmt -= Amt;
}
var afterRefund = parseFloat(countMode.eq(i).find(“.lblRefundAmt”).text()).toFixed(2);
TotalAmt = parseFloat(parseFloat(TotalAmt) + parseFloat(afterRefund)).toFixed(2);
}
$(‘[id$=lblFinalTotalAmount]’).text(parseFloat(TotalAmt).toFixed(2));

CalulateTotal();

// set total cash/chq/pa amount
}

function CalulateTotal() {
var RefundAmtCash = 0;
var RefundAmtPA = 0;
var RefundAmtTAT = 0;
var RefundAmtCHQ = 0;
var check = false;
var trPaymode = $(‘.noOfTotal’);

for (var i = 0; i < trPaymode.length; i++) {
var listofPmode = trPaymode.eq(i);

if (trPaymode.eq(i).find(‘.RadioPaymentModeList input[type=radio]’).is(‘:checked’)) {
var Val = trPaymode.eq(i).find(‘.RadioPaymentModeList input[type=radio]:checked’).val();
var lblAmt = trPaymode.eq(i).find(‘.lblRefundAmt’);
switch (Val) {
case “CASH”:
RefundAmtCash = parseFloat(RefundAmtCash) + parseFloat(lblAmt.text());
break;
case “CHQ”:
RefundAmtCHQ = parseFloat(RefundAmtCHQ) + parseFloat(lblAmt.text());
break;
case “PA”:
RefundAmtPA = parseFloat(RefundAmtPA) + parseFloat(lblAmt.text());
break;
case “TAT”:
RefundAmtTAT = parseFloat(RefundAmtTAT) + parseFloat(lblAmt.text());
break;
}
}
}

var PayAb1 = $(‘.noOfTotal1’);
if (PayAb1 != ”) {
if ((PayAb1 != null && PayAb1.find(‘.RadioPaymentModeListCMPAB input[type=radio]’).is(‘:checked’) && PayAb1.find(‘.RadioPaymentModeListCMPAB input[type=radio]:checked’).val() == “Traveller”)) {
var Val = PayAb1.eq(0).find(‘.RadioPaymentModeList input[type=radio]:checked’).val();
var lblAmt = PayAb1.eq(0).find(‘.lblRefundAmt’);
switch (Val) {
case “CASH”:
RefundAmtCash = parseFloat(RefundAmtCash) + parseFloat(lblAmt.text());
break;
case “CHQ”:
RefundAmtCHQ = parseFloat(RefundAmtCHQ) + parseFloat(lblAmt.text());
break;
case “PA”:
RefundAmtPA = parseFloat(RefundAmtPA) + parseFloat(lblAmt.text());
break;
case “TAT”:
RefundAmtTAT = parseFloat(RefundAmtTAT) + parseFloat(lblAmt.text());
break;
}
}
}

if (RefundAmtCash > 0) {
$(“[id$=trTotalCash]”).show();
$(“[id$=lblTotalCash]”).text(RefundAmtCash.toFixed(2));
}
else {
$(“[id$=trTotalCash]”).hide();
}

if (RefundAmtCHQ > 0) {
$(“[id$=trTotalCheque]”).show();
$(“[id$=lblTotalCheque]”).text(RefundAmtCHQ.toFixed(2));
}
else {
$(“[id$=trTotalCheque]”).hide();
}

if (RefundAmtPA > 0) {
if ($(‘[id$=trPA]’).length > 0) {
var PAAmt = $(‘[id$=lblRefundAmountPA]’).length > 0 ? $(‘[id$=lblRefundAmountPA]’).text() : “0.00”;
var totalamt = parseFloat(PAAmt) + parseFloat(RefundAmtPA);
$(“[id$=lblTotalPA]”).text(parseFloat(totalamt).toFixed(2));
}
else {
$(“[id$=trTotalPA]”).show();
$(“[id$=lblTotalPA]”).text(RefundAmtPA.toFixed(2));
}
}
else {
if ($(‘[id$=trPA]’).length > 0) {
var PAAmt = $(‘[id$=lblRefundAmountPA]’).length > 0 ? $(‘[id$=lblRefundAmountPA]’).text() : “0.00”;
$(“[id$=lblTotalPA]”).text(PAAmt);
}
else {
$(“[id$=trTotalPA]”).hide();
}
}

if (RefundAmtTAT > 0) {
if ($(‘[id$=trTAT]’).length > 0) {
var TATmt = $(‘[id$=lblRefundAmountTAT]’).length > 0 ? $(‘[id$=lblRefundAmountTAT]’).text() : “0.00”;
var totalamt = parseFloat(TATmt) + parseFloat(RefundAmtTAT);
$(“[id$=lblTotalTAT]”).text(parseFloat(totalamt).toFixed(2));
}
else {
$(“[id$=trTotalTAT]”).show();
$(“[id$=lblTotalTAT]”).text(RefundAmtTAT.toFixed(2));
}
}
else {
if ($(‘[id$=trTAT]’).length > 0) {
var TATmt = $(‘[id$=lblRefundAmountTAT]’).length > 0 ? $(‘[id$=lblRefundAmountTAT]’).text() : “0.00”;
$(“[id$=lblTotalTAT]”).text(TATmt);
}
else {
$(“[id$=trTotalTAT]”).hide();
}
}
}

</script>