-->

Saturday, August 31, 2013

How to use Panel Control in ASP.NET

The Panel Control

The Panel control is one of the most frequently used controls. It creates a borderless division on the form, by using this division one can place the controls inside this control. This control exists within System.Web.UI.WebControls namespace. The panel control are useful when you want to show or hide a group of controls at once or when you want to add controls to a Web page through code.

How to change panel background color dynamically

When you add a panel control on a Web page (panelcontrol.aspx), it adds the following code to the source code of the Web page.
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
In this example , we have placed two panel controls on the Web page. The first control contains two RadioButton controls showing color options on the button Control's click event. The second Panel control displays the color selected by any of the RadioButton control.


<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">


    protected void Button1_Click(object sender, EventArgs e)
    {
        string s = string.Empty;
        if (RadioButton1.Checked)
        {
            s = RadioButton1.Text;
            Panel2.Attributes.Add("Style", "BackGround-Color:" + s);
        }
        else
        {
            s = RadioButton2.Text;
            Panel2.Attributes.Add("Style", "BackGround-Color:" + s);
         
        }
     

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel ID="Panel1" runat="server">
            <asp:RadioButton   ID="RadioButton1" runat="server" Text="Red" AutoPostBack="True" GroupName ="c1" />
            <asp:RadioButton ID="RadioButton2" runat="server"  Text="Green" AutoPostBack="True" GroupName ="c1" />



            <br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Change Color" />
            <br />



        </asp:Panel>
    </div>
        <asp:Panel ID="Panel2" runat="server">
            Panel-color changed</asp:Panel>
    </form>
</body>
</html>

Output
How to change panel background color dynamically

Friday, August 30, 2013

ASP.NET: Total list item count in DropDownlist

Example of count List Item
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        string s = "Total item of the dropdownlist are<br/>";
        s = s + DropDownList1.Items.Count;
        string s1 = "Total item of the listbox are <br/>";
        s1 = s1 + ListBox1.Items.Count;
        Label1.Text = s + "<br/>" + s1;
       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <strong>HOW TO COUNT LISTITEM IN A DROPDOWNLIST</strong>
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server" Height="46px" Width="133px">
            <asp:ListItem>Item-1</asp:ListItem>
            <asp:ListItem>Item-2</asp:ListItem>
        </asp:DropDownList>
        <br />
        <strong>HOW TO COUNT LISTITEM IN A LISTBOX<br />
        </strong>
        <asp:ListBox ID="ListBox1" runat="server" Height="136px" Width="123px">
            <asp:ListItem>ListItem-1</asp:ListItem>
            <asp:ListItem>ListItem-2</asp:ListItem>
            <asp:ListItem>ListItem-3</asp:ListItem>
            <asp:ListItem>ListItem-4</asp:ListItem>
        </asp:ListBox>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Count" />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
        <br />
        <br />

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

Output
ASP.NET: Total list item count in DropDownlist

How to use Table Control in ASP.NET

The Table Control

The Table control helps create a table. The control is useful when you want to present data in a tabular format. This control exists within the System.Web.UI.WebControls namespace. Web designers often use tables for the right placement of elements in Web pages. You can create a Table at design-time or runtime, depending on The requirement of the project.

Public Properties of the Table Class

Caption : Obtains or sets the text to render in an HTML caption element in a Table control.
GridLines : Obtains or set the grid line style to display in the Table control

 Example of the Table Control in ASP.NET

1. Add table rows to the Table Control with the help of the TableRow Collection Editor dialog box by selecting the Table control in the design-mode and clicking the ellipse(...) button in front of its Rows properties in the Properties window.
Table Rows Collection


2. For adding new table rows to the Table control, click the Add button in the TableRow Collection Editor dialog box.
Create Table Rows
3. To add Table cells to a table row, click the ellipsis (...) button in front of its cells property on the right side of the TableRow Collection Editor dialog box.
Create Cells in selected Table rows
4. For adding Table cells to a table row, click the Add button . You can set the Text to be displayed in a table cell by setting its Table property on the right side of the TableCell Collection Editor dialog box.
Add Cell Text

Example of How to use Table Control in ASP.NET



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

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:Table ID="Table1" runat="server" GridLines="Both">
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">Id</asp:TableCell>
                <asp:TableCell runat="server">Name</asp:TableCell>
                <asp:TableCell runat="server">Address</asp:TableCell>
            </asp:TableRow>
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">1</asp:TableCell>
                <asp:TableCell runat="server">Dotprogramming</asp:TableCell>
                <asp:TableCell runat="server">Chirawa </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow runat="server">
                <asp:TableCell runat="server">2</asp:TableCell>
                <asp:TableCell runat="server">Narendra</asp:TableCell>
                <asp:TableCell runat="server">Chirawa</asp:TableCell>
            </asp:TableRow>
        </asp:Table>
 
    </div>
    </form>
</body>
</html>

Output
How to use Table Control in ASP.NET

Wednesday, August 28, 2013

How to Design Better UI: Border Control in WPF

Whenever we use a control in our WPF window, it feels a simple look in our design view. Border control is used to draw a border around other control. Borders generally play an important role to generate a better UI for the application. It have some properties as other controls have like:

  • BorderBrush: used to specify color for the border.
  • BorderThickness: thickness of the border. By default it is zero.
  • CornerRadius: denote the degree to which the corner of border are rounded.
And many more common properties as WPF controls have like width, height, alignment properties, background, margin, padding and etc. Consider the following code
<Button Width="200" Height="30" Content="Button Without Border" Grid.Row="0"></Button>
<Border Width="200" Height="30" BorderThickness="2" BorderBrush="Aqua" Grid.Row="1" >
<Button Content="Button With Border"></Button>
</Border>

The first button doesn’t have any border so it will be simple in our window. Look out the second button surrounded by a border control. This border control have some properties assigned in above code. As we can see that in the second button, we did not provide width and height because it has been provided in the border control.

Run the above code and check the two buttons written in the above code:

Design Better UI with Border Control in WPF

Designing a same button with the same border can be easily performed with the following code.
Border border = new Border();
border.Height = 30;
border.Width = 200;
border.BorderBrush = Brushes.Aqua;
border.BorderThickness = new Thickness(2);
border.Child = new Button() { Content = "Button With Border" };
this.Content = border;

This code is also as same as written in the above xaml code. Run this code and a single but same button will be placed in WPF window.

How to use Button Control in ASP.NET

The Button Control

The Button control is used for performing action or generating events. There are two types of buttons are available in DOTNET library , First one is push button and another one is command Button. By Default you use push button if you want to make command button then assign some value to the command name property of the button. Button Control available in System.Web.UI.WebControl Class.
If you want to perform some action on button control then you must use Click event of the button. You can run your JavaScript code in DOTNET easily so If you want to perform client-side events on Button control then you must use OnClientClick property of the Button.
OnClientClick :   The Client-side script that is executed on a client-side OnClick

Example of Client side event and server side event

<%@ Page Language="C#" %>
<!DOCTYPE html>
<script>
    function Welcome() {
        alert("Welcome, Example of client side");
    }
</script>
<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("Example of Server Side");

    }
</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="Submit" OnClick="Button1_Click" OnClientClick="Welcome()"  />
    </div>
    </form>
</body>
</html>

Output
How to use Button Control in ASP.NET-Example of client side event
Your OutPut Shows that when you run your application first client side event will be executed after that run your server side event . According to Output diagram your client side code executed first  
<script>
    function Welcome() {
        alert("Welcome, Example of client side");
    }
</script>
After that when you press "OK" button then your Server side code executed.
 protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("Example of Server Side");

    }

How to use Button Control in ASP.NET-server side event


How to use Scrolling in WPF: ScrollViewer Control

Most often times in the programming we don’t know about the size of the content to be displayed. The content may be fit in to the allotted area or may be larger than. That’s why in WPF there is a control i.e. ScrollViewer which can enable scrolling of those content whenever the content goes out to the display area.

ScrollViewer makes use of Scroll Bar controls and hooks them up to your content automatically. Just wrap your element in a Scroll Viewer to make it scrollable. I have used a textblock with large content (unfit to allotted area) in a stack panel as in following code in C# language:
<StackPanel>
<TextBlock Text="dotprograming is the latest group in the education field which gives accurate information about programming language"></TextBlock>
</StackPanel>
Run the WPF window and look out the result.



Text shown without ScrollViewer control in WPF

In the above image the content have been hidden and we can’t check the content without maximizing the window. But what about if the content is a paragraph. Now try the below code:
 <ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock Text="dotprograming is the latest group in the education field which gives accurate information about programming language"></TextBlock>
</StackPanel>
</ScrollViewer>

Run the project and check the result. A horizontal scrollbar has been enabled by the ScrollViewer control as in following image:

TextBlock enabled Scrolling with ScrollViewer control in WPF

The same process can be used when we want to enable vertical scrolling. Scrollbar visibility has four options to select by the user which are:
  • Visible—Scrollbar is always visible, whether it is needed or not.
  • Auto—visible if the content is big enough, hidden otherwise.
  • Hidden—always invisible but scrolling can be done using the arrow keys.
  • Disabled—always invisible and doesn’t exist.

How to open and close connections with ADO.NET

ADO.NET enables applications to connect to data sources and manipulate the data.  In ADO.NET object model, the data is retrieved through a data provider. An application can access data either through a dataset or a data reader.

You have to create a connection and then provide connection string, to move data between data source and an application. SqlConnection class is used to open a connection and also have some more methods:
  • ConnectionString: It is a property provides information like database name and data source.
  • Open (): used to open a connection. It Needs connection string to open a connection.
  • Close (): used to close an existing connection.
For example, the following code will create an object of SqlConnection class and then create a connection a connection string to the database in c# language.
SqlConnection connection = new SqlConnection();
connection.ConnectionString = “Data Source=(LocalDB)\v11.0;Initial Catalog=StockDb; Integrated Security=True”;

Here in the above code i have used the connection string of database name "StockDb". After you have defined the connection string, you need to open the connection by using open() method as written below
connection.Open();

Do all your work related to database and at the last you have to close the connection using close() method as written below
connection.Close();

© Copyright 2013 Computer Programming | All Right Reserved