Asp.Net

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

suneelkumargupta Asp.Net, C #, javaScript, Jquery, suneel , , , ,

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

suneelkumargupta 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.

Radiobutton Checked changed event in gridview.

suneelkumargupta Asp.Net, C # , 

protected void rdbdiscontinued_CheckedChanged(object sender, EventArgs e)
        {
            RadioButton rd = (RadioButton)sender;
            GridViewRow row = (GridViewRow)rd.NamingContainer;
            Label lblprodid = (Label)row.FindControl("lblproductid");
            Label lbproductname = (Label)row.FindControl("lblproductname");
            Label lbcategoryid = (Label)row.FindControl("lblcategoryid");
            Label lbunit = (Label)row.FindControl("lblunitprice");
            Label txtunitstock = (Label)row.FindControl("lblunitsinstock");
            if (rd.Checked == true)
            {
                Productsbll pbl = new Productsbll();
                Products prod = new Products();
                row.Visible = false;
                prod.Productid = Convert.ToInt32(lblprodid.Text);
                prod.ProductName = lbproductname.Text;
                prod.CategoryID = Convert.ToInt32(lbcategoryid.Text);
                prod.UnitPrice = Convert.ToInt32(lbunit.Text);
                prod.UnitsinStock = Convert.ToInt32(txtunitstock.Text);
                pbl.UpdateProduct(prod);
            }
            GetProducts();
        }

accept terms and conditions check validation on checkbox using javascript

suneelkumargupta Asp.Net, javaScript, Jquery , ,

<script type=”text/javascript”>
function CheckFullRefund() {
if ($(‘#chkterms’).is(‘:checked’)) {
return true;
}
else {
alert(“Please accept terms & conditions.”)
return false;
}
}
</script>

————–aspx————

<asp:Button ID=”Button2″ class=”search_btn” runat=”server” Style=”width: 100%”
Text=”Proceed to Refund” OnClientClick=”return CheckFullRefund();” />

Conditional base style in Gridview using Eval() Method.

suneelkumargupta Asp.Net, C # ,

<a href=’Receipt.aspx?Id=<%#Eval(“RecNo”) %>&TravellerId=<%#Eval(“StID”) %>’ onclick=”window.open(this.href,’targetWindow’,
‘toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,
height=600′);return false;”
style=’display:<%#(Eval(“RecNo”).ToString())!=”” ? “block”: “none” %>’>View Receipt</a>

Numeric Validation Using JQuery .

suneelkumargupta Asp.Net, javaScript, Jquery , ,

<script type=”text/javascript” language=”javascript”>                                                onchange=”this.value=extractNumeric(this.value);” onBlur=”if(this.value==”){ this.value=’0.00′}” onFocus=”if(this.value==’0.00′){ this.value=”}”></asp:TextBox>
//Only Numeric Value

function isNumericKey(e) {
var k = document.all ? e.keyCode : e.which;
return ((k > 47 && k < 58) || k == 8 || k == 0);
}

function extractNumeric(str) {
return str.replace(/\D/g, “”);
}

//With Decimal Value
var charCode = document.all ? e.keyCode : e.which;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
return true;
</Script>

————–HTML—————————

<asp:TextBox Style=”width: 85px; float: left;” ID=”txtDepositAmt” runat=”server” MaxLength=”6″ onkeypress=”return isNumericKey(event)” Text=”0.00″ onchange=”this.value=extractNumeric(this.value);” onBlur=”if(this.value==”){ this.value=’0.00′}” onFocus=”if(this.value==’0.00′){ this.value=”}”></asp:TextBox>

Open new pop up window on href click . Then prind window.

suneelkumargupta Asp.Net, C #, javaScript , , ,

<style>
@media print {
.noprint {
display: none !important;
}
</style>

<a id=”lnkPrintReceipt” class=”link” onclick=”javascript:window.open(‘../../admin/Reciept.aspx?Id=216&Type=TY’,’PaymentReceipt’,’width=800,height=500,toolbar=0,scrollbars=1′)” target=”_blank” style=”cursor: pointer; text-decoration: none;”>PMT0311</a>

<div class=”btn”>
<input type=”submit” name=”ctl01″ value=”Print Receipt” onclick=”javascript: window.print();” class=”btn_blue no-print”>
</div>