Archive

Archive for December, 2013

2013 in review

December 31, 2013 Leave a comment

The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.

Here’s an excerpt:

The Louvre Museum has 8.5 million visitors per year. This blog was viewed about 79,000 times in 2013. If it were an exhibit at the Louvre Museum, it would take about 3 days for that many people to see it.

Click here to see the complete report.

Advertisements
Categories: Uncategorized

Show Confirmation Message after Validation

December 31, 2013 Leave a comment

Hi all,

try this example to show confirm message after validation


<script type="text/javascript">
 function validateAndConfirm(group, message) {
 var g = '';
 g = group;
 Page_ClientValidate(g);
 if (Page_IsValid) {
 return confirm(message);
 }
 }
</script>

<asp:ImageButton ID="btnDelete" runat="server" CausesValidation="true" ValidationGroup="search" OnClientClick="return validateAndConfirm('search','Are you sure?');" ImageUrl="~/Images/delete.png" />

Hope this helps

Good Luck

 

 

Categories: ASP.Net, Javascript

JQuery UI Modal Dialog With Gridview to display Details

December 28, 2013 Leave a comment

Hi all,

try this example to use JQuery UI Modal Dialog With Gridview to display Details

In this example i will use Northwind Database to display Categories and there related Products

1) Open VS 2008 and create a new website

2) Add new Web.Config and add connection string


<connectionStrings>
 <add name="NorthwindConnectionString" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

3) Add new Web page name it “DisplayCategories.aspx” and from Toolbox drag and drop Gridview Control and bind it to Categories table using SQLDataSource control


<asp:GridView ID="GV_Category" runat="server" DataSourceID="sds_Category" AutoGenerateColumns="False"
 DataKeyNames="CategoryID" CellPadding="4" ForeColor="#333333">
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <Columns>
 <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" ReadOnly="true" InsertVisible="False"
 SortExpression="CategoryID" />
 <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
 <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
 <asp:TemplateField>
 <ItemTemplate>
 <a id="pop" class="popclass" href='ProductDetail.aspx?CategoryID=<%# Eval("CategoryID")%>'
 title="Products for Category :<%# Eval("CategoryName")%>">Products Detail</a>
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Category" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
 </asp:SqlDataSource>

4) Add the following Javascript to Open Dialog for Details when i click on Category to display Category’s Product


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>
 <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">
 <script type="text/javascript">
 $(document).ready(function() {
 $('.popclass').live('click', function(e) {
 e.preventDefault();
 var page = $(this).attr("href")
 var pagetitle = $(this).attr("title")
 var $dialog = $('<div></div>')
 .html('')
 .dialog({
 autoOpen: false,
 modal: true,
 height: 525,
 width: 500,
 title: pagetitle,
 buttons: [{
 text: "Close",
 click: function() {
 $(this).dialog("close");
 }}]
 });
 $dialog.dialog('open');
 });
 });
 </script>

5) Add new Page name it “ProductDetail.aspx” and drag and drop Gridview and bind it to Products table using SQLDataSource With Category ID passed from Query String


<div>
 <asp:GridView ID="gvProducts" runat="server" DataSourceID="sds_Products" CssClass="datagrid"
 AutoGenerateColumns="False" DataKeyNames="ProductID" CellPadding="4" ForeColor="#333333">
 <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
 <Columns>
 <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="true" InsertVisible="False"
 SortExpression="ProductID" />
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
 <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
 </Columns>
 <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
 <AlternatingRowStyle BackColor="White" />
 </asp:GridView>
 <asp:SqlDataSource ID="sds_Products" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
 SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
 <SelectParameters>
 <asp:QueryStringParameter Name="CategoryID" QueryStringField="CategoryID" Type="Int32" />
 </SelectParameters>
 </asp:SqlDataSource>
 </div>

Hope this helps

Good Luck.

 

Categories: ASP.Net, Javascript, Jquery

End Date should be greater than Start Date using jQuery Date Picker

December 12, 2013 Leave a comment

Hi all,

try this example to allow user to select date from JQuery Date Picker where End date should be greater than start date and also greater than today date


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" type="text/css" media="all" />
 <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#txtFromDate").datepicker({
 minDate: 0,
 maxDate: "+60D",
 numberOfMonths: 2,
 onSelect: function (selected) {
 $("#txtToDate").datepicker("option", "minDate", selected)
 }
 });
 $("#txtToDate").datepicker({
 minDate: 0,
 maxDate: "+60D",
 numberOfMonths: 2,
 onSelect: function (selected) {
 $("#txtFromDate").datepicker("option", "maxDate", selected)
 }
 });
 });
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <label for="StartDate">
 Start Date:
 <input type="text" name="txtFromDate" id="txtFromDate" value="" class="frmitem datepick" readonly="true" />
 </label>
 <label for="EndDate">
 End Date:
 <input type="text" name="txtToDate" id="txtToDate" value="" class="frmitem datepick" readonly="true" />
 </label>
 </div>
 </form>
</body>
</html>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery

Validate Number only using Regular Expressions

December 8, 2013 Leave a comment

Hi all,

try this example to Validate Number only using Regular Expressions

you can check my previous posts

Allow Number Only in TextBox

Make TextBox accept Number only

Allow Number Only In ASP.Net TextBox


private bool CheckNumberOnly(string value)
 {
 bool isNumber = false;
 try
 {
 //string nume = @"^\d+$";
 string num2 = @"^[0-9]+$";
 Match match = Regex.Match(value, num2);
 if (match.Success)
 {
 isNumber = true;
 }
 }
 catch
 {
 return false;
 }
 return isNumber;
 }

Hope this helps

Good Luck.

Categories: ASP.Net

Disable AutoComplete in ASP.NET

December 5, 2013 Leave a comment

Hi all,

try this example to disable AutoComplete in ASP.Net

First Way :

<form runat="server" autocomplete="off">

Second Way :

<asp:TextBox ID="tbCreditCardNumber" runat="server" autocomplete="off" />

Third Way : (From Code behind in Page Load)

tbCreditCardNumber.Attributes.Add( "autocomplete", "off" );

Forth Way :

<asp:TextBox ID="tbCreditCardNumber" runat="server" AutoCompleteType="Disabled" />

Fifth Way : (From Code behind in Page Load)

tbCreditCardNumber.AutoCompleteType = AutoCompleteType.Disabled;

Hope this helps

Good Luck

Categories: ASP.Net

JQuery to Bind Cascading DropDownList from Database

December 1, 2013 Leave a comment

Hi all,

try this example to use JQuery to Bind Cascading DropDownList from Database

in this example i will use Northwind database

1) Open VS 2008 and create a new web site

2) Add new ASP Page and from Toolbox drag and drop Two dropdownlist control into your page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_Default" EnableEventValidation="false"%>

<!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="jquery-1.8.3.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $.ajax({
 type: "POST",
 contentType: "application/json; charset=utf-8",
 data: "{}",
 url: "Default2.aspx/GetCategoryData",
 dataType: "json",
 success: ajaxSucceess,
 error: ajaxError
 });
 function ajaxSucceess(response) {
 $("#<%=ddl_Category.ClientID%>").empty();
 $("#<%=ddl_Category.ClientID%>").append($("<option></option>").val('-1').html('Please Select Category'));

$("#<%=ddl_Product.ClientID %>").attr('disabled', 'disabled');
 $("#<%=ddl_Product.ClientID%>").empty();
 $("#<%=ddl_Product.ClientID%>").append($("<option></option>").val('-1').html('Please Select Product'));
 $.each(response.d, function(key, value) {
 $("#<%=ddl_Category.ClientID%>").append($("<option></option>").val(value.CategoryId).html(value.CategoryName));
 });
 }
 function ajaxError(response) {
 alert(response.status + ' ' + response.statusText);
 }
 });

function GetProduct() {
 var Category = $("#<%=ddl_Category.ClientID%>").val();
 $("#<%=ddl_Product.ClientID%>").empty();
 $("#<%=ddl_Product.ClientID%>").append($("<option></option>").val('-1').html('Please Select Product'));
 if (Category == '-1') {
 $("#<%=ddl_Product.ClientID %>").attr('disabled', 'disabled');
 }
 else {
 $('#<%=ddl_Product.ClientID %>').removeAttr("disabled");

$.ajax({
 type: "POST",
 contentType: "application/json; charset=utf-8",
 data: "{'CategoryID':'" + Category + "'}",
 url: "Default2.aspx/GetProductData",
 dataType: "json",
 success: ajaxProductSucceess,
 error: ajaxProductError
 });
 }
 }

function ajaxProductSucceess(response) {
 $.each(response.d, function(key, value) {
 $("#<%=ddl_Product.ClientID%>").append($("<option></option>").val(value.ProductId).html(value.ProductName));
 });
 }
 function ajaxProductError(response) {
 alert(response.status + ' ' + response.statusText);
 }
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 Select Category :
 <asp:DropDownList ID="ddl_Category" runat="server" AppendDataBoundItems="True" onchange="GetProduct();">
 <asp:ListItem Text="Please Select" Value="-1"></asp:ListItem>
 </asp:DropDownList>
 <br />
 Select Product :
 <asp:DropDownList ID="ddl_Product" runat="server" AppendDataBoundItems="True" Enabled="false">
 <asp:ListItem Text="Please Select" Value="-1"></asp:ListItem>
 </asp:DropDownList>
 </div>
 </form>
</body>
</html>

3) In Code behind add the following Code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

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

}
 [WebMethod]
 public static List<Category> GetCategoryData()
 {
 List<Category> CategoryCollection = new List<Category>();
 try
 {
 DataSet Ds = GetDataSet("Select * from Categories");
 CategoryCollection = Ds.Tables[0].AsEnumerable().Select(data => new Category() { CategoryId = (int)data["CategoryId"], CategoryName = (string)data["CategoryName"] }).ToList();
 }
 catch (Exception) { }
 return CategoryCollection;
 }
 [WebMethod]
 public static List<Product> GetProductData(int CategoryID)
 {
 List<Product> ProductCollection = new List<Product>();
 try
 {
 DataSet Ds = GetDataSet("Select * from Products where CategoryID=" + CategoryID);
 ProductCollection = Ds.Tables[0].AsEnumerable().Select(data => new Product() { ProductId = (int)data["ProductId"], ProductName = (string)data["ProductName"] }).ToList();
 }
 catch (Exception) { }
 return ProductCollection;
 }

public static DataSet GetDataSet(string Query)
 {
 DataSet Ds = new DataSet();
 try
 {
 string strCon = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
 SqlConnection Con = new SqlConnection(strCon);
 SqlDataAdapter Da = new SqlDataAdapter(Query, Con);
 Da.Fill(Ds);
 }
 catch (Exception) { }
 return Ds;
 }

}

public class Category
{
 public int CategoryId { get; set; }
 public string CategoryName { get; set; }
}

public class Product
{
 public int ProductId { get; set; }
 public string ProductName { get; set; }
}

4) In Web.Config file add this line for Connection String to database


<connectionStrings>
 <add name="conn" connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
 </connectionStrings>

Hope this helps

Good Luck.

Categories: ASP.Net, Jquery