-->

Tuesday, September 24, 2013

How to Apply style on control at runtime.

CSS introduction

CSS is a new web page layout method that has been added to HTML to give we developer more control over their desing and content layout. CSS allows a designer to create a standard set of commands(either embeded inside web page or from an external page) that controls the style of all subsequent pages.

With CSS you can add style (fonts , spacing, colors, size and links ) to web documents . Its more advanced techniques that controls the layout of the page without the use of tables or other cumbersome HTML.

 Lets take an simple example 


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        BulletedList1.Style.Add(" background-color", "blue");
        BulletedList1.Style.Add(" font-size", "xx-large;");
    }
 
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Apply style"
            onclick="Button1_Click" Width="154px" />
        <asp:BulletedList ID="BulletedList1" runat="server">
            <asp:ListItem>Apple </asp:ListItem>
            <asp:ListItem>Mango</asp:ListItem>
            <asp:ListItem>Orange</asp:ListItem>
        </asp:BulletedList>
    </div>
    </form>
</body>
</html>

Output
How to Apply style on control at runtime.
How to Apply style on control at runtime.

How to access Html select tag in code file

HtmlSelect Class

The HtmlSelect class creates an HTML select control, which can display either a list box or a drop-down list box depending on its attribute. The items of the select control are stored in <option>elements inside the <select> element. As soon as you add a list box or drop-down list box to a Web form using HTML server controls, ASP.NET adds a default , empty <option> element to the <select> element. The HtmlSelect class gives you access to the HTML <select> element s in server code.

Properties of the HtmlSelect Class

DataMember  : Obtains or sets the set of data to bind to the HtmlSelect control from a DataSource with multiple sets of Data.
DataSource : Obtains or sets the source of information to bind to the HtmlSelect control.
DataSourceId : Obtains or sets the ID of the Data source control that the HtmlSelect control should use to retrieve its data source.
DataTextField : Obtains or sets the field from the data source to bind to the System.Web.UI.WebControls.ListItem.Text property of each item in the HtmlSelect control.
DataValueField : Obtains or sets the field from the data source to bind to the System.Web.UI.WebControls.ListItem.value property of each item in the HtmlSelect control.
InnerHtml : Obtains or sets the conect between the opening and closing tags of the control without automatically converting special characters to their equivalent HTMl entities.
Items : Obtains a collection that contains the item listed in an HtmlSelect control.
Multiple : Obtains or sets a value indicating whether multiple items can be selected concurrently in the HtmlSelect control.
Name : Obtains or sets the unique identifier name associated with the HtmlSelect control.
SelectedIndex : Obtains or sets the ordinal index of the selected item in an HtmlSelect control.
Size : Obtains or sets the height (in row ) of the HtmlSelect control.
Value : Obtains the value of the selected item in the HtmlSelect control or sets the SelectedIndex property of the control to the index of the first item in the list with the specified value.

Event of the HtmlSelect Class


ServerChange : Occurs when the select control is changed. You can handle this event on the server.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void click_server(object server, EventArgs e)
    {
        sp1.InnerHtml = Select1.Value.ToString();
        int i = 0;
        for(i=0;i<Select1 .Items.Count;i++)
        {
            if (Select1 .Items [i].Selected)
            {
                sp2.InnerHtml += Select1.Value.ToString();
            }
        }
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Please Select Item : <br />
        <select id="Select1" runat ="server" >
            <option value ="Apple" selected ="selected">Apple</option>
            <option value ="Mango">Mango</option>
                   <option value ="Orange">Orange</option>
        </select>
        <span runat ="server" id="sp1">
        </span>
        <span runat ="server" id="sp2">
        </span>
        <input id="Submit1" type="submit" value="submit" runat ="server" onserverclick ="click_server" />
    </div>
    </form>
</body>
</html>

Output
How to access Html select tag in code file

How to access Html Image in code in ASP.NET

The HtmlImage class

The HtmlImage Class creates an HTML <img> element, which is used to display images on the web page. Using the properties of this class, you can change the image size and the image displayed as well as the alignment of the image with respect to other HTML elements. The HTML Image class gives you access to the HTML,<img> elements in server code.

Public Properties of the HtmlImage Class

Property
Description
Align
Obtains or sets the image’s alignment with respect to other HTML elements.
Alt
Obtains or sets the alternative text to display if an image cannot be displayed.
Border
Obtains or sets the width of the image’s border
Height
Obtains or sets the image’s height
Src
Obtains or sets the URL of the image
Width
Obtains or sets the image’s width

Lets take an Simple example
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void server_click(Object sender, EventArgs e)
    {
        first.InnerHtml = "Welcome Message";
       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        Access Html Image in Code page<br />
        <input type="image" runat ="server" src ="submit.jpg" id="image1" onserverclick ="server_click" />
        <div id="first" runat ="server">
        </div>
        <br />
 
    </div>
    </form>
</body>
</html>


Output
How to access Html Image in code in ASP.NET

Sunday, September 22, 2013

How to pass value from one page to another page in ASP.NET

There are various techniques to pass values from one page to another page . These are Session, ViewState, QueryString, findControl , etc
Here we use one by one for passing values from one page to another page.

Use Session: 

Syntax : 
Session["Session variable"] = variable;
variable = Session["Session variable"].Tostring();

Note : Session value store in all page of browser.

Use QueryString 

Syntax : Basically query string pass in URL
http://dotprogramming.blogspot.com/default.aspx?id=7    // here id=7 define query string data

lets take an simple example
Step-1 : Take two Web forms (first.aspx and second.aspx)
Step-2 : first page contain one textbox , one button and one hyperlink control

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Session["username"] = TextBox1.Text;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Enter Session data :
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="Store Session"
            onclick="Button1_Click" />
        <br />
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl ="~/second.aspx?id=7" >QueryString</asp:HyperLink>
        <br />
    </div>
    </form>
</body>
</html>

Step-3 : Second page contains two label control.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = "Session data " + Session["username"].ToString();
        Label2.Text = "query string data" + Page.Request.QueryString["id"].ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
        <asp:Label ID="Label2" runat="server" Text=""></asp:Label>

    </div>
    </form>
</body>
</html>


Output
How to pass value from one page to another page in ASP.NET

How to pass value from one page to another page in ASP.NET

How to use LoginView Control in ASP.NET

The LoginView Control

The LoginView control is a Web Server control, which is used to display two different views of a Web page of any website, depending on whether the user has logged on to a Web page as a registered user or a visitor. The LoginView control provides a way of altering the look of the page or showing different content to different groups of users. This control has the built-in functionality to gether the current user's status and roles. If the user is authenticated, the control displays the appropriate information to the user with the help of its three view templates which are:
  • AnonymousTemplate : Displayed when the user is not logged in
  • LoggedInTemplate : Displayed when the user is logged in 
  • RoleGroups : Displayed when the user who has logged in, is a member of a specific role with defined role group templates
Note :  Before apply this example create a user using Administrative toolbar

There are some steps for using LoginView Control in ASP.NET
Step-1: Drop LoginView Control onto the ("Default.aspx") page, In source page a LoginView contol having three template first one is <AnonymousTemplate> template second one is <LoggedInTemplate> and last one is <RoleGroups> template.

Step-2: In <AnonymousTemplate> Either you can write some text or place login control. Here this example contain some text with link.

<AnonymousTemplate>
        please login now
        <a href="login.aspx">Login</a>     
     
        </AnonymousTemplate>
Step-3: In <LoggedInTemplate> you can place LoginName Control or LoginStatus Control with welcome message.
Step-4: Run Your Application

Complete code is 
Default.aspx page code



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

<!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:LoginView ID="LoginView1" runat="server">
        <RoleGroups></RoleGroups>
        <AnonymousTemplate>
        please login now
        <a href="login.aspx">Login</a>
     
     
        </AnonymousTemplate>
        <LoggedInTemplate>
        Welcome ,
            <asp:LoginName ID="LoginName1" runat="server" />
            <asp:LoginStatus ID="LoginStatus1" runat="server" />
        </LoggedInTemplate>
        </asp:LoginView>
 
    </div>
    </form>
</body>
</html>

Login.aspx page code



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

<!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:Login ID="Login1" runat="server">
        </asp:Login>
 
    </div>
    </form>
</body>
</html>

Output
Anonymous template result in asp.net

login page link open in asp.net

LoggedIn Template result in asp.net

ASP.NET MEMBERSHIP : WebSite Administrative tool, Login , Login Status and LoginName Control


There are two options in membership first one windows authentication and second one is forms authentication. Bydeafult DOTNET framework use windows authentication where your username and password stored in windows.
In authentication tag by default mode is selected as windows in web.config file.
Using administrative tool you can implement security in the application. Using some steps you can implement security to the application, these steps are
Step-1: Select “ASP.NET Configuration” in Website tab.
ASP.NET Configuration” in Website tab

Step-2: Select Security link which is given in the administrative page.
Select Security link which is given in the administrative page


Step-3: Select “select authentication type” in the user tab.
Select “select authentication type” in the user tab.

Step-4: Select “from the internet” radio button.
Select “from the internet” radio button.
Step-5: Refresh your application and Again check authentication mode in web.config file , where you get mode is forms
Step-6: Again open administrative tool bar and select security link.
Step-7: Select “create user “in Users tab.
Select “create user “in Users tab.


Step-8: Fill all required field with strong password because Microsoft recommend strong password.
Fill all required field with strong password because Microsoft recommend strong password.

Step-9: Now drop LoginStatus and LoginName  control to the WebForm (“Default.aspx” page) from ToolBox.
 LoginStatus and LoginName

Step-10 : Take another webform name as “login.aspx” for login control
Step-11: Drop login control to the login.aspx page.
Drop login control to the login.aspx page.


Step-12:Run your Application.
first page of login control

ASP.NET MEMBERSHIP
ASP.NET MEMBERSHIP









Saturday, September 21, 2013

TextBlock Control Introduction: WPF

According to previous post, Label control derives from Content Control and can: display other type of data as well as string, perform all the functions of a content control. There are some drawbacks in label control such as it cannot support multi line texts.

Textblock control is derived from Framework Element, and can display string type of data only. It has a property TextWrapping which is used to display our text in multiple lines. Means text block can be used to display paragraphs in WPF. A textblock can be drawn in XAML code with below line:

<TextBlock Text="text block" Width="200"/>

It will show the above text in the width specified. If we want to show some more text, then we have to use TextWrapping property of this textblock. If we don’t enable text wrapping then it will only show the text that can be shown in specified width.
<TextBlock Text="Textblock control is derived from Framework
Element, and can display string type of data only.
It has a property TextWrapping which is used to
display our text in multiple lines. Means text
block can be used to display paragraphs in WPF"
Width="200" TextWrapping="Wrap"/>

Now when we run this code, it will show the text written above. The width will be fixed as 200 and height will be increased according to the given text.

How to use TextBlock Control in WPF XAML

If we also specified height here, then the text will not be shown. Just placed the height as 200 here and check out the output as:

Use TextBlock Control with Height in WPF XAML

© Copyright 2013 Computer Programming | All Right Reserved