CSS - Cascaded Style Sheet : Part 2 (Selectors)

Hi,

In my previous article, I have written about Introduction of CSS and its basics. In continuation of CSS Tutorial series, this post will help you learning about SELECTOR. We will discuss here for beginners so that they can get maximum and understand the basic difference of their types.

Introduction:

In a embedded or External style sheet, the target element is not fix. Basically we write CSS in embedded or External mode so that we can re-use it when required and can modify whole look of page or website by modifying CSS file only. For using multiple CSS values and properties, we need Identifiers which are called Selector in CSS. Just as In case of C we write a function and use it anywhere, the SELECTOR are same. You will understand more by its example. As per CSS Rule, Selector are divided in three types.

HTML Selector:

HTML Selector are part of HTML Tags. They need not to be used at HTML/XHTML syntax. In short we can define style sheet for any of the markup tags which is used in document but we can not create our own selector of this kind. 

Example:

/* HTML Selectors */
 h1
 {
  font-family: Verdana, Calibry, Tahoma;
  color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:21px;
  text-decoration: bold;
 }
 
 h2
 {
  font-family: Verdana, Calibry, Tahoma;
  color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:18px;
  text-decoration: underline;
  text-align:center;
 }
 
 p
 {
 font-family: Verdana, Calibry, Tahoma;
 text-align:justify;
 padding: 4px 4px 4px 4px;
 }

Class Selector:

Class selector are selectors which need to be used  with class tag in HTML or similar tag in various language. These start with period/dot (.) symbol. These can be used unlimited times in documents and need to be defined each time for markup syntax. You are free to choose name of selector.

Example:

 /*  Class Selectors */
 .textBox
 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-right: 10px;
    padding-left: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    border: solid 1px black;
    font-size: 13px;
    text-decoration: none;
    margin-left: 0px;
 }
 
 .button
 {
    font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
    border-top: 1px solid #dec227;
    background: #ffd800;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
    background: -moz-linear-gradient(top, #ffd800, #65a9d7);
    background: -ms-linear-gradient(top, #ffd800, #65a9d7);
    background: #ffd800;
    padding: 1px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    -webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 13px;    
    text-decoration: none;
    vertical-align: middle;
    height: 27px;
 }

ID Selector:

ID Selector are based upon ID of element. These are initialized with Pound or Hash (#) sign. These can be used only once in a document as the ID of attribute must be unique as per document markup standard. These need not be assigned with attribute but remember, the ID of document element should be same as ID defined in selector. They typography case (lowercase/uppercase) is sensitive here.

Example:

 /* ID Selectors  */
 
 #footer {
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    font-size: 15px;
    color: red;
    background-color: #ffd800;
	text-align:center;
}

For you, here is the complete code of HTML Page which is as shown in above screenshot.

<html>
<head>
<title>CSS Stylesheets & Selectors </title>
<style>
/* HTML Selectors */
 h1
 {
  font-family: Verdana, Calibry, Tahoma;
  color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:21px;
  text-decoration: bold;
 }
 
 h2
 {
  font-family: Verdana, Calibry, Tahoma;
  color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
  font-size:18px;
  text-decoration: underline;
  text-align:center;
 }
 
 p
 {
 font-family: Verdana, Calibry, Tahoma;
 text-align:justify;
 padding: 4px 4px 4px 4px;
 }
 
 
 /*  Class Selectors */
 .textBox
 {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-right: 10px;
    padding-left: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    border: solid 1px black;
    font-size: 13px;
    text-decoration: none;
    margin-left: 0px;
 }
 
 .button
 {
    font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
    border-top: 1px solid #dec227;
    background: #ffd800;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
    background: -moz-linear-gradient(top, #ffd800, #65a9d7);
    background: -ms-linear-gradient(top, #ffd800, #65a9d7);
    background: #ffd800;
    padding: 1px 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    -webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    font-size: 13px;    
    text-decoration: none;
    vertical-align: middle;
    height: 27px;
 }
 
 /* ID Selectors  */
 
 #footer {
    font-family: Calibri,Tahoma,Verdana,'Segoe UI';
    font-size: 15px;
    color: red;
    background-color: #ffd800;
	text-align:center;
}
</style>
</head>
<body>
<H1>Types of Selectors in CSS</H1>
<p>In this topic we will be discussing about different types of Selectors in CSS (Cascaded Style Sheets). You will learn about all kind of selectors with examples at the last of this post.</p>
<h2>1. HTML Selector</h2>
<p>As on this line, we did not applied any of stylesheet tags (class or ID). But you will see the changes in style of H1 , H2 and P tag. These are HTML Tags and automatically used by HTTP Web server as they are present in stylesheet.<p>
<h2>2. Class Selectors</h2>
<input type="text" class="textBox" name="FirstName" value="Enter your first Name." />
<input type="button" class="button" name="Submit" value="Click to Submit" />
<p>In above two lines we used class="textbox" and class="button". As in above stylesheet we have created them with period (.) and used with class attribute of HTML element, so these are called Class selectors.</p>
<h2>3. ID Selector</h2>
<p>We will be applying these settings in last of this webpage where we will write footer.</p>
<div id="footer">All Rights are reserved.</div>
</body>
</html>

Thanks for reading. I will be back with another article in CSS series. Your suggestions or feedback are expected and play great role in our development. Keep reading, writing & sharing.
John Bhatt

Read More

CSS - Cascaded Style Sheets : Part 1

Hi,

This time, as we did in beginning for HTML, I am back with CSS Tutorial. This post will contain all information about Cascaded Style Sheets, commonly known as CSS.

Introduction:

CSS is used to decorate HTML elements. This is developed by W3C, Bert Bos, Hakon Wium Lie. In other words it is a scripting language written in any text editor that is used to describe look and formatting of hypertext document. However this is present in all kinds of documents that are written in any markup languages including HTML. Latest version is CSS 4 which is in early stage in current days. CSS Statement is divided in 3 parts in simple.
This is written between STYLE tags or with STYLE attribute if any HTML Keyword. Style tag is container/closed tag of HTML.

Example

text-align : left ;

Property: These are fixed set of keywords which define property of element. In above example text-align is property.
Separator: This separates property and value and always presented by : (colon).
Value: This is the value to property. In above case left is the value of property text-align.

Using Method:

Based on using method, CSS is classified in two parts. One is Internal and other External.

1. Internal: In this method, we write all CSS markup inside the same file where it is applied. This is also done in two methods. 
• Inline CSS: In this method, CSS is written inside the HTML or XHTML statement using STYLE tag. 
• Block CSS: In this method, we write CSS code in HEAD section of HTML document between STYLE tag.
2. External: In this method, we write all CSS markup in another file and insert reference to the file in required HTML file using LINK tag.
   Example:

    <link href="path/to/file.css" rel="stylesheet">

Apart from this, we have another term in CSS which is called SELECTOR.
Selector are simply collection of CSS attributes and their value. Selectors are used in HTML using CLASS or ID or with HTML tag. So further CSS Selector are divided in 3 parts.
We will discuss about all kind of CSS Selector in another post. Before this let me show you an example of CSS used in all methods.

<html>
<head>
<title>Introduction to CSS</title>
<style type="text/css">
h1
{
    font-family: Calibri,Tahoma,Verdana, Geneva, 'DejaVu Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}
</style>

<link href="styles/main.css" rel="stylesheet" />

</head>
<body>
<h1>Introduction to CSS</h1>
<p style="text-align: justify;">This is random text in paragraph.Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.</p>
</body>
</html>

Keep reading for next part.
John Bhatt

Read More

Print GridView only in ASP.NET

Hi,

Lets come back to ASP.NET tips and trick series. We are once again going to learn new trick related to GridView. Previously I have posted following articles related to GridView.

• Export GridView data to Excel
• Pagination in GridView
• Export GridView data to Word
• Custom Error Message for Empty GridView
• GridView with scroll bar
• GridView with Fixed Header and Scroll Bar

Requirement

Suppose, you have a page where you are displaying any kind of data to user. You want to add a functionality to print these records. But problem with Browsers Default Print options (Ctrl+P) is that, it will print whole page. All header images, footer, sidebar and colors will printed, which is not required. You have two options, either create a new page for print view and redirect user to that page or just print the required area, in our case it is GridView. 

Most of developer working in a web applications have MasterPage for their web-application. MasterPage are similar to templates in normal HTML having some advanced functionality and customized code for maintaining easier and common look of website or application.

Lets have a look at below screen to make our requirement more clear.

Code for Default.aspx

This is the code for GridView.

   <asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false" AllowPaging="false" AlternatingRowStyle-BackColor="Linen" HeaderStyle-BackColor="SkyBlue" Width="100%" OnPageIndexChanging="gvProducts_PageIndexChanging" EmptyDataText="Sorry! No Products to List. First Add from Add Product Link.">
                    <Columns>
                        <asp:TemplateField HeaderText="Product ID">
                            <ItemTemplate>
                                <asp:Label ID="lblProductID" runat="server" Text='<%#Eval("ProductID")%>' ToolTip="ID of Product as stored in Database."></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="Product Name">
                            <ItemTemplate>
                                <asp:Label ID="lblProductName" runat="server" ToolTip="Name of Product" Text='<%#Eval("ProductName")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="Brand">
                            <ItemTemplate>
                                <asp:Label ID="lblBrandName" runat="server" ToolTip="Brand of Product" Text='<%#Eval("BrandName")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="Category">
                            <ItemTemplate>
                                <asp:Label ID="lblProductCat" runat="server" ToolTip="Category of Product" Text='<%#Eval("CategoryName")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <Columns>
                        <asp:TemplateField HeaderText="In Stock">
                            <ItemTemplate>
                                <asp:Label ID="lblProductinStock" runat="server" ToolTip="Quantity available in Stock"
                                    Text='<%#Eval("UnitsInStock")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

Code for Default.aspx.cs

We do not have much more at backend, we are just going to bind data to GridView.

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToStore"].ConnectionString);
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Products,Brands,Category where Products.BrandID=Brands.BrandID and Products.CategoryID=Category.CategoryID", con);
            DataSet ds = new DataSet();
            adp.Fill(ds);
            gvProducts.DataSource = ds.Tables[0];
            gvProducts.DataBind();
        }
    }

Printing Page.

Lets press Ctrl+P key combination to print page, before printing see the Preview.

Printing GridView Only

We need to make following change to print GridView only. Lets start with HTML.

Wrap the GridView inside a Table or Panel. I am using Table. You can also go with Panel.

  <table width="70%" id="pnlGridView" runat="server" align="center" class="ContentTable">
        <tr>
            <td colspan="2" align="center">
                <h1>All Products in Store</h1>
            </td>
        </tr>
        <tr>
            <td> </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false" AllowPaging="false" 
    AlternatingRowStyle-BackColor="Linen" HeaderStyle-BackColor="SkyBlue" Width="100%" 
    OnPageIndexChanging="gvProducts_PageIndexChanging" 
    EmptyDataText="Sorry! No Products to List. First Add from Add Product Link.">
                    ...............
     .............
                </asp:GridView>
            </td>
        </tr>
        <tr>
            <td align="right">
                <asp:LinkButton ID="lnkPrint" runat="server" ToolTip="Click to Print All Records" Text="Print Data" OnClick="lnkPrint_Click"></asp:LinkButton>     
                <asp:LinkButton ID="lnkExportAll" runat="server" ToolTip="Export this List" Text="Export to Excel" OnClick="lnkExportAll_Click"></asp:LinkButton>
                     
                <asp:LinkButton ID="lnkAddNew" runat="server" ToolTip="Add New Product"
                    Text="Add New" OnClick="lnkAddNew_Click"></asp:LinkButton>
            </td>
        </tr>
    </table>

Now just add following JavaScript function in head section and assign that function to Print linkbutton.

    <script language="javascript" type="text/javascript">
        function PrintPage() {
            var printContent = document.getElementById('<%= pnlGridView.ClientID %>');
            var printWindow = window.open("All Records", "Print Panel", 'left=50000,top=50000,width=0,height=0');
            printWindow.document.write(printContent.innerHTML);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
        }
    </script>

Now lets click on Print Link button which we have created. Following will be output for above code.

Bingo! It was the requirement.
Hope you enjoyed reading. If you have any feedback or suggestions, please send us as comment or using contact options. Keep sharing.
John Bhatt

Read More

Adding META Keyword Dynamically in Blogger

Hi,

Welcome back to our Blogger Tutorial series. Most of the blogger have good knowledge of SEO. They have used various blogging platform and use different plugin for SEO enhancement. Search Engine Optimization, commonly known as SEO is a method or way or process of effecting the visibility of your website among different Search Engines for better traffic and ranking. There are many paid advertisements among different Search engine but they are not considered part of SEO.

Whatever they do, coming back to our topic, we are talking about Keywords. META description and Keyword are the best approach for search engine. META description show the excerpt of your post or blog while searched. And Keywords are useful to match with the query text from user in search box. Lets illustrate using below graphical presentation.

But if you are using Blogger, there is no plugin for making your blogs SEO better, you have to do it yourself. If this article, I will tell you, how to add META Keywords dynamically according to post in your Blogger blog. You can set static keywords by modifying template code in simple steps but adding dynamic content is somehow tricky. 

Dynamic Meta Keywords

Lets move to work. Start with logging into blogger. Points are described step by step.

1. Click in Template Link in Left side.
2. Click on Backup / Restore button at right corner.
3. Click on Download Full Template and save at safe place. In case something goes wrong, you will need this before cursing me.
4. Now click in Edit HTML button just below snapshot preview of your blog template.
5. Search in Template using CTRL+F and find for keywords.
6. If there is already a link containing Meta Keyword, replace its value with below one or if there is no keyword then search for </title> and add below line just below that.

   <b:if cond='data:blog.metaDescription != ""'>
        <meta expr:content='data:blog.pageName + ", " + data:blog.title' name='Keywords'/>
   </b:if> 
   

7. Save your template.

If you have following all steps I mentioned, congratulation you have successfully set your post title as keyword in Blogger. You can check this by viewing source code in your browser.

In our next post in this series, we will be discussing about how to add Labels in Blogger Meta Keyword section dynamically? Till then, keep reading. Do not forget to share or provide feedback.

All the Best.

+John Bhatt 

Read More

Custom WordPress Admin Style

Hello,

If you are a blogger, you must be using WordPress. WordPress is a blogging platform which is widely used a CMS and most used CMS by worlds developers which is downloaded by uncountable times. Latest version of WordPress is 3.7 which is release on Oct 24 2013. As on 28 Oct 11.50 PM IST, it has been downloaded 1.6 Million times.

Definitely, I am not here to define or describe WordPress. We all have used WordPress and its Admin Interface also. Which allows us to change Themes for WordPress created website and many such functionality. But we are going to change Administration Theme without any Theme. We will use a simple Plugin created by the creator of WordPress Matt Mullenberg.

By default It has Admin Theme like below snapshot.

Now search for a plugin in WordPress plugin directory named MP6. For your convenience link for MP6 plugin is http://wordpress.org/plugins/mp6/.
Download and Install MP6 in your wordpress installation. How above page looked after installing MP6 is below.

 Admin Dashboard

Add  New Post 

I just found it very nice and wanted to share with you. I am not affiliated with WordPress in anyway commercially. However I use it and love its feature as Blog engine.

You can add me on +John Bhatt and follow our page at P.Yar.B Complex at Google+

Tags: WordPress, personalize, admin, configuration, plugin, admin-theme 

Read More

Pagination in GridView

Hi,
Simply we will learn here how to Apply Pagination in ASP.NET GridView Control.
Directly to Code:
In ASPX page, enable paging in GridView.

<asp:GridView ID="gvAllPOD" runat="server" AutoGenerateColumns="false" 
AlternatingRowStyle-BackColor="LightSeaGreen" HeaderStyle-Font-Bold="true" 
AllowPaging="true" PageSize="20" onpageindexchanging="gvAllPOD_PageIndexChanging">

In Above Code, we Automatically Generated Columns from DataSource Then AllowPaging = True, so that GridView Data can be Paged, Also We defined PageSize that what amount of Records whould display in Page.
To Apply Pagination, RIght Click in GridView and Choose Properties > Events. Choose PageIndexChanged event and Place Following code in ASPX.CS Page.

protected void gvAllPOD_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        gvAllPOD.PageIndex = e.NewPageIndex;
        BindGVAllPOD();
    }

Now Check on your Page. What is Happening on Clicking Page Number. You can comment if some queries on above code.
John Bhatt
Glad to Know, Free to Share

Tags: Pagination, Paging, GridView, ASP.NET, Disply data in Page, Tutorial bt John Bhatt

Read More

Redirect User to same Location on Different Domain

Hi,

Recently, I have changed my Blog address. Due to this, I have to face a lot of Traffic Loss.

My situation was, I have a Blogger blog and a domain. A lot of Links have been shared and If I change the Blog address and create a Permanent Redirect by changing DNS, but existing Bookmarks and Shared Links will not load properly. So, I kept the Existing Domain running and created a New Blog. Exported Template and Blog, Uploaded both to New Domain and just keep both domain running up. Now I have to redirect all visitors to Previous Domain to New Domain.


Here I came with a solution.

I have created a Simple JavaScript function.

<script>
    function redirect()
    {
    //You change your Domain name just in place of "http://www.pyarb.com".
    
  window.location = "http://www.pyarb.com/" + window.location.pathname;
    }
</script>

Description:

1. windows.location - This will set the Location of Window (i.e. Address of Browser.)
2. "http://www.pyarb.com" - This is your New Domain. Where you have kept all File structure same. Means Links are same for All files except Domain Name.
3. windows.location.pathname - This will get the Path of Window Location (i.e. Address of Browser except Domain Name.)

Then Executed this function on PageLoad event.

......
.......
</head>
<body onload="redirect();">
.........
.........

That's It. Your location remains same.

Enjoy,
+John Bhatt 

Read More

Maintenance Complete in Download Center

Hi,

We have finished migrating all thing from Previous Host to New Host. Download Center is expected to Work as same as previous days. Accounts registered with our website has been kept same and you can log in with earlier credential. Other URLs and Bookmarks you added will also remain same and working.

However, Live FM's will be down for some more hours. We are working and collecting more reliable sources of stream. Once it will be done, we will notify you here.

You can keep in touch by Adding us on Facebook page, Just hit Like and Click Show in Feed link which will appear on hovering Like Button. You can also subscribe to new songs on Download Center  via Feedburner Service by Google. Google will drop you a mail once New Song is available on Download Center.

We have shifted to Higher Configuration and Dedicated Server without any Limitations, So Website is expected to load in less time and other resources also.

Till then, enjoy New songs in Download Center and have fun.


Regards,
+John Bhatt & Team
P.Yar.B Complex

Read More

New Version of Srijan Shiksha Website

Hi Friends,

We have recently modified the Core of Srijan Shiksha Website. Now it is an example of Best Websites of Organizations. Please have a look at below link.

http://www.srijanshiksha.com/

This is completely responsive website for Different Platforms. We expect it to display well and Fit on every platform.

Desktop Browser View is as below:

Android Browser:

Have a look and give feedback. We will be waiting to hear from you.

Till then you can add me on Google+, My profile is +John Bhatt 

Read More

New Year Gift

Hey Friends,

I still remember those days, honestly and clearly speaking, starting days of my Internet Experience. I have some knowledge of Website Designing. I have learn HTML at Modern Computer Education before heading towards India approximately for 2-3 months. I use to read a book by Hemanta Baral named Manuals for  Masters In Computer Application,
While I have started to learn about the Web Technology, one of Marketing Company Reserved this Domain and offered me for the cost of 1500 USD. I was definitely not in position to grab the offer. So Finally on the First Day of Year 2070, I registered my Nick Name as Website. Now Live at www.pyarb.com.

Happy New Year 2070....

Meanwhile, you can connect me on Google+ and My Profile is +John Bhatt and You can Find Hemanta sir at +Hemanta Baral.

Read More

Accordion Panel with CSS

Greetings from John!,
Hope you all are enjoying.
Friends I am back with a new thing for you. Today I am going to show you, how to make a Good Accordion Panel.

Do you know, what is Accordion Panel? You must have seen some tables or Div's in website, that are collapsing and expanding on just Click. You can also call them Collapsible Div or Table.

ASP.NET Ajax Tools make it so Simpler for ASP.NET. You just need to link AjaxControlToolkit.dll to your bin folder and use it in the Page.
Let's add a new Web Form in Solution, this is the Page, where you want to add your collapsible div or table what may contain anything.

Source Code for Design above is here.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordian with CSS >> P.Yar.B Complex</title>
    <%--<link href="Accordian.css" rel="stylesheet" />--%>
</head>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table width="100%" border="0">
            <tr>
                <td colspan="2" align="center">
                    <h1>Accordian with CSS</h1>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="center">
                    <asp:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" Width="490px">
                        <Panes>
                            <asp:AccordionPane ID="pane1" runat="server">
                                <Header>Hardwares</Header>
                                <Content>
                                    Mouse<br />
                                    KeyBoard<br />
                                    Monitor
                                    <br />
                                    Printer<br />
                                    CPU<br />
                                    Speakers<br />
                                    Camera
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane2" runat="server">
                                <Header>Operating System</Header>
                                <Content>
                                    MS Windows<br />
                                    Linux<br />
                                    Android<br />
                                    Mac<br />
                                    Unix
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane3" runat="server">
                                <Header>.NET IDE</Header>
                                <Content>
                                    Visual Studio<br />
                                    Visual Web Developer<br />
                                    SharpDevelop<br />
                                    MonoDevelop
                                </Content>
                            </asp:AccordionPane>
                            <asp:AccordionPane ID="pane4" runat="server">
                                <Header>John Bhatt</Header>
                                <Content>
                                    <a href="http://www.johnbhatt.com" target="_blank">Portal Home</a><br />
                                    <a href="http://blog.johnbhatt.com" target="_blank">Blog of P.Yar.B</a><br />
                                    <a href="http://media.johnbhatt.com" target="_blank">Download Center</a><br />
                                </Content>
                            </asp:AccordionPane>
                        </Panes>
                    </asp:Accordion>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now Let's See the CSS, what is on CSS.

.accordionHeader {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeader a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionHeaderSelected {
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeaderSelected a {
    color: #FFFFFF;
    background: none;
    text-decoration: none;
}

    #master_content .accordionHeaderSelected a:hover {
        background: none;
        text-decoration: underline;
    }

.accordionContent {
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

Now Run the Page again. Lets See, how it looked. Check this at your machine. Best of Luck!

Read More

File Upload Control with File Type Filter

Hi,

We are going to learn how to upload a File using FileUpload Control in ASP.NET.

ASPX Code

We Placed a FileUpload Control and a button to Click.

<asp:FileUpload ID="FileUpload1" runat="server"  /> 
<asp:Button ID="BtnUpload" runat="server" Text="Upload File" onclick="BtnUpload_Click" />

Back-end Code

Now BtnUpload_Click event in .cs page.
We are going to Upload only Picture (.JPG file or .BMP file).

 
protected void BtnUpload_Click(object sender, EventArgs e)
    {
       string sSiteFolder = "ResumeFolder";
       string sRealPath = Server.MapPath(sSiteFolder);
       if (!Directory.Exists(sRealPath))
           Directory.CreateDirectory(sRealPath);
       string CompletePath = sRealPath + FileUpload1.FileName;
       string FileExt = CompletePath.Substring(CompletePath.IndexOf("."));
       switch (FileExt)
         { 
          case ".jpg":
                FileUpload1.SaveAs(sRealPath + FileUpload1.FileName);
                break;
          case ".JPG":
                FileUpload1.SaveAs(sRealPath + FileUpload1.FileName);
                break;
          case ".bmp":
                FileUpload1.SaveAs(sRealPath + FileUpload1.FileName);
                break;
          case ".BMP":
                FileUpload1.SaveAs(sRealPath + FileUpload1.FileName);
                break;
         }
     }

Enjoy...
John Bhatt

Read More

Pagination with DataList

Hi,
As we know, DataList is the most versatile Data Bound Control available in ASP.NET. Where you can display data as per your need in your required style, direction etc.
But there is some problem also. There is no option to Paginate the Data Loaded in DataList directly. In case we have too many records, we can not display all them in One Page without paginating.

To escape from this situation, Developers move to GridView, which has easy support for Paginating data.

Today, we will learn How to Paginate DataList data in Simple steps.


First create a DataList as per your requirement. I made like below which is quite simple.





Lets place Next and Previous Buttons for Navigation. Code for above design is below:

Code in ASPX Page (Design)

  <asp:DataList ID="DataList1" runat="server" Height="194px" Width="174px" 
            oneditcommand="DataList1_EditCommand" 
            oncancelcommand="DataList1_CancelCommand" 
            onupdatecommand="DataList1_UpdateCommand" DataKeyField="eno">
            <HeaderTemplate>
              
              <table width="450" border="2">
                <tr>
                    <th>Employee Name </th>
                    <th>Designation </th>
                    <th>Salary </th>
                    <th>
                        Edit
                    </th>
                </tr>
               
            </HeaderTemplate> 
            <EditItemTemplate>
                <tr>
                    <td>
                        <asp:TextBox ID="txtEname" Text='<%#Eval("ename")%>' runat="server" />
                    </td>
                    <td>
                        <asp:TextBox ID="txtJOb" Text='<%#Eval("job")%>' runat="server" />
                    </td>
                    <td>
                        <asp:TextBox ID="txtSal" Text='<%#Eval("sal")%>' runat="server" />
                    </td>
                    <td>
                        <asp:LinkButton ID="lnk2" runat="server" Text="Update" CommandName ="Update" />
                    </td>
                    <td>
                        <asp:LinkButton ID="LinkButton1" runat="server" Text="Cancel"
                         CommandName ="Cancel" />
                    </td>
                </tr>
            
            </EditItemTemplate> 
            <ItemTemplate>
                <tr>
                    <td><%#Eval("ename")%></td>
                    <td><%#Eval("job")%></td>
                    <td><%#Eval("sal")%></td>
                    <td>
                        <asp:LinkButton ID="lnk1" CommandName="Edit"  Text="Edit !" runat="server" />
                    </td>
                </tr>
                
            </ItemTemplate> 
            
            <FooterTemplate>
              </table>
            </FooterTemplate> 
        </asp:DataList>
        <br />
    <table class="style1">
        <tr>
            <td class="style2">
                <asp:LinkButton ID="LinkButton2" runat="server" onclick="LinkButton2_Click">Next</asp:LinkButton>
            </td>
            <td>
                <asp:LinkButton ID="LinkButton3" runat="server" onclick="LinkButton3_Click">Previous</asp:LinkButton>
            </td>
        </tr>
    </table> 

Now Lets to to Backend. ASPX.CS Page (Code Behind):

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            CurrentPageIndex = 0;
            showData(); 
        }
    }
    int pg = 0;
    void showData()
    {
        PagedDataSource pgd = new PagedDataSource();
        SqlDataAdapter da = new SqlDataAdapter("select * from emp", "Data Source=.\\SQLDB;Database=Test1;Integrated Security=True");
        DataSet ds = new DataSet();
        da.Fill(ds);

        pgd.DataSource = ds.Tables[0].DefaultView;
        pgd.CurrentPageIndex = CurrentPageIndex ;
        pgd.AllowPaging = true;
        pgd.PageSize = 5;

        LinkButton2.Enabled = !(pgd.IsLastPage);
        LinkButton3.Enabled = !(pgd.IsFirstPage);
  
 
        DataList1.DataSource = pgd;
        DataList1.DataBind();

    }

    protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
    {
        DataList1.EditItemIndex = e.Item.ItemIndex;
        showData(); 
    }
    protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
    {
        DataList1.EditItemIndex = -1;
        showData(); 
    }
    protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
    {

    }

    public int CurrentPageIndex
    {
        get
        {
            if (ViewState["pg"] == null)
                return 0;
            else
                return Convert.ToInt16(ViewState["pg"]); 
        }
        set
        {
            ViewState["pg"] = value; 
        }
    } 

protected void LinkButton2_Click(object sender, EventArgs e)    {
        CurrentPageIndex++;
        showData();
    }
    protected void LinkButton3_Click(object sender, EventArgs e)
    {
        CurrentPageIndex--;
        showData();
    }

Now Let me Describe things happened in above code:




Move to showData() function.








We created a new object of PagedDataSource. Paged data source as name stands clear, paginated data.





Now we wrote Query, Passed in Adapter, Filled DataSet which should be all clear, because it was Basic Task in ADO.NET. Now we gave it CurrentPageIndex. means where is page now.








For this, just look below to a class CurrentPageIndex which is returning value of CurentPageIndex =0 if page is beling Loaded. To check whether page is loaded or postback, we take help of ViewState. If ViewState["pg"] == null, On Page load this will be null because it is just being initiated. On Postback it will pass the Int value stored in it to CurrentPageIndex.








We set Pagination in PagedDataSource true and Define Page size of 5 records per page.


Now Passed PagedDataSource object as Datasource of Datalist.








Now Linkbutton click events, We increased and Decreased value of CurrentPageIndex.








Hope this must be helpful to you. In case of Any problem, correction in code and help, feel free to comment below.





John Bhatt




Glad to Know, Free to Share.....





http://www.johnbhatt.com

Read More

Rich Text Editor with ASP.NET

Introduction

As we know, ASP.NET lack a Control, that we need most, RichText Editor. 

If you are trying to create a application or website with Admin Panel or Blog or Forum Website or something such project for Web in ASP.NET platform, we need RickText Editor. 

To overcome from this, we can use Many open source JavaScript based editors, like Tiny MCE, FCKEditor, etc.

Content:

In this Article, we would learn how to Implement Free RichText Editor into ASP.NET website. We are using TinyMCE editor here.

We are using TinyMCE, which is One of most popular and Open Source project. Download latest version of TinyMCE from Download Page, and Extract the Zip File.

Browse the Extracted Location and go to ..\tinymce_3.5.6\tinymce\jscripts folder.

Now Copy the tinymce folder from above Location to your Solution in Visual Studio.

Add a Page where you want to Implement RichTextbox and Design the Page.

Now lets Move to Topic. How to Add TinyMCE in Page and Richtext box Control placed for Content of Blog in above sample.

Insert JavaScript file tiny_mce.js in Web Page and some also initialize this function.

This Code into head Section.

 
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" language="javascript">
        tinyMCE.init({
            // General options
            mode: "textareas",
            theme: "advanced",
            plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups",
        });
    </script>

Note: You can so many settings, look in Samples and Help Doc of TinyMCE.

Now Run the Page. Look, how it looked.

Without any additional Practice, our TextBox with Multiline turned into RichText Editor.

Now, its ok as per Requirement. No, when you will send Command to Server, it will return Error Like below.

We have to add just One Line of Code in Web.config file and one property in Default.aspx form (Page with Rich Text Editor).

That is : 

in web.config:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
    <httpRuntime requestValidationMode="2.0"/>
  </system.web>
</configuration>

and in Page directive:

ValidateRequest = "false"

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

Now, you can save the Data in Database, Do postback, retrieve same in Rich Text box and do anything you want.

Conclusion

IT is Jugad. So enything is possible here. Don't be worry about things that are not available. Just modify and make use of things those are available. Tiny MCE is one of the most known and Popular Rich Text editor (WYSIWYG).

You can find many more articles written by me on Dotnetspider also. Have a look at them.
You can add me to your Circle on Google+ at +John Bhatt

Hope this will be helpful to you. 

Read More

Implement Same WebMethod for AutoComplete in Multiple Textbox

Hi,


While Answering a question at Forum, I wrote this post.


Suppose We have Multiple Textbox in Same Page and we want to Implement AutoSuggest/AutoComplete feature in All Textbox and of same type. Suppose Multiple Google Search Boxes.


For that case, we have separate Textboxs, Separate AutoComplete Extenders and Separate Methods. We are trying to Consume same PageMethod in All Textbox.


Front End Code:

Product One:

                    DelimiterCharacters="" Enabled="True" ServiceMethod="GetProducts" MinimumPrefixLength="2"
            ServicePath="" TargetControlID="TextBox1" UseContextKey="True">
        
    
Product Two:
    

                    DelimiterCharacters="" Enabled="True" ServicePath="" TargetControlID="TextBox2"
            ServiceMethod="GetProducts" MinimumPrefixLength="2" UseContextKey="True">
        
    
Product Three:
    

                    DelimiterCharacters="" Enabled="True" ServicePath="" TargetControlID="TextBox3"
            ServiceMethod="GetProducts" MinimumPrefixLength="2" UseContextKey="True">
        
    

BackEnd Code:

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetProducts(string prefixText, int count, string contextKey)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToStore"].ConnectionString);
        SqlDataAdapter adp = new SqlDataAdapter("Select * from Products where UnitsInStock>0 and ProductName like '%" + prefixText + "%'", con);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        string[] Products = new string[ds.Tables[0].Rows.Count];
        for (int j = 0; j <= ds.Tables[0].Rows.Count - 1; j++)
        {
            Products.SetValue(ds.Tables[0].Rows[j][1].ToString(), j);
        }
        return Products;
    }

Lets Look at the Output.

Hope this will be Helpful.
John Bhatt
Glad to Know, Free to Share.....
http://www.johnbhatt.com

Read More

Populate DropDownList Dynamically in ASP.NET (Country-State-District-City)

How to Make a Complete Dropdown and Prevent Inserting Dummy Data from Form.
Disable other Controls when Clicked back to Parent Control:
Drop Down Sequence:
OnLoad
Load Country
On-Change
Load State according to Country
On-Change
Load Dists in State
On-Change
List Cities in Dist.

Code:

 protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
  {
   ddlState.DataSource = res.States(Convert.ToInt16(ddlCountry.SelectedValue));
   ddlState.DataTextField = "StateName";
   ddlState.DataValueField = "StateID";
   ddlState.DataBind(); 
   ddlState.Items.Insert(0, "Select");
   ddlDist.Enabled = false;
   ddlCity.Enabled = false;
  }
 protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
    
  {
   ddlDist.DataSource = res.Districts(Convert.ToInt16(ddlState.SelectedValue));
   ddlDist.DataTextField = "DistName";
   ddlDist.DataValueField = "DistID";
   ddlDist.DataBind();
   ddlDist.Items.Insert(0, "Select");
   ddlDist.Enabled = true;
   ddlCity.Enabled = false;
  }
 protected void ddlDist_SelectedIndexChanged(object sender, EventArgs e)
  {
   ddlCity.DataSource = res.Cities(Convert.ToInt16(ddlDist.SelectedValue));
   ddlCity.DataTextField = "CityName";
   ddlCity.DataValueField = "CityID";
   ddlCity.DataBind();
   ddlCity.Items.Insert(0, "Select");
   ddlCity.Enabled = true;
  }

Preview:
John Bhatt
Glad to Know, Free to Share.....
http://www.johnbhatt.com

Read More

State Management in ASP.NET part-1 (Cookies)

Hi,

I am Back with State Management Series.

In this post we are going to Talk about Cookies. After Reading this, you must be able to do following things:

• Create Cookie
• Access Cookie
• Can answer Some Basic Q & A about Cookie

What is Need of Cookie?

Cookies are Required to Store Temporary data in Users system which may be Required during Session or after Session.

How Many Type of Cookie are there?
Cookies are generally of Two Type. Session wide or Persistent. Sessional cookies Expire as soon as User Closed Session means Browser. Persistent cookies expire after Defined Time. This can be Defined at the Time of Creation.

Who Make Cookies?

Cookie is always made by Application (Server) in Users/ Clients Browser and stored in Hard Disk of User. These are used to store Users Customized Appearance, other Values , Login Time etc for future Retrieval so that website can server him better.

Limitations of Cookie?

Cookies are open Invitations to Hackers.

Cookies can only store Little and Only String Type Data.



Now Lets Learn with Coding. First We will Create a Cookie named myCookie and Solve Earlier Problem with the Help of Cookie.
Now Code is Like Below:

protected void Page_Load(object sender, EventArgs e)
    {

    }
    int x;    // Made a Variable with Datatype Int for Future Use
    HttpCookie myCookie;   // Defined a Cookie named myCookie.
    protected void Button1_Click(object sender, EventArgs e)
    { 
        x = Convert.ToInt32(TextBox1.Text);  // Converted textbox Value which we earlier Did.
        myCookie = new HttpCookie("txtValue");  // Assigned Variable myCookie.
        myCookie.Value = Convert.ToString(x);   // Value assigned to myCookie.
        Response.Cookies.Add(myCookie); //This Simple Made a Cookie that will Expire in Session End.
        myCookie.Expires = DateTime.Now.AddMinutes(15);  // We made is Persistent and stored it for Next 15 minutes.
      
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
       
        HttpCookie storedCook = Request.Cookies["txtValue"];  // Requested from Server for Cookie
        if (storedCook != null)  
            x = Convert.ToInt32(storedCook.Value);  // Converted to Integer again.
        TextBox1.Text = Convert.ToString(x * x);    // Now Printed Value in Textbox.
    }

Now Check....

Don't forget to add me on Google+, +John Bhatt .

Read More

State Management in ASP.NET

Hi Everybody,


I am once back with a blog/article/tutorial whatever you think/call it.


State Management :


HTTP Protocol is State less protocol. In Simple Language, Each and Every time We send a request to server, this is New to server.

To Understand this ,Suppose you took One Textbox and Two Buttons like in Image below:



Now, the task is To Enter Number in Textbox and Click in First Button to Convert to Integer format and then Click Second button to Print Square of Converted Integer in Textbox. What will you do. Lets look at code what I did here.

protected void Page_Load(object sender, EventArgs e)
    {

    }
    int x;

    protected void Button1_Click(object sender, EventArgs e)
    {
        x = Convert.ToInt32(TextBox1.Text);
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        TextBox1.Text = Convert.ToString(x * x);
    }

Now what would I get Result on Second Button Click event. Textbox Result will be 0 even I have entered any number. Don't agree, try this at home.


This is Because, at the time of Button2 Click new request is send to server and Initial Value of X is picked from server which is 0.


To Prevent the Loose of Data each time we send request to server, ASP.NET have implemented concept of State Management.

State Management is divided into 2 parts according to Functionality.

1) User Based State Management

• Cookies
• QueryStrings
• ViewState
• Controls
• Hidden Fields

2) Server Based State Management

• Session
• Application
• Profile

I am going to Describe all these States step by step in Different Posts.

All the Series has been posted on DotNetSpider at below Link Resources > Keep Reading.

Read More

AutoCompleteExtender in Textbox

Hi,

We will learn how to enable AutoCompleteExtender in Textbox Control.


Here, We will learn to Map data from SQL Database to Textbox within Same Page. WebMethod in .cs Page.

Directly to Code:

ASPX Page Code

             


Vehicle No :

             








         

Now Code in ASPX.CS Page

Add these Namespages for below Code.

using System.Data; // For Dataset
using System.Data.SqlClient; // For SQlConnection/Adaptor
using System.Configuration; // Access Consting from Web.Config.
using System.Collections.Generic; 

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetVehicleList(string prefixText, int count, string contextKey)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToJohn"].ConnectionString);
        SqlDataAdapter adp = new SqlDataAdapter("Select distinct VehicleNo from VehicleDispatch where VehicleNo like '%" + prefixText + "%'", con);
        DataSet ds = new DataSet();
        adp.Fill(ds, "Vehicles");
        string[] VehicleNo = new string[ds.Tables["Vehicles"].Rows.Count];
        for (int i = 0; i <= ds.Tables["Vehicles"].Rows.Count - 1; i++)
        {
            VehicleNo.SetValue(ds.Tables["Vehicles"].Rows[0][0].ToString(), i);
        }
   return VehicleNo;
    }

I have Selected Only Unique Value from Database using SELECT DISTINCT .... command. If you want all records, Simply Change SQL Query to SELECT ..... Will be glad to hear from you... This Post is copied from DotNetFunda where I wrote in Code section.

Read More

Opening a Webpage according to Textbox Value

Hi,

Today I am going to tell you, how to Open a Web Page according to TextBox Value in ASP.NET. You can implement same in Plain HTML Page. This will use a Simple JavaScript Function which we will create according to our need.
Lets Look at the Code. We are using ASP.NET Ajax AutoCompleteExtender for more enhancement in Code (This will only work in ASP.NET).
Code for ASPX Page (HTML Design Part - ASP.NET)

If you are using Plain HTML, Just use this code.

Now JavaScript Code which is Inserted Directly in Head Section. (JavaScript)

Now code for C# page if you are using AutoComplete Extender.

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]

    public static string[] GetCompletionList(string prefixText, int count, string contextKey)

    {

        string[] Brands = { "hp", "acer", "dell", "lenovo" };

        return (from m in Brands where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();  

    }

Enjoy...

Read More