Monday, June 27, 2011

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

aspdotnetcodebook 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" %>

<!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.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.preventDefault();
                $("#gvData").html("");
                $("#loader").show();
                sendData();
            });
        });
        function sendData() {
            var loc = window.location.href;
            loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Jquery_Progress.aspx" : loc;
            $.ajax({
                type: "POST",
                url: loc + "/GetAllProducts",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $("#loader").hide();
                    $("#gvData").html(msg.d);
                },
                error: function () {
                    alert("An unexpected error has occurred during processing.");
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnLoad" runat="server" Text="LoadProduct" /><br />
    <div id="gvData">
    </div>
    <div id="loader" class="loader">
        Loading....</div>
    </form>
</body>
</html>
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.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Text;

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

    }
    [WebMethod]
    [ScriptMethod]
    public static string GetAllProducts()
    {
        //Comment below line for production server
        System.Threading.Thread.Sleep(3000);
        StringBuilder sb=new StringBuilder();
        JavaScriptSerializer json=new JavaScriptSerializer();
        List<Product> products = ProductDAL.GetProducts();
        json.Serialize(products, sb);
       return sb.ToString();
    }
}
public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}
public class ProductDAL
{
    public static List<Product> GetProducts()
    {
        return new List<Product>()
                   {
                       new Product() {ProductID = 1, ProductName = "P001", Description = "Desc01"},
                       new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
                       new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
                       new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
                       new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
                   };
    }
}

Highlighting rows/cells of a GridView on hover

aspdotnetcodebook 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" %>

<!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.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(function () {
                $(this).addClass("highlight");
            });
            $("#<%=gvProducts.ClientID %> tr").mouseout(function () {
                $(this).removeClass("highlight");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvProducts" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GridviewRowColorChange : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            gvProducts.DataSource = ProductDAL.GetProducts();
            gvProducts.DataBind();
        }
    }
}
public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}
public class ProductDAL
{
    public static List<Product> GetProducts()
    {
        return new List<Product>()
                   {
                       new Product() {ProductID = 1, ProductName = "P001", Description = "Desc01"},
                       new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
                       new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
                       new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
                       new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
                   };
    }

}

How to select/deselect all checkbox in gridview using jquery

aspdotnetcodebook 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" %>

<!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.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'));
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <input type="checkbox" id="chkAll" runat="server" value='<%#Eval("ProductID") %>' />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input type="checkbox" id="chkSelected" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ProductName" HeaderText="ProductName" />
                <asp:BoundField DataField="Description" HeaderText="Description" />
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GridViewSelectAll : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        gvProducts.DataSource = ProductDAL.GetProducts();
        gvProducts.DataBind();
    }
}
public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}
public class ProductDAL
{
    public static List<Product> GetProducts()
    {
        return new List<Product>()
                   {
                       new Product() {ProductID = 1, ProductName = "P001", Description = "Desc01"},
                       new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
                       new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
                       new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
                       new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
                   };
    }

}

Sunday, June 26, 2011

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

aspdotnetcodebook
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Img_Enlarge.aspx.cs" Inherits="Img_Enlarge" %>

<!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 type="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(function () {
                $(".thumbnail").css("opacity", ".5");
                $(this).animate({ opacity: 1.0 });
                $("#imgContainer").append("<img class='image' src='" + $(this).attr("src") + "' />");

            });
            $(".thumbnail").mouseout(function () {
                $(".thumbnail").css("opacity", "1.0");
                $(".image").remove();
            });
        });
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
    <div align="center">
        <img alt="" class="thumbnail" src="Images/Tree.jpg" />
        <img class="thumbnail" src="Images/dock.jpg" alt="" />
        <img class="thumbnail" src="Images/forest.jpg" alt="" />
        <img class="thumbnail" src="Images/garden.jpg" alt="" />
        <div id="imgContainer">
        </div>
    </div>
</body>
</html>

Wednesday, June 22, 2011

How to Implement jQuery UI slider with ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slider_Demo.aspx.cs" Inherits="Slider_Demo" %>

<!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">
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/start/jquery-ui.css" />
    <script type="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(
            {
                min: <%=MinValue%>,
                max: <%=MaxValue%>,
                step: <%=Step %>,
                slide: function (event, ui) {
                    $("#txtValue").val(ui.value);
                }
            });
        });
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="slider" style="width: 200px;">
        </div>
        <br />
        <asp:TextBox ID="txtValue" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Slider_Demo : System.Web.UI.Page
{
    public const int MinValue = 0;
    public const int MaxValue = 100;
    public const int Step = 5;
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Tuesday, June 21, 2011

How to Invoke required field validator through javascript in asp.net

In this post I will show you how to invoke required field validator through java script in asp.net.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReqJs.aspx.cs" Inherits="ReqJs" %>

<!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 type="text/javascript">
        function PerformCheck() {
            if (Page_ClientValidate()) {
                //Do some more stuff here
                alert("Page Is Valid");
            }

        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        FirstName:
        <asp:TextBox runat="server" ID="txtFirstName"></asp:TextBox>
        <asp:RequiredFieldValidator ErrorMessage="*" Text="Please Enter first name" ControlToValidate="txtFirstName"
            runat="server" /><br />
        LastName:
        <asp:TextBox runat="server" ID="txtLastName"></asp:TextBox>
        <asp:RequiredFieldValidator ErrorMessage="*" Text="Please enter last name" ControlToValidate="txtLastName"
            runat="server" /><br />
        <input type="submit" id="btnSubmit" onclick="PerformCheck();" value="Validate" />
    </div>
    </form>
</body>
</html>

Saturday, June 18, 2011

How to display rss feed in asp.net

In this post I will show you how to display rss feed in asp.net using XmlDataSource and DataList control. Rss_cs.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RSS_CS.aspx.cs" Inherits="RSS_CS" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtUrl" runat="server" Width="349px"></asp:TextBox>
        <asp:Button ID="btnLoad" runat="server" Text="Load" OnClick="btnLoad_Click" />
        <br />
        <asp:DataList ID="dlRss" runat="server">
            <ItemTemplate>
                <%#XPath("title") %><br />
                <i>
                    <%#XPath("description") %></i> <i>
                        <br />
                        <%#XPath("pubdate") %></i> <b><a href='<%#XPath("link") %>'>
                            <%#XPath("link") %></a></b><br />
            </ItemTemplate>
        </asp:DataList>
        <asp:XmlDataSource ID="xml" runat="server" XPath="rss/channel/item"></asp:XmlDataSource>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class RSS_CS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
        
    }
    protected void btnLoad_Click(object sender, EventArgs e)
    {
        
        if (txtUrl.Text != "")
        {
            xml.DataFile = txtUrl.Text;
            dlRss.DataSourceID = xml.ClientID;
        }
    }
}