TechBubbles

Introduction

Using the ASP.NET ListView Control we can insert,edit, or delete records without writing any code. This post explains how to display and update data using the ListView control. We will use SqlDataSource control to retrieve results from the data source and act as the data source for the ListView control.

1. Create a web site in visual studio 2008 by selecting the File menu, click new

    web site option the following dialogue box will appear

2. Enter the name for the web site and say ok.

3. To display and modify the data in listview control add the database file to the

    App_Data folder. Here i am adding the Department table of AdventureWorks

    database.

4. Open the design view of the default.aspx file and add the Listview control

    from the datasection in the toolbox.

Read more

Introduction

ASP.NET MVC Applications contains the action methods in the controllers. These actions are mapped through the routing when a user makes a browser request. In order to execute your logic before a action method is called or after an action method runs. ASP.NET MVC support this requirement through a concept called ActionFilters. 

ActionFilter Uses

• Authentication and Authorization can be implemented using action filters.
• User actions can be logged.
• For setting up the Localization feature in the application.
• For Changing the Application behavior based on browser user agent.

Creating an ActionFilter in ASP.NET MVC Application

You can write a ActionFilter class by inherting from ActionFileAttribute class. You can override the method OnActionExecuting and write the logic that executes before Action Method.

1. To Add a ActionFilter to the ASP.NET MVC Application right click the Controllers folder in the project and select the add new item option and add the class template write the following code.

2.   Applying Filtering attribute to the action method in the controller class

You can also apply the ActionFilter to all action methods in the controller.

Introduction

This post speaks about basics of URL Routing and how URL Routing related to building a ASP.NET MVC Application. You can also use the URL Routing with the ASP.NET Web application if install the Visual Studio 2008 service pack1. This post specifically speaks about how URL Routing is used in ASP.NET MVC Application.

• URL Routing is critical element in the ASP.NET MVC Application.
• The reason for this is URL Routing determines incoming request to get mapped to the MVC Controller.

1. Open the ASP.NET MVC Application which is already created and open the web.config file in the project.

Notice that with in the module section in the web.config file there is something called UrlRoutingModule. This HTTP Module Intercepts all the incoming requests in the ASP.NET MVC Application.

2. This HTTP Module uses the RoutingTable and this Route Table is set up in the Global.asax file.

RegisterRoutes Method called when MVC Application stars and it sets up a route table that just contains a route. We create the routes in the route table by calling the MapRoute method.

• The first parameter for the method is route name.
• second parameter is URL which specifies the pattern to intercept request. 3 segments will be there in this pattern. first segment is Controller, Second one is Action and the Third one is id.
• The third parameter is for to set up the defaults, If you don’t pass the controller in the URL then it takes the Home as default and if you don’t mention the action it takes the Index and id as empty string.

Read more

Introduction

ASP.NET Data Pager Control is generally used in conjunction with the List View control. Read the post  ASP.NET List View Control in VS 2008 to get the idea of using this control. This post explains the use of new Data Pager Control that ship with the VS 2008.

I am using the List View control project to explain the use of Data Pager Control.

1.  We displayed the List of Article titles from the RSS feeds using List View Control. It looks like in the following screen

Notice that all the articles in the RSS feed are displayed in the single request. When more number of items are in the Request output and you want to display few items per page then you can use the Data Pager control.

2. You can find the Data Pager control under the Data section in the tool box drag the control and place in the List View project.

3. Configuring the Data Pager

• For Data Pager Control you need to set the  PagedControlID it is going to be ListView Control ID.
• How many items that you want to display per page can be set by using PageSize property.
• In side the DataPager we have the Fields collection there you can specify the properties in NextPreviousPagerField like ButtonType that can be button,image or link.
• You Can set the Next,Previous, First and Last buttons properties.
• NumericPager Field to show the page numbers on the page where user can use it to jump in to the page.

The Output of the page after configuring the DataPager control looks like

Conclusion

We have seen how we can use the Pager control for implementing the  paging  with best visuals and simple implementation.

Introduction

This post gives you the basic overview on ASP.NET Models, Views and Controllers. It explains how all parts in MVC Application work together and discuss how the Architecture of an ASP.NET MVC application differs from an ASP.NET  Web Forms application.

The Sample ASP.NET MVC Application

1. Launch Visual Studio 2008, Select the menu option File, New Project  then New Project Dialogue box appear as shown below

Select the ASP.NET MVC Web Application Template from the dialogue box and click Ok.

2. When you create a ASP.NET MVC Application, Create Unit Test Dialogue box appears as shown below.

Select the No, do not create a unit test project and click Ok.

3. After ASP.NET MVC Application is created . You will see several folders in Solution Explorer. You will find three folders named Models, Views and Controllers.

If you expand the Controllers Folder, you will see a file named HomeController.cs and if you expand the Views folder you will see About.aspx and Index.aspx under Home Sub Folder.

4. Now you run the application you will see the following output

Notice the URL in the  Address bar, When you click the Home menu link, The URL in the browser changes to /Home and when you click the About menu link, the URL changes to /About.

If you return to Visual Studio project you do not find the Home or About page.

A URL Does not Equal to a page in the application   

• When you build a ASP.NET Web Application, there is a correspondence between a URL and Page. If you request a page test.aspx from the server then page must be on the disk other wise 404 – page not found error will come.
• When you build a ASP.NET MVC Application, there is no correspondence between URL and page that you found on the disk. Here a URL corresponds to a controller action instead of a page on the disk.
• In ASP.NET Web Application, Requests are mapped to pages. In ASP.NET MVC Application ,request are mapped to controller actions.
• ASP.NET Web Application is content-centric and MVC Application is logic centric.

URL Routing 

• Here Browser Request is mapped to controller action through a feature called URL Routing. URL Routing route the incoming requests to controller actions.
• URL Routing uses Route Table that will be created when application first starts.
• Route table is setup in the Global.asax file.

The Default Global.asax file looks like

When ASP.NET Application first starts, the Application_Start() method is called. This method calls the RegisterRoutes() method which creates the default route table.

• Route table breaks the incoming request into 3 parts
• First part is mapped to a controller name, the second part is mapped to an action name and final part is a parameter that passed to the action.

Example:  /Student/Details/3

This URL is parsed into three parts like this:

Controller = StudentController

Action = Details

Id = 3

If you run the sample ASP.NET MVC Application with out supplying a URL, the URL is parsed like this

Controller = HomeController

Action = Index

Id = “”

Controllers

A Controller is responsible for sending  the response back to a user who makes the request. Controller is just a C# class file. The Sample MVC Application contains the controller named HomeController.cs located in the Controllers folder.

The Controller in the ASP.NET  MVC Application looks like

Note: The two methods in the controller Index() and About() corresponds to two actions Home and About clicks.

Views 

• A view in the ASP.NET MVC Application contains the HTML elements and content that is sent to the browser.
• The two actions in the controller return a view.
• A View is equivalent to a page in ASP.NET MVC Application.

The HomeController.Index() action returns a view located in the following path

\Views\Home\Index.aspx

If you want to return a view for a controller action, you need to create a sub folder in the Views folder same name as controller and create a .aspx file with same name as the action.

Models 

A Model in ASP.NET MVC Application contains logic that is not in the view or a controller. The Model should contain your business logic and Data access logic.

Conclusion

We had a overview on ASP.NET MVC application and URL Routing. We learnt the functionality of Model, Controller and View in the ASP.NET MVC Application.

Introduction

In this post I am going to explain the new data driven List view control that ships with Visual Studio 2008. To get start with the application create a web site in vs 2008.

1. Create a Web Site in Visual Studio 2008

2. Drag the ListView control from tool box under the Data section into the page.

3. To populate the items in the ListView control we are using XML Datasource control. We can use any Datasource like object Datasource, SQL data Source or LINQ data source. 

Configuring XML Data Source:

• We are setting DataFile property of XML DataSource, in this case it is my BLOG RSS feed path.
• We are specifying the items that we are going to display with the help of XPath property.
• Now just we finished the configuring the XML datasource.

Configuring the ListView:

• Specify the DataSource element where you want to pull the data in to ListView. In this case we have to give the XMLDataSource id.
• Specify the ItemContainerId value as “DataSection”.

To configure this ListView we are using 3 Templates

1. LayoutTemplate.
2. ItemTemplate.
3. ItemSeparatorTemplate.

LayoutTemplate is used to show the over all layout of the template. We can give the title for our page. We need to place a placeholder the id of this control specifically should be “itemPlaceholder”.

ItemTemplate is visual layout of the each item that we iterated over the each element inside the ListView Control. Specify the individual items that you want to display in the ListView.

ItemSeparatorTemplate is just specify the styles to separators in ListView items.

4. Run the above application we can see the result as shown in the following screen shot.

In the next I will explain about page control along with the ListView control.

Introduction

This post explains how to create a Model from the database using ASP.NET Entity Framework. Using Entity Framework you can define the flexible mapping to existing relational schema.

Here I have created a new console application to explain the ASP.NET Entity Framework. You need to install the VS 2008 SP1 to work with the ASP.NET Entity Framework.

1. Right click the Project and Create a Data Model for database by selecting

   Add  New item option. It looks like the following screenshot.

2.  It prompts you to select the option for Model from dialogue box

3. Specify the Database Connection and it generates the Entity Framework 

    connection string which will save in the web.config file.

The metadata section in the connection string specifies how to interact the objects with the database. csdl describes the model. ssdl describes the database model and msl describes the mapping between model and database model. Next part in the connection string is database provider here we are using SQL provider and last part is connection string for the provider.

4. Choose the database objects to build the model.

From the above dialogue box we can choose desired tables, views and stored procedures.

5. Now Entity Frame work generates the default model and entities in the    

    Project.

Navigation properties in the above model describes mapping between the models.

6. Establish the object context to interact with entities.

7. We can see the results by executing the project

Conclusion

What we have done is we have taken a existing database to generate the Entity Framework model then we used object context to show the data from the database.

Introduction

This post explains the improved designer for creating Nested Master pages in visual studio 2008 and ASP.NET 3.5. Nested Master pages are used when you are build a hierarchy of templates for your web site.

For Example your Enterprise may have the corporate style header and each of your department in your organization may have different templates styles there you can use nested master pages for designing the templates.

You did have this feature in ASP.NET 2.0 but you were not able to work out with the visuals in the designer.

Working with Nested Master pages in VS 2008 and ASP.NET 3.5 in a sample

1. Create a New Web site in VS 2008 File, New Web site it looks like the following screen shot

2. Create a Nested Master page to link the above master page by right clicking the web site and select add new item option  dialogue box will appear from there select the NestedMasterPage template.

NestedMasterPages allows you to link masterpages together.

Select the Master page and click ok it will link to the selected masterpage.

We have created the above NestedMasterPage for a Department. The new feature that you need to observe is you are able to see the visuals in designer where you can edit the content in NestedMasterPage and you can view the results immediately in designer.

3. Now we are going to create a content page for this NestedMasterPage. Right click the project and select Add New Item the following dialogue box will appear

Instead of selecting a Web Form, we have new option Web Content form template in VS 2008 select this template for creating the content page for the NestedMasterPage.

4. The NestedContentPage will looks like the following

This is basically representing the what we are going to see in browser by having the Global MasterPage, NestedMastePage and Content Page which really increasing the developer integrated design experience.

Introduction

Dynamic Data uses Data context objects and  metadata model to present the information using templates. This post speaks about how we can control the display of dynamic data. Some times we want to change the default rendering of the templates.

How we can change the Fields Rendering

1. Let us take sample and change the Field Rendering

From the above sample we are going to change the Display format of the Publish Date field.

2. Open the NorthWind.dbml file from the Dynamic Data Web site project, if you view the code behind file which is automatically generated by the Dynamic Data Web Site Project. It looks like in the following figure

3. We  are not editing the above class because it is generated from the Database meta model.  We are going to create new partial class with name Book in the App_code folder. It looks like in the following figure.

We added the MetadataType attribute to the book class which is of  the type BookMetadata class. BookMetadata class defines the DisplayFormat of the publishdate field.

We have used the DisplayFormat attribute which defines the dateformat with nameparameters.

4. Run the project to see the Result in the Dynamic Data Web site

Introduction

This post explains how to edit the data inline in grid view control. I explained the overview on ASP.NET Dynamic Data and creating a simple Dynamic Data Web site using Scaffolding.

How to edit the inline data in Grid view

1. Open the Dynamic Data Web site that you have created in Dynamic Data Web site using Scaffolding.

2. Open the Global.asax  file it looks like

The Default route will look like above highlighted area. It took the table as database table name and action is one of List,Details,Edit or Insert. Comment the default route which shown above in the screen shot.

3. There are some routing statements put in the comments below the default route, we have to  un comment the section.

From the above new routing statement observe that instead action it is having ListDetails page for Action List and Details. So Same page is using for listing the results and editing the data.

4. You can find the ListDetails.aspx page under PageTemplates in the Dynamic Data Web Site.

5. When execute the project we will see the following screen which is ready for inline editing when you are updating the record.