Designing CSS with Visual Studio 2010

Follow these steps for making the design of the controls in asp.net so attractive through the CSS.

1)     Open a new Web Site, and select the Source mode.

2)  From the Standard Toolbox menu, add a Textbox web control to the editor between the <div></div> tags, and put a <p/> tag after it

3)   From the HTML Toolbox menu, add an Input (Text) Web form beneath the <p/> tag.

4)   Switch to Design mode

5)  Select View àManage Styles to open the CSS Manage Styles tool.

6)  Once the CSS style tool is open, click on New Style at the top of the window. The New Style window opens.

7)  In the Selector box, type .input. This is the class name.

8)    In the Define In box, choose Current Page from the drop-down list

9)     Select Font from the Category menu. Make the settings: -

10)  Select Border in the Category menu

11)   Select Position àcategory menu (according to the condition)

12    Click OK and if you want to see the information which you stored in CSS just move the mouse over the CSS file (such as .input class).

13) Now go to the design mode (.aspx page) àdrop web controls as you want à Go to property window à  CSS Class à choose Name of CSS class such as (.input )

Edit and Update record in Grid View in asp.net

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (IsPostBack == false)

        {

            data_bind();

        }

    }

    private void data_bind()

    {

        SqlDataAdapter adp = new SqlDataAdapter("select * from tbemp1", ConfigurationManager.ConnectionStrings["cn"].ConnectionString);

        DataSet ds = new DataSet();

        adp.Fill(ds);

        GridView1.DataSource = ds;

        GridView1.DataBind();

    }

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

    {

        GridView1.EditIndex = e.NewEditIndex;

        data_bind();

    }

    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

    {

        Int32 empno,esl;

        String enam, eadd;

        enam = ((TextBox)(GridView1.Rows[e.RowIndex].FindControl("t1"))).Text;

        eadd = ((TextBox)(GridView1.Rows[e.RowIndex].FindControl("t2"))).Text;

        esl = Convert.ToInt32(((TextBox)(GridView1.Rows[e.RowIndex].FindControl("t3"))).Text);

        empno = Convert.ToInt32(((Label)(GridView1.Rows[e.RowIndex].FindControl("lk"))).Text);

        SqlConnection con = new SqlConnection();

        con.ConnectionString = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;

        con.Open();

        SqlCommand cmd = new SqlCommand();

        cmd.CommandText = "Update tbemp1 set ename = @enam,eadd = @ed,esal = @esl where empno = @eno";

        cmd.Connection = con;

        cmd.Parameters.Add("@eno", SqlDbType.Int).Value = empno;

        cmd.Parameters.Add("@enam", SqlDbType.VarChar, 50).Value = enam;

        cmd.Parameters.Add("@ed", SqlDbType.VarChar, 50).Value = eadd;

        cmd.Parameters.Add("@esl", SqlDbType.Int).Value = esl;

        cmd.ExecuteNonQuery();

        cmd.Dispose();

        GridView1.EditIndex = -1;

        data_bind();

    }

   

}

2 - Tire architecture used in asp.net

           SQL Data Source data bound control always used with 2 –Tire Architecture

                1.     Using of SQL data source with Grid view

SQL data source: -

                     The SQL data source control enables you to use a Web server control to access data that is located in a relational database. This can include Microsoft SQL Server and Oracle databases, as well as OLE DB and ODBC data sources. You can use the SQL data source control with data-bound controls such as the grid view, Form view, and Details view controls to display and manipulate data on an ASP.NET Web page, using little or no code.       

   Connecting the SQL data source with Database

1)    Place the grid view control and SQL data source controls on the web page at design time.

2)   Choose SQL data source  à Task list à Configure data source.

3)   Here we choose the data connection used to connect to the database.

4)  In this step we choose the specify columns from tables or Specify the custom SQL statements or Stored procedure.

5) 1^st we choose name of the table and select * for all columns.

  Connecting the SQL database with Grid view control

Grid view à Task list à Data source à SQL data source 1.

        

Key points of Grid View Control in asp.net

1. Here we can manipulate the data as like a data list control(Insertion, deletion)
2. Here we can get the data at runtime in tabular form automatically. 
3. Here we can easily sort the data in ascending or descending order through the sorting property in Grid view.
4.  In the Grid view control, we get the default template
5. Auto edit, Auto delete, Auto Select options are preoccupied here

         In the grid view control, we can apply eight templates

1.     Item template

2.     Edit item template

3.     Alternating Item template

4.     Header template

5.     Footer template

6.     Selected Item template

7.     Pager template

8.     Empty Data template

Data Repeater control in asp.net

1)    It is used to display data in single column.

2)    No Manipulation is allowed in data repeater.

3)    There are no Paging concept in data repeater

4)    There are no default templates.

Here we have Five Templates are applied on data repeater

1)    Item Template

2)    Alternating Item Template

3)    Header Template

4)    Footer Template

5)    Separator Template

Disconnected approach for binding the data in data bound control

public partial class Default2 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Page.IsPostBack == false)

        {

            rep_bind();

        }

    }

    private void rep_bind()

    {

        SqlDataAdapter adp = new SqlDataAdapter("Select * from tbbook1", ConfigurationManager.ConnectionStrings["cn"].ConnectionString);

        DataSet ds = new DataSet();

        adp.Fill(ds);

        Repeater1.DataSource = ds;

        Repeater1.DataBind();

    }

}

Composite Data Bound control and types in asp.net

            Composite Data-bound controls are controls that can be bound to a data source control to make it easy to display and modify data in your Web application.There are total 8 data bound controls presents in asp.net 4.0 version, 

           Data Bound Control in Framework 2.0 Version

   

                                 1)    Repeater

                        2)    Data list

                        3)    Grid view

                        4)    Detail view

                                 5)  Form view

            Data Bound Control in Framework 3.5 Version.

          Here we added some more Composite Data Bound Control

                       1)    List view

                       2)    Data view


   Data Bound Control in Framework 4.0 Version.

                   1)    Chart control

   Note : - Text boxes and labels are also data bound controls, but it binds less amount of data.