Skip to main content

Posts

Showing posts with the label Jquery

How to post array of hashes in wcf

In this post I will show you how to post json array hashes in wcf rest service.Before going to code snippet let's discuss some basic terminology.

What is Array of Hashes
Array of hashes is a data structure in which each record itself contains key/value pairs. Arrays of hashes are used less frequently than the other structures.Below is example of array of hashes
AoH = ( { husband => "barney", wife => "betty", son => "bamm bamm", }, { husband => "george", wife => "jane", son => "elroy", }, { husband => "homer", wife => "marge", son => "bart", }, ); JSON String

When we enclosed the json data into quote then we called this string is JSON string
var jsonString='[{ "x": 10, "y": 20, "z": 30 }, { "x": 12, "y"…

Calling cross domain wcf service using Jquery

In this post,I will show you how to call cross domain service using jquery.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Runtime.Serialization; using System.ServiceModel; using System.IO; using System.ServiceModel.Web; using System.Runtime.Serialization.Json; namespace CorssDomainService { [DataContract] publicclass Order { [DataMember] publicint ID { get; set; } [DataMember] public DateTime OrderDate { get; set; } [DataMember] publicstring Name { get; set; } } [ServiceContract] publicinterface IOrderService { [OperationContract] [WebInvoke(Method = "GET", UriTemplate = "/", ResponseFormat = WebMessageFormat.Json )] string ProcessOrder(); } [ServiceBehavior] publicclass OrderService : IOrderService { [OperationBehavior] publicstring ProcessOrder() { …

How to validate asp.net form using Jquery

In this post I will show you how to validate asp.net form using jqery. Create a new website,add a new js file ,and add following code inside it function validateForm(e) { var formIsValid = true; // check that a valid email address has been entered var emailRegExp = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/; if (!emailRegExp.test(String($("#txtEmail").val()).toUpperCase())) { addError("txtEmail", "Please enter a valid email address."); formIsValid = false; } else { removeError("txtEmail"); } // check that first name has one or more characters if ($("#txtFirstName").val() == '') { addError("txtFirstName", "This field is required."); formIsValid = false; } else { removeError("txtFirstName"); } // check that last name has one or more characters if ($("#txtLastName").val() == '') { …

How to sum the value of gridview column using jquery

In this post I will show how to sum the value of gridview column on selection of checkbox .Let us suppose that you have a gridview which has three column named Name,Quantity and Price.Now your requirement is to sum the value of price filed on selection of checkbox.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script> <title></title> <script type="text/javascript"> $(document).ready(function () { var total; //Column index value of price field (Column index start from 1)var columnIndexValue = 4; varchecked…

How to display progress indicator during ajax call in asp.net[Jquery]

In this post I will show you how to display progress indicator during ajax call. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery_Progress.aspx.cs" Inherits="Jquery_Progress" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script> <style type="text/css"> .loader { display: none; background-color: Red; width: 100px; } </style> <script language="javascript" type="text/javascript"> $(document).ready(function () { $("#btnLoad").click(function (e) { e.preve…

Highlighting rows/cells of a GridView on hover

In this post I will show you how to highlight grid view row on mouseover using jquery. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewRowColorChange.aspx.cs" Inherits="GridviewRowColorChange" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script> <style type="text/css"> .highlight { background-color:#9999FF; } td { cursor: pointer; } </style> <script type="text/javascript"> $(document).ready(function () { $("#<%=gvProducts.ClientID %> tr").mouseover(fun…

How to select/deselect all checkbox in gridview using jquery

In this post I will show how to select/deselect checkbox present inside gridview using jquery. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewSelectAll.aspx.cs" Inherits="GridViewSelectAll" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#<%=gvProducts.ClientID%> input[id$='chkAll']:checkbox").click(function () { $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").attr('checked', $(this).is(':checked')); …

How to enlarge image on mouseover in asp.net using jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Img_Enlarge.aspx.cs" Inherits="Img_Enlarge" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scripttype="text/javascript"src="Scripts/jquery-1.4.1.js"></script> <style type="text/css"> .thumbnail { height: 100px; width: 100px; position: relative; } .image { position: relative; width: 400px; height: 250px; } </style> <script language="javascript" type="text/javascript"> $(document).ready(function () { $(".thumbnail").mouseover(functio…

How to Implement jQuery UI slider with ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slider_Demo.aspx.cs" Inherits="Slider_Demo" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><linktype="text/css"rel="Stylesheet"href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/start/jquery-ui.css"/><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"> </script> <title></title> <script type="text/javascript"> $(document).ready(function () { $("#slider").slider( …

Jquery and CheckboxList

In this post i am going to show you how use jquery in asp.net to select the checkbox of Checkbox List <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadioButtonListJquery.aspx.cs" Inherits="RadioButtonListJquery" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="Scripts/jquery-1.3.2.js"type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#selectAll").click(function () { $("input[type='checkbox'").not("#selectAll").each(function () { $(this).attr("checked", "true"); }); …

jQuery Autocomplete and ASP.NET

In this post i am going to show how to use jquery Autocomplte plugin in asp.net.



Open Microsoft Visual Studio .NET. In Visual C# .NET, create a new WebSiteRight click on new website and add a new class(DummyDAL.cs) in App_Code folder and copy the following code
using System; using System.Collections.Generic; using System.Linq; using System.Web; publicclass Country {     publicint ID { get; set; }     publicstring CountryName { get; set; }     public System.Collections.Generic.List<Country> GetList()     {         System.Collections.Generic.List<Country> list = new System.Collections.Generic.List<Country>()         {             new Country(){ID=1,CountryName="Inida"},             new Country(){ID=1,CountryName="Indonesia"},             new Country(){ID=2,CountryName="USA"},             new Country(){ID=3,CountryName="UK"},             new Country(){ID=4,CountryName="Australia"},             new Country(){ID=5,Country…

Autocomplete using Jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><scriptsrc="Scripts/jquery-1.3.2.js"type="text/javascript"></script> <title></title> <style type="text/css"> .listbox { position: relative; left: 10px; margin: 10px; width: 200px; background-color: #000; color: #fff; border: 2px solid #000; } .nameslist { margin: 0px; padding: 0px; list-style: none; } .hover { background-color: Teal; color: b…

GridView row double click and postback using Jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><styletype="text/css"> .selected { background-color: Red; } </style><scriptsrc="Scripts/jquery-1.3.2.js"type="text/javascript"></script> <title></title> <script type="text/javascript"> var selected = null; $(document).ready(function(){ $("#<%=GridView1.ClientID %>").find("tr").click(function(){ $(selected).removeClass("selected"); $(this).addClass("selected"); selected = this; }); $("#<%=GridView1.Cl…

How to get cell value of gridview using JQUERY

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="Scripts/jquery-1.3.2.js"type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var list = ""; $("#btnGet").click(function() { $("#<%=GridView1.ClientID %> tr").each(function() { //Skip first(header) rowif (!this.rowIndex) return; var age = $(this).find("td:last").html(); list += age + "</br>"; }); …