Wednesday, July 28, 2010

LeftMenu UserControl using ListView in ASP.Net

 This is a leftmenu usercontrol that fetch datas (Menu Items and submenu items) from database and build a  userinteface with good look and feel.


 From above leftmenu, we have two categories(Mobile and Laptop) in database  and subcategories are listed under the corresponding category. By using this user control in our master page, it is very easy to control navigation menu. We will do any functionalities or redirect to any aspx pages on click event of each subacategories in the list.

Here I am posted the complete code.

UC_LeftMenu.ascx
----------------------

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UC_LeftMenu.ascx.cs"
    Inherits="eMall.UserControls.UC_LeftMenu" %>
<link href="../styles/w4d.css" rel="stylesheet" type="text/css" />
<div id="boxbg">
    <asp:ListView runat="server" ID="RightMenuItems" ItemPlaceholderID="PlaceHolder2">
        <LayoutTemplate>
            <asp:PlaceHolder runat="server" ID="PlaceHolder2" />
        </LayoutTemplate>
        <ItemTemplate>
            <asp:LinkButton ID="lnkBtnTest" runat="server" CommandName="testCommand" />
            <h1>
                <%# Eval("Name") %></h1>
            <asp:ListView runat="server" ID="subMenu" ItemPlaceholderID="PlaceHolder3" DataSource='<%# Eval("subCategories") %>'
                OnItemCommand="listViewTest_ItemCommand">
                <LayoutTemplate>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="list">
                        <tr>
                            <td>
                                <asp:PlaceHolder runat="server" ID="PlaceHolder3" />
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkBtnSubMenu" runat="server" Text='<%# Eval("Name") %>'
                    CommandName="clickSubMenu"  CommandArgument='<%# Eval("ID") %>' />
                    <asp:Label runat="server" ID="lblID" Visible="false" Text='<%# Eval("ID") %>' />
                </ItemTemplate>
            </asp:ListView>
        </ItemTemplate>
    </asp:ListView>
</div>

UC_LeftMenu.ascx.cs
-------------------------------

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 BusinussLayer;
using Entity;

namespace eMall.UserControls
{
    public partial class UC_LeftMenu : System.Web.UI.UserControl
    {        
        protected void Page_Load(object sender, EventArgs e)
        {
            fillMenus();
            if (!IsPostBack)
            {
                //fillMenus();
            }
        }

        private void fillMenus()
        {
            DataTable dtTblCategory = new DataTable();
            dtTblCategory = (new eMallBL()).getCategories(0);
            DataTable dtTblSubCategory = new DataTable();
            dtTblSubCategory = (new eMallBL()).getSubCategories(0, 0);

            IList<eMallEntity.ItemCatagory> categories = new List<eMallEntity.ItemCatagory>();
            for (int i = 0; i < dtTblCategory.Rows.Count; i++)
            {
                eMallEntity.ItemCatagory category = new eMallEntity.ItemCatagory();
                category.Name = dtTblCategory.Rows[i]["Name"].ToString();
                category.ID = Convert.ToInt32(dtTblCategory.Rows[i]["ID"].ToString());
                IList<eMallEntity.ItemSubCatagory> subCategories = new List<eMallEntity.ItemSubCatagory>();
                for (int j = 0; j < dtTblSubCategory.Rows.Count; j++)
                {
                    if (dtTblSubCategory.Rows[j]["CategoryID"].ToString() == dtTblCategory.Rows[i]["ID"].ToString())
                    {
                        eMallEntity.ItemSubCatagory subCategory = new eMallEntity.ItemSubCatagory();
                        subCategory.Name = dtTblSubCategory.Rows[j]["Name"].ToString();
                        subCategory.ID = Convert.ToInt32(dtTblSubCategory.Rows[j]["ID"].ToString());
                        subCategories.Add(subCategory);
                    }
                }
                category.subCategories = subCategories;
                categories.Add(category);
            }
            RightMenuItems.DataSource = categories;
            RightMenuItems.DataBind();

            //listViewTest.DataSource = dtTblCategory;
            //listViewTest.DataBind();
        }

        protected void listViewTest_ItemCommand(object sender, ListViewCommandEventArgs e)
        {
            switch (e.CommandName)
            {
                case "clickSubMenu":
                    Label lblSubCategoryID = (Label)e.Item.FindControl("lblID");
                    Context.Items.Add("subCategoryID", lblSubCategoryID.Text);
                    Server.Transfer("AddItems.aspx");
                    break;
            }
        }
    }
}



Monday, July 26, 2010

ASP.Net Carousel using Listview Control

I have searched in so many sites for carousel control in asp.net. In Adobe Flex, MS Silverlight has default carousel controls with good look and feel. In JQuery we can create carousel controls. Here I am demonstrating a carousel using jquery,ASP.Net Listview controls. We can fetch data from database into the carousel dynamically from the database(Here I am using static datatable).

myCarousel.aspx


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

<!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>
    <link rel="STYLESHEET" type="text/css" href="site.css" />
    <style type="text/css">
        div.panes > div
        {
            display: none;
            padding: 0;
            border: 1px solid #999;
            border-top: 0;
            font-size: 14px;
            background-color: #fff;
        }
        div.carousel-section
        {
            margin-top: 15px;
        }
        ul.list-apps div.app-img
        {
            width: 91px;
            height: 92px;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-color: #fff;
            border: solid 1px #333;
            margin-right: 10px;
        }
        ul.carousel-apps div.app-img
        {
            width: 89px;
            height: 90px;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-color: #000;
            margin-right: 10px;
        }
        div.carousel-no-content
        {
            height: 121px;
            color: #fff;
            padding: 20px;
        }
        div.carousel-no-content p, div.carousel-no-content li
        {
            line-height: 18px;
            font-weight: bold;
        }
        div.carousel-no-content p
        {
            margin-bottom: 10px;
        }
        div.carousel-non-content ol
        {
            padding-bottom: 15px;
        }
        div.carousel-no-content a
        {
            color: #fff;
            text-decoration: underline;
        }
    </style>
    <!--[if IE 7]>
<style type="text/css">
div.carousel-no-content { height: 105px; color: #fff; padding: 20px; }
</style>  
<![endif]-->

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script language="javascript">
        $(function() {
            var step = 2;
            var current = 0;
            var maximum = $('#my_carousel ul li').size();
            var visible = 2;
            var speed = 200;
            var liSize = 331;
            var carousel_height = 161;


            var ulSize = liSize * maximum;
            var divSize = liSize * visible;

            $('#my_carousel ul').css("width", ulSize + "px").css("left", -(current * liSize)).css("position", "absolute");

            $('#my_carousel').css("width", divSize + "px").css("height", carousel_height + "px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");

            $('.btnnext').click(function() {
                if (current + step < 0 || current + step > maximum - visible) { return; }
                else {
                    current = current + step;
                    $('#my_carousel ul').animate({ left: -(liSize * current) }, speed, null);
                }
                return false;
            });

            $('.btnprev').click(function() {
                if (current - step < 0 || current - step > maximum - visible) { return; }
                else {
                    current = current - step;
                    $('#my_carousel ul').animate({ left: -(liSize * current) }, speed, null);
                }
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="my_carousel" class="carousel groupr">
            <div class="arrow left btnprev" style="z-index: 100;">
            </div>
            <div class="arrow right btnnext" style="z-index: 100;">
            </div>
            <ul class="carousel-apps group">
                <li>
                    <div class="image group">
                        <p>
                            <a href="#" title="">Mr. X</a><div>
                                India</div>
                        </p>
                        <div class="app-img" src="profile_games.png">
                            <img src="images/Bluehills.jpg" width="93" height="94" alt="" /></div>
                    </div>
                    <div class="info">
                        <fieldset>
                            <div class="data">
                                <p>
                                    <label>
                                        Father's Name:</label><span>Mr. A</span></p>
                                <p>
                                    <label>
                                        Date of Birth:</label><span>29-Oct</span></p>
                                <p>
                                    <label>
                                        Phone #:</label>
                                    <span>(345)-354-3412</span></p>
                                <p>
                                    <label>
                                        Profession:</label><span>Software Engineer</span></p>
                            </div>
                        </fieldset>
                    </div>
                </li>
                <li>
                    <div class="image group">
                        <p>
                            <a href="#" title="">Mr. Y</a>
                            <div>
                                India</div>
                        </p>
                        <div class="app-img" src="profile_games.png">
                            <img src="images/Sunset.jpg" width="93" height="94" alt="" /></div>
                    </div>
                    <div class="info">
                        <fieldset>
                            <div class="data">
                                <p>
                                    <label>
                                        Father's Name:</label>
                                    <span>Mr. B</span></p>
                                <p>
                                    <label>
                                        Date of Birth:</label><span>19-Feb</span></p>
                                <p>
                                    <label>
                                        Phone #:</label>
                                    <span>(345)-354-4892</span></p>
                                <p>
                                    <label>
                                        Profession:</label><span>Model</span></p>
                            </div>
                        </fieldset>
                    </div>
                </li>
                <li>
                    <div class="image group">
                        <p>
                            <a href="#" title="">Miss Z</a>
                            <div>
                                India</div>
                        </p>
                        <div class="app-img" src="profile_games.png">
                            <img src="images/Waterlilies.jpg" width="93" height="94" alt="" /></div>
                    </div>
                    <div class="info">
                        <fieldset>
                            <div class="data">
                                <p>
                                    <label>
                                        Father's Name:</label>
                                    <span>Mr. C</span></p>
                                <p>
                                    <label>
                                        Date of Birth:</label><span>21-Mar</span></p>
                                <p>
                                    <label>
                                        Phone #:</label><span>(345)-354-5656</span></p>
                                <p>
                                    <label>
                                        Profession:</label><span>Student</span></p>
                            </div>
                        </fieldset>
                    </div>
                </li>
                <li>
                    <div class="image group">
                        <p>
                            <a href="#" title="">Mr. Y</a>
                            <div>
                                India</div>
                        </p>
                        <div class="app-img" src="profile_games.png">
                            <img src="images/Sunset.jpg" width="93" height="94" alt="" /></div>
                    </div>
                    <div class="info">
                        <fieldset>
                            <div class="data">
                                <p>
                                    <label>
                                        Father's Name:</label>
                                    <span>Mr. B</span></p>
                                <p>
                                    <label>
                                        Date of Birth:</label><span>19-Feb</span></p>
                                <p>
                                    <label>
                                        Phone #:</label>
                                    <span>(345)-354-4892</span></p>
                                <p>
                                    <label>
                                        Profession:</label><span>Model</span></p>
                            </div>
                        </fieldset>
                    </div>
                </li>
                <li>
                    <div class="image group">
                        <p>
                            <a href="#" title="">Mr. W</a><div>
                                India</div>
                        </p>
                        <div class="app-img" src="profile_games.png">
                            <img src="images/Winter.jpg" width="93" height="94" alt="" /></div>
                    </div>
                    <div class="info">
                        <fieldset>
                            <div class="data">
                                <p>
                                    <label>
                                        Father's Name:</label><span>Mr. D</span></p>
                                <p>
                                    <label>
                                        Date of Birth:</label><span>13-Sep</span></p>
                                <p>
                                    <label>
                                        Phone #:</label><span>(345)-354-1231</span></p>
                                <p>
                                    <label>
                                        Profession:</label><span>Cricketer</span></p>
                            </div>
                        </fieldset>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

myCarousel.aspx.cs
---------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace mySite
{
    public partial class myCarousel : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable myDataTable = new DataTable();

            DataRow dtRow;
            DataColumn myDataColumn;

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "id";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "username";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "firstname";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "lastname";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "designation";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "photo";
            myDataTable.Columns.Add(myDataColumn);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Ansar";
            dtRow["lastname"] = "Azeez";
            dtRow["designation"] = "Software Engineer";
            myDataTable.Rows.Add(dtRow);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Aslam";
            dtRow["lastname"] = "Azeez";
            dtRow["designation"] = "Project Leader";
            dtRow["photo"] = Server.MapPath("/images/" + "Sunset.jpg");
            myDataTable.Rows.Add(dtRow);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Mishal";
            dtRow["lastname"] = "Mohammed";
            dtRow["designation"] = "HR Manager";
            myDataTable.Rows.Add(dtRow);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Adil";
            dtRow["lastname"] = "Azeez";
            dtRow["designation"] = "Event Manager";
            myDataTable.Rows.Add(dtRow);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Jobish";
            dtRow["lastname"] = "J";
            dtRow["designation"] = "Project Manager";
            myDataTable.Rows.Add(dtRow);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Anandh";
            dtRow["lastname"] = "K";
            dtRow["designation"] = "Software Tester";
            myDataTable.Rows.Add(dtRow);

            dtRow = myDataTable.NewRow();
            dtRow["firstname"] = "Renjith";
            dtRow["lastname"] = "Maxy";
            dtRow["designation"] = "Project Leader";
            myDataTable.Rows.Add(dtRow);

            listViewItems.DataSource = myDataTable;
            listViewItems.DataBind();
        }
    }
}


ASP.Net Carousel Using ListView

                     From above example we can create a carousel with good look and feel.