Friday, December 2, 2011

How to create external css file


external css


we can keep our style and html page at different location.
When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>. If you're confused, don't worry. We are going to walk you through the whole process.



file creation


1.       Open any text editor like Notepad and type following code and save with extension css.

CSS Code:


body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
Now save the file as a CSS (.css) file.
Make sure that you are not saving it as a text (.txt) file, as notepad likes to do by default.
 Name the file "test.css" (without the quotes).
Now again open text editor to create a new file.
 Now create a new HTML file and fill it with the following code.

HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. 
The background color of this page is gray because
we changed it with CSS! </p>
</body>
</html>
Then save this file as "index.html" (without the quotes) in the same directory as your CSS file. Now open your HTML file in your web browser and it should look something like this..

Display:
A White Header

This paragraph has a blue font. The background color of this page is gray because we changed it with CSS!

Congratulations! You just made your first website that uses External CSS! Now, let us move on to the fun stuff.

why use external css?
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
You can make drastic changes to your web pages with just a few changes in a single CSS file.

how to create dynamic table in asp.net


How to create dynamic table in asp.net 3.5
Why the LoadViewState()?
When the controls are added to page, it is done quiet early in the page event cycle. Hence the LoadViewState() gives you an ideal placeholder to recreate the controls. Since the LoadViewState() method is called before the Page_Load() event, re-adding controls in this method assures that the controls can be access and manipulated by the time any event occurs on them.
Step 1: Create a new ASP.NET application. Add two textboxes (txtRows and txtCols) and a button (btnGenerate) control to the page. The two textboxes will accept the number of Rows and Columns from the user. Based on the input in the textboxes, the table will be created dynamically on the button click. Also add a container element (to position the table) and a button (btnPost) to cause a postback the second time, once the table data is manipulated.
The mark up will look similar to the following:
<body>
    <form id="form1" runat="server">
    <div>
    <div>
        Rows: <asp:TextBox ID="txtRows" runat="server" Width="30px"> </asp:TextBox> <br />
        Cols: &nbsp;<asp:TextBox ID="txtCols" runat="server" Width="30px"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="btnGenerate" OnClick="btnGenerate_Click" runat="server" Text="Generate" />&nbsp;<br /> <br />
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        <br />
        <br />
    </div>
    </div>
        <asp:Button ID="btnPost" runat="server" OnClick="Button1_Click" Text="Cause Postback" />
    </form>
</body>

Step 2: The number of rows and columns for the table is to be taken from the user. For this purpose, we will accept the values in the Page_Load() event. We will create properties for both the rows and columns and store in the ViewState so that the data is available on the postback.
C#
// Rows property to hold the Rows in the ViewState
    protected int Rows
    {
        get
        {

Thursday, September 15, 2011

Add Rotator Control In Asp.Net



How to use add rotator
protected System.Web.UI.WebControls.AdRotator AdRotator;
protected System.Web.UI.WebControls.PlaceHolder PlaceHolder1;

Namespaces used in this application:

using System.Web.UI.WebControls;
using System.Drawing;
using System.Web.UI.HtmlControls;

Add a Xml File
// XML CODE THAT AS THE DETAILS ABOUT THE ADS
<Advertisements>
    <Ad>
        <ImageUrl>D:\Viv_B-Practice\AdRotator_VT\www.asp.net.gif</ImageUrl>
        <NavigateUrl>http://www.asp.net</NavigateUrl>
        <AlternateText>ASP.NET Logo</AlternateText>
        <Keyword>A</Keyword>
        <Impressions>Technology</Impressions>
        <Caption>This is the caption for Ad#1</Caption>
    </Ad>

    <Ad>
        <ImageUrl>D:\Viv_B-Practice\AdRotator_VT\www.sulekha.com.gif</ImageUrl>
        <NavigateUrl>http://www.sulekha.net</NavigateUrl>
        <AlternateText>www.Sulekha.net</AlternateText>
        <Keyword>S</Keyword>
        <Impressions>Web Site</Impressions>
        <Caption>This is the caption for Ad#2</Caption>
    </Ad>

    <Ad>
        <ImageUrl>D:\Viv_B-Practice\AdRotator_VT\FlashFile.swf</ImageUrl>
        <NavigateUrl>AdRotator.aspx?ad=Widgets
               &target=http://msdn.microsoft.com/widgets/</NavigateUrl>
        <AlternateText>www.neostream.net</AlternateText>
        <Keyword>S</Keyword>
        <Impressions>Flash Site</Impressions>
        <Caption>This is the caption for Ad#2</Caption>
    </Ad>
</Advertisements>

The above shown is the XML code. The above XML template contains the details about each ad that is going to be placed in the web application. You can create an ad list for the AdRotator control in the XML designer using the Ad Rotator Schedule File as the target schema.

The AdRotator Properties

ImageUrl - The URL of the image to display.
NavigateUrl - The URL of the page to navigate to when the AdRotator control is clicked.
AlternateText - The text to display if the image is unavailable.
Keyword - The category of the ad that can be used to filter for specific ads.
Impressions - A numeric value that indicates the likelihood of how often the ad is displayed. The total of all impression values in the XML file may not exceed 2,048,000,000 - 1. All attributes are optional.

The AdRotator Class

Basically, the actual AdRotator class only provides a limited set of properties:

<asp:AdRotator id="controlName" runat="server"
    AdvertisementFile="ads.xml" Target="_self">
</asp:AdRotator>

Here we can see how a placeholder control creates the ad rotator control at runtime dynamically and how it works. The PlaceHolder control enables you to place an empty container control in the page and then dynamically add child elements to it at run time.

// Create an AdRotator control.

AdRotator rotator = new AdRotator();

// Set the control's properties.

rotator.AdvertisementFile = "AdRotatorFiles.xml";

// Add the control to the Controls collection of a

// PlaceHolder control. 

PlaceHolder1.Controls.Add(rotator);

The PlaceHolder web server control enables you to place an empty container control within the page and then dynamically add, remove, or loop through child elements at run time. The control only renders its child elements; it has no HTML-based output of its own. As an example, you might want to have a variable number of buttons appear on a web page, depending on options selected by users. That way, users are not confronted with potentially confusing choices that are either unavailable or not relevant to their individual needs.


Friday, August 26, 2011

Caleder Control Of Ajax


asp:TextBox and ajaxToolkit:CalendarExtender, so the page should be look like:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Untitled Page</title>
  </head>
  <body>
    <form id="form1" runat="server">
      <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1"runat="server" />
      <div>
        <asp:TextBox ID="Date1" runat="server"></asp:TextBox>
        <ajaxToolkit:CalendarExtender
            ID="CalendarExtender1" runat="server"TargetControlID="Date1">
        </ajaxToolkit:CalendarExtender>
      </div>
    </form>
  </body>
</html>
Note that TergetControlID point to the text box id.


Thursday, August 4, 2011

ASP.NET login page with sql server


First we have to create a database for storing the login information

Open the Sqlserver Management studio

Create a new database and change the database name as db_Logininformation
Create a New table in that database(db_Logininformation) and change the table name as tab_userinformation

Now, create the following fields
1.  UserID   int         PrimaryKey  
2.    
3.  username varchar(50)  
4.    
5.  Password varchar(50)  

Next, Enter the some usernames and paasword directlu in the database for checking purpose

and save the table

Next ,open the Microsoft visual studio 2008

Next,select the Aspnet web application and change the name as LoginPage

Next,come to the design page of LoginPage and drag and drop two labels,two textboxes and button

next,come to the code page of the Login.aspx.cs

Write the following codein the page event

1.  protected void Button1_Click(object sender, EventArgs e)  
2.      {        
3.          con = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionstring"].ToString());  
4.          con.Open();  
5.          com = new SqlCommand("select Password from userinformation where Username='" + txt_uname.Text + "'", con);  
6.          dr = com.ExecuteReader();  
7.          if (!dr.Read())  
8.          {  
9.              Response.write("Invalid User");  
10.         }  
11.         else  
12.         {  
13.             if (dr[0].ToString() == txt_pwd.Text)  
14.             {  
15.                 Response.Redirect("~/mainPage.aspx");  
16.             }  
17.             else  
18.             {  
19.                Response.write("Wrong Password");  
20.                txt_pwd.Focus();  
21.             }  
22.         }  
23.   
24.     }  
finally,Execute the page....Thats it...Happy coding

AngularJS Basics - Part 1

                                                                  AngularJS What is AngularJS ·          Framework by googl...