Opt In (Do Not Edit Here)

Showing posts with label ASP.NET. Show all posts
Showing posts with label ASP.NET. Show all posts

Mar 11, 2012

Creating HTMLTable Dynamically




Description:
          The blog is intended to demonstrate the use of some HTMLControls for dynamically generating the HTMLTable on webpage using some piece of code.
          Required Namespace: System.Web.UI.HtmlControls

Controls used:
1.    Two Textboxes (txtRow & txtCol)
2.    One Button (btnClick)
3.    One Blank Table (htmlTable1)

Procedure:
Step 1: Accept the no. of Rows and Columns from User.
            int row = Convert.ToInt32(txtrow.Text);     // No. of Rows
            int col = Convert.ToInt32(txtcol.Text);     // No. of Columns
 Listing 1

Step 2: Now, Initialize the new TableRow & TableCell to add Data into Table.
            for (int i = 0; i < row; i++)
            {
                  HtmlTableRow rows = new HtmlTableRow();         //a new Row
                 
                  for (int j = 0; j < col; j++)
                  {
                        HtmlTableCell cell = new HtmlTableCell(); //a new Cell
Listing 2

Step 3: You can put any data into Cell, also can make some FORMATTING for good looks, and then add this cell to the row element…
                  
                   cell.InnerHtml = i + "," + j;               //Insert Data into Cell
            cell.Align = "Center";
            cell.BorderColor = "Gray";
           
            rows.Cells.Add(cell);                       //Attach Cell with Row
Listing 3

Step 4: Now, simply insert this row element into htmlTable1 to display that row on the screen.

               htmlTable1.Rows.Add(rows);                      //Attach Row with Table
Listing 4

Step 5: Now execute the web application and see the result.
         

Intended Result:



Figure 1


Summary:

          In this piece of writing, we see how to generate the HTML table with user accepted rows and columns. For writing the code here I used the C# and ASP.NET.
 

Apr 22, 2011

DataList Control in ASP.NET using Wizard


Programming Level : Beginner
Programming Environment : Visual Studio 2008
          Language : Visual C# 2008

-----------------------------------------------------------------------------------

Introduction:

In this Article, we are taking Overview of DataList Control in ASP.NET.

  • The DataList Web server control displays rows of database information in a customizable format. The format for displaying the data is defined in templates
  • The DataList control is useful for data in any repeating structure, such as a table.
  • The DataList control can display rows in different layouts, such as ordering them in columns or rows.
  • The DataList control renders items in a list using HTML table elements.

Now Follow the Below Steps to Use DataList Control Through Wizard..........



Steps:
  1. Create new Website in Visual Studio.
File à New Web Site … (‘New Web Site’ Dialog Box will appear.)
  1. Set the Language to “Visual C#” or “Visual Basic” in ‘New Web Site’ Dialog Box.
  2. Now, Open “Default.aspx” file appeared in Solution Explorer.

  1. Drag the DataList Control from Tool Box onto the Default.aspx (Design).

Figure 1: Drag the DataList Control to the Default.aspx File

  1. Now, select the <New Data Source> option from DataList Taks.

Figure 2: Selecting Data Source

  1. Select Data Source Type and Specify the ID for it. Then click OK Button.

  1. Choose Data Connection to connect with Database Then click Next Button.


  1. Now, select the Table Name and Column(s) to be display on DataList, Then Click Next Button.


  1. If you want to verify the Select Statement, Click Test Query Button.


After Click Finish Button, you’ll see the changes in DataList Control as follows



10. Now, if you want to change the Display color of DataList, click the Auto Format… option present in the DataList Tasks and change the Color.(Optional)

  1. We can also Use the Templates provided by DataList Control, templates are as follows (Optional) :-

Note: Default Template for DataList is ItemTemplate

12. For now I have formatted DataList as Follows:-


  1. Now, Run the Project by pressing function key
F5 (Run with Debugging)
---Or---
Ctrl+F5 ( Run without Debugging)

  1. Result will be displayed in Default Web Browser as follows:-



Note:
If you want to avoid the selection of Data Source and formatting the DataList Items through Wizard, then SKIP the Steps 5 to 12.
Instead of Performing Steps 5 to 12, you can also simply type the code for different templates provided by DataList Control into the Source Section of the Default.aspx.

All Rights Reserved. 2014 Copyright SIMPLITONA

Powered By Blogger | Published By Gooyaabi Templates Designed By : BloggerMotion

Top