How fast can you create a single-page, coding-free, AJAX-enhanced, Linq-driven Web application from scratch in VS 2008v2/VWD? Very fast, I'll bet.
I've prepared these instructional steps. Your challenge is to follow them closely and report back how many minutes/seconds it took. You only get one shot (after that you're not a newbie).
Please report any errors, bugs, missing steps, troublespots, or ways to make this shorter. The process bogs somewhat in the Create a Database section but mainly suffers in the Configure the ListView Columns section. (I'm not sure why the column alignment goes out of whack and needs repair.)
Anyway, have fun and let me know?
Prepare the Project
- In VS 2008b2, create a new Web site (File > New Web Site > ASP.NET Web Site).
- Delete the Default.aspx that uses code-behind.
- Add a new page called Default.aspx (File > New File > Web Form > (Uncheck Place code in separate file) > Add).
Create the Database
- Add a database into the App_Data folder (File > New File > SQL Database > Add).
- In Server Explorer, select the Tables node (Data Connections > Database.mdf > Tables)
- Add a new table (Data > Add New > Table).
- Add an ID column. (Column name [id] > Data Type [int] > Identity Specification > (Is Identity) > Yes).
- Set ID as the primary key. (Table Designer > Set Primary Key)
- Add a Title column. (Column name [Title] > Data Type [varchar(50)])
- Add a Description column. (Column name [Description] > Data Type [varchar(300)])
- Save the Table Designer (File > Save Table1 > OK).
- Close the Table Designer.
Create a LINQ to SQL Class and DataContext
- In Solution Explorer, add a LINQ to SQL Class to the App_Code folder (File > New File > LINQ to SQL Classes > OK)
- If DataClasses.dbml isn't already open, open it.
- Switch to Server Explorer.
- Drag Table1 from Server Explorer and drop it on the left-hand pane (the Object Relational Designer).
- Save DataClasses.dbml and close the designer.
Configure the LinqDataSource
- Open the ASP.NET page in Design view.
- From the Toolbox, drag a LinqDataSource control and drop it on the page.
- In the LinqDataSource Smart Tasks, click Configure Data Source.
- Choose DataClassesDataContext as the context object and click Next.
- Click Finish.
- On the LinqDataSource Smart Tasks, select Enable Delete, Enable Insert, and Enable Update.
Configure the ListView
- From the Toolbox, drag a ListView control and drop it on the page.
- From the Smart Tasks, choose the data source LinqDataSource1.
- From the Smart Tasks, click Configure ListView.
- Select Grid, Colorful, and enable Editing, Inserting, Deleting, and Paging.
- Click OK.
Configure the ListView Columns
- From the ListView's Smart Tasks, set the Current View to AlternatingItemTemplate.
- In Design view, put your mouse in the ID column header.
- Right-click, and from the context menu click Delete > Delete Columns.
- From the Smart Tasks, set the Current View to EditItemTemplate.
- In the Title column, delete idLabel1.
- Move the two Textbox controls one column to the left.
- From the Smart Tasks, set the Current View to ItemTemplate.
- In the Title column, delete idLabel.
- Move TitleLabel and DescriptionLabel one column to the left.
- From the Smart Tasks, select SelectedItemTemplate.
- From the Title column, delete idLabel.
- Move TitleLabel and DescriptionLabel one column to the left.
Configure ASP.NET AJAX
- From the Toolbox, drag an AJAX ScriptManager control and drop it above the ListView control.
- Drag an UpdatePanel and drop it to the right of the ListView control.
- Select the ListView control and drop it inside the Update Panel.
Run and Test the Page
- Browse to the page.
- Add a title and description.
- Click Insert.
Hey, playing with this new stuff sure beats working for a living!