Pages

Monday, January 28, 2013

2 .CSS Style:Set the background color of different elements


Set the background color of different elements

<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

 <h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>





Posted by Mubeena Riyas at 7:06 PM 0 comments
Labels: ,

1.CSS Style :To Change a Page Background


  1. To Change a Page Background


<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>


Posted by Mubeena Riyas at 6:58 PM 0 comments
Labels: ,

Saturday, January 19, 2013

GridView Controls


Posted by Mubeena Riyas at 9:31 PM 0 comments
Labels: ,

Usefull Sites


Posted by Mubeena Riyas at 9:31 PM 0 comments

Friday, January 18, 2013

Creating a New Dynamic Data Web Site Using Scaffolding (LINQ toSQL And Using Website)


This Post is to show you   how to create a basic Web site that uses ASP.NET Dynamic Data. Dynamic Data enables you to create a data-driven Web site with little or no coding.

An important feature of Dynamic Data is the scaffolding framework. When scaffolding is enabled in a Dynamic Data Web site, ASP.NET analyzes the application's data model and generates Web pages dynamically based on the data in the data model. These auto-generated Web pages provide the capability to display, insert, delete, and edit data for each table.



Creating a Dynamic Data Web Site

1.     Start Visual Studio or Visual Web Developer.
2.     In the File menu, click NewWeb Site.
3.     The New Web Site dialog box is displayed.
4.     Under Installed Templates, in the left pane, select Visual Basic or Visual C#.
5.     In the centre pane, select one of the following:
  • To use the LINQ to SQL model, select ASP.NET Dynamic Data LINQ to SQL Web Site
6.  In the Web Location box, select File System and then enter the name of the folder where you want to keep the
      pages of the Web site.For example, enter the folder name C:\WebSites\DynamicData.
 7.  Click OK.


Visual Studio creates the Web site.

Adding Data to the Web Site

The next step is to add a database to the project. Later you will use the database to create a data context (classes to represent database entities) and then register the data context for use by Dynamic Data.

To add the database file to the project

1.       In Solution Explorer, right-click the App_Data folder and then click Add Existing Item.
The Add Existing Item dialog box is displayed.
2.       Enter the location where you installed the AdventureWorksLT database file (AdventureWorksLT_Data.mdf).
NoteNote
This procedure will create a copy of the database file in the project. If it is impractical to
 make a copy of the database, you can connect to it by using an alternative method, such as 
attaching the database file directly. However, the procedure for doing this is not covered in 
this Post.
The next step is to create the data model. The procedure differs slightly depending on whether you want to use LINQ to SQL or the ADO.NET Entity Framework to create the data model. Use the procedure that applies to the data model that you want to create.

To create the data model using LINQ to SQL

1.       If you are using a Web site project and the Web site does not already have an App_Code folder, in Solution Explorer, right-click the project, click Add ASP.NET Folder, and then click App_Code. Right-click the App_Code folder and then click Add New Item.
2.       If you are using a Web application project, in Solution Explorer, right-click the project, click Add, and thenclick New Item.
3.       Under Installed Templates, in the left pane, perform one of the following:
o    If you are using a Web site project, select Visual Basic or Visual C#.
o    If you are using a Web application project, expand the Visual Basic or Visual C# menu and then select Data.
4.       In the center pane, click LINQ to SQL Classes.
5.       In the Name box, enter a name for the database model.
For example, enter the name AdventureWorksLT.dbml.
6.       Click Add.
The Object Relational Designer is displayed.
7.       In the O/R Designer, click the Server Explorer link (Database Explorer in Visual Web Developer).
8.       In Server Explorer (Database Explorer), under Data Connections, expand the database file node and then expand the Tables node.
NoteNote
If the database file node does not exist, in Solution Explorer, double-click the database file. 
This will create a connection to the database and the file node will be displayed in 
Server Explorer.
9.       Drag all the tables into the O/R Designer.
Each table is represented as an entity that is named for the corresponding database table.
10.    Save the AdventureWorksLT.dbml file.
11.    In Solution Explorer, open the AdventureWorksLT.designer.cs or AdventureWorksLT.designer.vb file that is located under the .dbml file node.
Notice that the .dbml file contains the AdventureWorksLTDataContext class that represents the database. It also contains entity classes, such as the Productand Employee classes, that represent database tables. The constructor for the AdventureWorksLTDataContext class reads the connection string from the Web.config file.
12.    Open the Web.config file.
Notice that the connectionStrings element contains the connection string to the AdventureWorksLT database.
13.    Close the class file and the Web.config file.


To register the data context

  1. Open the Global.asax file.
  2. Uncomment the line that contains the DefaultModel.RegisterContext method.Set the appropriate context type and the variable ScaffoldAllTables to true.For  the LINQ-to-SQL model, use the following code:

C#
DefaultModel.RegisterContext(typeof(AdventureWorksLTDataContext), 
    new ContextConfiguration() { ScaffoldAllTables = true });


Security Note
Enabling scaffolding (setting the variable ScaffoldAllTables to true) can pose a security risk because you are exposing all 
the tables in the data model for display and edit operations.

Testing the Dynamic Data Web Site

You can now test the Dynamic Data Web site that you just created.
 To test the Web site

1.      In Solution Explorer, right-click the Default.aspx page, and then click View in Browser.
2.      The page displays a list that contains the tables that you added to the data model.
3.      Click one of the tables. For example, click the Products table.
4.      A page is displayed that contains the data from the table that you selected. For tables that contain foreign-key fields, a link is provided to the details page of the referenced table. If the table is a parent table in a one-to-many relationship, a link is provided to the list page of the child table.
5.     Click the Delete button to delete a record from the table.
6.     Click the page numbers to navigate through the records.
7.     Click the Edit button to modify a record in the table.
8.     Change the values and then click Update, or click Cancel to cancel the edit operation.
9.     At the bottom of the page, click the Insert new item button to create a new record.
10.  A page is displayed that contains data entry fields.
11. Provide the new record information and then click Insert, or click Cancel to cancel the insert operation.
12. When you have finished, close the browser.
Posted by Mubeena Riyas at 2:17 AM 0 comments
Labels: , ,

Thursday, January 17, 2013

Creating a New Dynamic Data Web Site Using Scaffolding (Web application project-ADO.NET Entity Framework model)


This Post is to show you   how to create a basic Web site that uses ASP.NET Dynamic Data. Dynamic Data enables you to create a data-driven Web site with little or no coding.
An important feature of Dynamic Data is the scaffolding framework. When scaffolding is enabled in a Dynamic Data Web site, ASP.NET analyzes the application's data model and generates Web pages dynamically based on the data in the data model. These auto-generated Web pages provide the capability to display, insert, delete, and edit data for each table.
To create a Dynamic Data Web application project
1.       Start Visual Studio or Visual Web Developer.
2.       In the File menu, click NewProject.
The New Project dialogue box is displayed.
3.       Under Installed Templates, in the left pane, expand Visual C# selection menu.
4.       Select Web.
5.     In the centre pane, 
o    To use the ADO.NET Entity Framework model, select ASP.NET Dynamic Data Entities Web Application.
6.       In the Name box, enter the name of the application.
7.       In the Location box, select enter the name of the folder where you want to keep the pages of the Web application.
For example, enter the folder name C:\WebSites\DynamicData.
8.       Click OK.
Visual Studio creates the Web site.
To create the data model using Entity Framework
1.       We are using Web application project so, in Solution Explorer, right-click the project, click Add, and then click New Item.
2.       Under Installed Templates, in the left pane, perform  the following:
§  For Web application project, expand the  Visual C# menu and then select Data.
3.       In the center pane, click ADO.NET Entity Data Model.
4.       In the Name box, enter a name for the database model.
For example, enter the name ExpenseEntry.edmx.
5.       Click Add.
The Entity Data Model Wizard window is displayed.
6.       Select Generate from database, and then click Next.
The Entity Data Model Wizard is displayed.
7.       Under Which data connection should your application use to connect to the database?, select ExpenseEntry_Data.mdf from the list.
8.       Make sure that the Save entity connection settings in Web.config as check box is selected. You can leave the default connection string name.
9.       Click Next.
The wizard displays a page where you can specify what database objects you want to include in your model.
10.    Select the Tables node to select all tables from the database. You can leave the default model namespace.
11.    Click Finish.
The ADO.NET Entity Data Model Designer is displayed. Close the designer.
12.    In Solution Explorer, open the  ExpenseEntry .designer.cs  file that is located under the .edmx file node.
Notice that the .edmx file contains the ExpenseEntry_DataEntities class that represents the database. It also contains entity classes that represent database tables.
13.    Open the Web.config file.
Notice that the connectionStrings element contains the connection string to the ExpenseEntry database.
14.    Close the class file and the Web.config file.
The next step is to register the data context for use by Dynamic Data.

   To register the data context

  1.        Open the Global.asax file.
  2.        Uncomment the line that contains the DefaultModel.RegisterContext method.
  3.        Set the appropriate context type and the variable ScaffoldAllTables to true 
  4.        For Entity Framework model, use the following code:
  5.        C# Code (Uncomment and change ScaffoldAllTables  False  to true)
DefaultModel.RegisterContext(typeof(AdventureWorksLT_DataEntities),
                         new ContextConfiguration() { ScaffoldAllTables = true });
     6.  This registers the data context for use by Dynamic Data and enables scaffolding for the data model.

7.             7. Save and close the Global.asax file.

Security noteSecurity Note
Enabling scaffolding (setting the variable ScaffoldAllTables to true) can pose a security risk
 because you are exposing all the tables in the data model for display and edit operations.

Testing the Dynamic Data Web Site

 You can now test the Dynamic Data Web site that you just created.
 To test the Web site
  1. In Solution Explorer, right-click the Default.aspx page, and then click View in Browser.
  2.  The page displays a list that contains the tables that you added to the data model.
  3.  Click one of the tables. For example, click the Products table.
  4.  A page is displayed that contains the data from the table that you selected. For tables that contain foreign-key fields, a link is provided to the details page of the referenced table. If the table is a parent table in a one-to-many relationship, a link is provided to the list page of the child table.
  5. Click the Delete button to delete a record from the table.
  6. Click the page numbers to navigate through the records.
  7. Click the Edit button to modify a record in the table.
  8. Change the values and then click Update, or click Cancel to cancel the edit operation.
  9. At the bottom of the page, click the Insert new item button to create a new record.
  10.  A page is displayed that contains data entry fields.
  11. Provide the new record information and then click Insert, or click Cancel to cancel the insert operation.
  12. When you have finished, close the browser.




Posted by Mubeena Riyas at 11:49 PM 0 comments
Labels: , ,

Tuesday, January 15, 2013

FormView in ASP.net


Posted by Mubeena Riyas at 9:35 PM 0 comments
Labels: ,

Sunday, January 13, 2013

MultiView Controls

MultiView and View controls allow you to divide the content of a page into different groups, displaying only one group at a time. Each View control manages one group of content and all the View controls are held together in a MultiView control.

The MultiView control is responsible for displaying one View control at a time. The View displayed is called the active view.

The syntax for a MultiView control is:
<asp:MultView ID= "MultiView1" runat= "server"></asp:MultiView>

The syntax for a View control is:
<asp:View ID= "View1" runat= "server"></asp:View>

However, the View control cannot exist on its own. It would render error if you try to use it stand-alone. It is always used with a Multiview control as:
<asp:MultView ID= "MultiView1" runat= "server">
<asp:View ID= "View1" runat= "server"> </asp:View>
</asp:MultiView>



Example
  1. Create New Web Application
  2. Add New Form 'MultiView.aspx
  3. Add a MultiView to the form
  4. Click inside the multiview and add a html Table and click inside a <td> and add a view
  5. Add 2 or 3 more views in different <td>.
  6. Click inside each views and add html tables.
  7. Add some Controls inside the view
  8. Thats it
Here Comes my Example 


MultiView.aspx


<%@ 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 Button2_Click(object sender, EventArgs e)
    
    {
        if (MultiView1.ActiveViewIndex >0)//we hav only 4 views inside the multiview
           MultiView1.ActiveViewIndex -= 1;
        else if (MultiView1.ActiveViewIndex <=0)
        {
            MultiView1.ActiveViewIndex = 3;
            
        }
    }

    protected void Button3_Click(object sender, EventArgs e)
    {
        if (MultiView1.ActiveViewIndex <3)
        { MultiView1.ActiveViewIndex += 1;}
        else if (MultiView1.ActiveViewIndex >=3)
            MultiView1.ActiveViewIndex = 0;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            MultiView1.ActiveViewIndex = 0;
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>MultiView Control Simple Example</title>
    <style type="text/css">
        .style1
        {
            height: 23px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <table style="width: 100%;">
            <tr>
                <td>
                    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Previous" />
                </td>
                
            </tr>
            <tr>
                <td>
                    <asp:MultiView runat="server" ID="MultiView1">
                        <asp:View ID="View1" runat="server">
                            <table style="width: 100%;">
                                <tr>
                                    
                                    <td>
                                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                                    </td>
                                    
                                </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                            <table style="width: 100%;">
                                <tr>
                                   <td>
                                        <asp:FileUpload ID="FileUpload1" runat="server" />
                                    </td>
                                      </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="View3" runat="server">
                            <table style="width: 100%;">
                                <tr>
                                       <td>
                                        <asp:CheckBox ID="CheckBox1" runat="server" />
                                    </td>
                                    <td>
                               </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="View4" runat="server">
                            <table style="width: 100%;">
                                <tr>
                               
                                    <td>
                                        <asp:Button ID="Button1" runat="server" Text="Button" />
                                    </td>
                                    
                                </tr>
                            </table>
                        </asp:View>
                    </asp:MultiView>
                    </tr>
            <tr>
                <td class="style1">
                    &nbsp;
                    <asp:Button ID="Button3" runat="server" Text="Next" OnClick="Button3_Click"/>
                </td>
                <td class="style1">
                
            </tr>
        </table>
    </div>
    </form>
</body>
</html>



In my Example  i have a MultiView with 4 views inside. And 2 buttons Next and Previous.
I the First view i have added a calender control, to the second a FileUploader Control, to the third i have a Checkbox and to the  forth i have added a Button Control.

In the PageLoad event i have assigned the Multiview active index property to zero, i.e. first view.
When we click the next Button, It will check whether the index is last view's index or not.
  • If No -  Active index will be added by 1.
  • If Yes -  Activeindex will by set to the first view's Index. 
When we click the Previous Button, It will check whether the index is first view's index or not.
  • If No - Activeindex will be subracted by 1.
  • If Yes - Activeindex will by set to the Last view's Index. 

OutPut in Web Browser

PageLoad 

View 1




















Pressed Next Button

View 2



















Pressed Next Again
View 3














Press Next 

View 4


Posted by Mubeena Riyas at 7:11 AM 0 comments
Labels: ,