Pages

Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Friday, February 17, 2012

bind DropDownList using jquery ajax in asp.net

Bind DropDownList using Jquery Ajax in Asp.net

Introduction : In this article i will show you how to bind a DropDownList to avoid page refresh via a webmethod .It is very useful and many time we require to use Jquery ajax . I have here provided html and c# code behind code to understand Jquery Ajax in asp.net .

Jquery Ajax Code to Bind dropdownlist in asp.net
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function () {
  $.ajax({
   type: "POST",
   contentType: "application/json; charset=utf-8",
   data: "{}",
   url: "AjaxInJquery.aspx/GetCityData",
   dataType: "json",
   success: ajaxSucceess,
   error: ajaxError
  });
  function ajaxSucceess(response) {
   $.each(response.d, function (key, value) {
    $("#ddlCategory").append($("<option></option>").val(value.CityId).html(value.Cityname));
   });
  }
  function ajaxError(response) {
   alert(response.status + ' ' + response.statusText);
  }
 });
</script>
Html Code DropDownList
<asp:DropDownList ID="ddlCategory" runat="server">
</asp:DropDownList>
C# Code for binding Dropdownlist using Jquery Ajax
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
using System.Data.SqlClient;

public partial class AjaxInJquery : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {

 }
 [WebMethod]
 public static List GetCityData()
 {
  List CityCollection = new List();
  try
  {
   DataSet Ds = GetDataSet("Select * from Countrytable");
   CityCollection = Ds.Tables[0].AsEnumerable().Select(data => new City() { CityId = (int)data["CountryID"], Cityname = (string)data["CountryName"] }).ToList();

  }
  catch (Exception) { }
  return CityCollection;
 }
 public static DataSet GetDataSet(string Query)
 {
  DataSet Ds = new DataSet();
  try
  {
   string strCon = @"Data Source=ServerName;Initial Catalog=Test;Integrated Security=True";
   SqlConnection Con = new SqlConnection(strCon);
   SqlDataAdapter Da = new SqlDataAdapter(Query, Con);
   Da.Fill(Ds);

  }
  catch (Exception) { }
  return Ds;
 }
}
public class City
{
 public int CityId { get; set; }
 public string Cityname { get; set; }
}

Related Other posts

Saturday, January 28, 2012

Detect Browser in Jquery

Detect Browser in Jquery

Introduction : In this article i will show how to detect browser in Jquery . Many times we require to detect browser and need to do code accordingly as per browser. By using following code you can detect Internet Explorer Browser ,Mozila Browser ,Safari Browser In Jquery

Jquery Code to Detect Browser :
   
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if ($.browser.msie) { alert('Internet Explorer and Version is ' + $.browser.version) }
        if ($.browser.safari) { alert('Safari Browser .') }
        if ($.browser.mozilla) { alert('Mozila Browser and Version is ' +  $.browser.version) }
    });    
</script>


Related Other posts

Wednesday, January 11, 2012

Set hidden field's value on button's click in Jquery

Set hidden field's value on button's click in Jquery

Introduction : In this i will show you how to set value of hidden field's value on button click usinng Jquery . It is very easy to set value of hidden field's value using Jquery .I have written two way to set value of hidden field using Jquery . In first way you can write code in $(document).ready() function and second you can directly assign to on click of button .

HTML Code for Set hidden field's value on button's click in Jquery :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryValidation.aspx.cs" Inherits="HamidSite.JqueryValidation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript"  >
        $(document).ready(function () {
            $("#submit1").click(function () {
                $('#hiddenTest').val('Test-2');
                alert($('#hiddenTest').val());
            });
        });
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <input type="hidden" id="hiddenTest" value="" />
            <input id="submit" type="submit" value="test-1" onclick="$('#hiddenTest').val('Test-1');alert($('#hiddenTest').val());" runat="server" />            
            <input id="submit1" type="submit" value="test-2"  runat="server" />
    </div>
    </form>
</body>
</html>

Related Other posts

Friday, January 6, 2012

Validation Using Jquery in Asp.net page

Validation Using Jquery in Asp.net page

Introduction : This article show you how to add validation using Jquery in Asp.net . Validation is easy in jquery just need add my following complete html code for Jquery validation in asp.net .



Hows  Jquery validation works in Asp.net :
 
you can download  Jquery.validate.js from http://jzaefferer.github.com/jquery-validation/jquery.validate.js
you can apply required validation by adding class to textbox like : CssClass="required". ..etc .so on you can Url validation ,date validation , digits validation ..etc using jquery . 

Complete Html Code for Jquery validation in asp.net page :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryValidation.aspx.cs" Inherits="HamidSite.JqueryValidation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript"  >
         $(document).ready(function () {
             $("#form1").validate();
         });
  </script>
 <style type="text/css">
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <fieldset style="width:500px;vertical-align:middle;font-family:Verdana;font-size:12px;border-bottom-width:medium;" >
                <legend>Validation Using Jquery in Asp.net page </legend>
                <table align="center" cellpadding="5px" >
                    <tr>
                        <td>
                            Name :
                        </td>
                        <td>
                            <asp:TextBox ID="txtname" CssClass="required" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Amount :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox1" CssClass="digits" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Website url :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox2" CssClass="url" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Email :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox3" CssClass="email" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Date :
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox4" CssClass="date" runat="server" ></asp:TextBox>
                        </td>
                    </tr>
                     <tr>
                        <td>
                            
                        </td>
                        <td>
                            <asp:Button ID="btnSave"  runat="server" Text="Submit" />
                        </td>
                    </tr>
                </table>
            </fieldset>
    </div>
    </form>
</body>
</html>



Related Other posts