Code-Inside Blog International

Just found an interesting eBook:

- Free Chapter of Beginning ASP.NET MVC 1.0 – Testing ASP.NET MVC Applications (Blogpost)

With ASP.NET MVC the developer has now full control about the HTML rendering and how the form data will be transmitted to the server. But how can you get the form values on the server side? There are better ways in MVC to do that than Request.Form["..."].

Read the rest of this entry »

The ASP.NET MVC 1.0 Release Candidate was today published by Scott Gu. Scott wrote a great blogpost about the improvements in the RC in his blog.

Read the rest of this entry »

ScottGu wrote (I know – I´m late ) a blogpost about the release candidate of ASP.NET MVC and the  MVC Design Gallery.

Read the rest of this entry »

Microsoft released last week a ASP.NET MVC demo project called "Oxite" and many Newssites wrote things like "MS launched open source blogging plattform". It´s great that Microsoft released the source code, but on the other handside, there are many criticisms from the alpha geeks. The question is: Should source code only released if it is "perfect"?
Read the rest of this entry »

Microsoft released today a new feature for ASP.NET – free chart controls (which are based on the Dundas Chart Controls). There are many nice looking charts in this download included:

The best thing is: It should work with ASP.NET MVC!

Download links for the ASP.NET Charts (free) :

• Download the free Microsoft Chart Controls
• Download the VS 2008 Tool Support for the Chart Controls
• Download the Microsoft Chart Controls Samples
• Download the Microsoft Chart Controls Documentation

Edit the Web.Config
To enable the controls you have to edit the web.config file.
Add this under the controls tag (path: "<system.web><pages><controls>") :

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

And add this httpHandler (under "<httpHandlers>") :

<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

Via: Combining ASP.NET MVC and ASP.NET Charting Controls

Add a chart control to a view:

Option A: ASP.NET Control + Code behind

If you use this option, you will have to add some code lines in the code behind file of your view. This shouldn´t be a big problem, because the controller is still responsible for the logic.

I took the "GettingStarted" Control from the samples:

Index.aspx:

<asp:chart id="Chart1" runat="server" Height="296px" Width="412px" Palette="BrightPastel" imagetype="Png" BorderDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" BorderColor="26, 59, 105">
	<Titles>
		<asp:Title Text="With datasource in code behind" />
	</Titles>
	<legends>
		<asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>
	</legends>
	<borderskin skinstyle="Emboss"></borderskin>
	<series>
		<asp:Series Name="Column" BorderColor="180, 26, 59, 105">
		</asp:Series>
	</series>
	<chartareas>
		<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
			<area3dstyle Rotation="10" perspective="10" Inclination="15" IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle>
			<axisy linecolor="64, 64, 64, 64">
				<labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />
				<majorgrid linecolor="64, 64, 64, 64" />
			</axisy>
			<axisx linecolor="64, 64, 64, 64">
				<labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />
				<majorgrid linecolor="64, 64, 64, 64" />
			</axisx>
		</asp:ChartArea>
	</chartareas>
</asp:chart>

I don´t know the exactly meaning of each line (read the documentation to lern more about it), but the important point is that we have a "Serie" with name " "Column" – this will represent your data as a bar in your bar chart.

Index.aspx.cs:

    public partial class Index : ViewPage
    {
        protected void Page_Load(object sender, System.EventArgs e)
        {
            foreach (int value in (List<int>)this.ViewData["Chart"])
            {
                this.Chart1.Series["Column"].Points.Add(value);
            }
        }
    }

Result:

Option B: Inline ASP.NET Control

You could also create the control without a code behind file, just create the control on the fly via inline code:

        <p>
        <%
						System.Web.UI.DataVisualization.Charting.Chart Chart2 = new System.Web.UI.DataVisualization.Charting.Chart();
                        Chart2.Width = 412;
                        Chart2.Height = 296;
                        Chart2.RenderType = RenderType.ImageTag;

                        Chart2.Palette = ChartColorPalette.BrightPastel;
                        Title t = new Title("No Code Behind Page", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
                        Chart2.Titles.Add(t);
                        Chart2.ChartAreas.Add("Series 1");

						// create a couple of series
                        Chart2.Series.Add("Series 1");
                        Chart2.Series.Add("Series 2");

						// add points to series 1
                        foreach (int value in (List<int>)ViewData["Chart"])
                        {
                            Chart2.Series["Series 1"].Points.AddY(value);
                        }

                        // add points to series 2
                        foreach (int value in (List<int>)ViewData["Chart"])
                        {
                            Chart2.Series["Series 2"].Points.AddY(value + 1);
                        }

                        Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
                        Chart2.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
                        Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
                        Chart2.BorderWidth = 2;

                        Chart2.Legends.Add("Legend1");

						// Render chart control
                        Chart2.Page = this;
						HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
						Chart2.RenderControl(writer);

                     %>
        </p>

Result:

Both controls together:

I think this is a very nice feature (and play well together with ASP.NET MVC) and you could add nice charts without buy a 3rd party licence.

[ Download Source Code ]

In my last post I wrote about why you should take a look at ASP.NET MVC. With this blogpost I want to go a little bit deeper into the MVC universe.

The project template
After the installation of ASP.NET MVC (currently beta) you will find a new project template in Visual Studio:

Right after you click ok you get another dialog:

ASP.NET MVC is very testable and ask you if you want to create a unit test project. I recommend you to do that (or create your own unit test project) – unit tests are a great way to produce high quality.
The default test framework is MSTest, other frameworks will be added later (hopefully ).

Project structure:
Now you should see a solution like this (i added another project to this solution, but you don´t need to care about it):

The "ReadYou.WebApp" shows the typical ASP.NET MVC folder structure:

• Controller: Logic
• Models: Business data / application model
• Views: simple ASPX / ASCX / masterpage (or other) views

Views, Controller & Models in detail
The project template include 2 controller and 3 view folders:

• The "Shared" folder contains all viewelements that could be used by other views, like the masterpage or some common controls.
• Each controller has it´s own view folder ("AccountController" – "Account" / "HomeController" – "Home")
• This "path"-configuration can be modified by using the diverent interfaces, hier are 2 good examples "Partitioning an ASP.NET MVC application into separate "Areas"" and Rob Conerys version.
• The "model" folder contains only the application data classes (normal CRL classes)

A short look on the default website:
The default MVC website is great to get a first look how MVC is working. There is masterpage, a simple membershipsystem and some simple form stuff (the login and register page) :

The request Flow:
Justin Etheredge create a great overview of the request flow and where the extensibility points are: ASP.NET MVC Request Flow

Communication between the controller and the view:

You can use the "ViewData"-dictionary to send data from the controller (the request will be routed to an action method of a controller) :

public ActionResult Index()
        {
            ViewData["Title"] = "Home Page";
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

The data in the dictionary  will be send to a view called "Index" in the "Home" folder, because the action method is a method of the "HomeController". You can specify a view in the "View(YOURVIEW)" method, but if you just use the "View()" method the MVC framework will route the data to a view namend like the action method itself e.g. "Index".

Source code of the "Index.aspx" (~/Views/Home/):

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="ReadYou.WebApp.Views.Home.Index" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
</asp:Content>

The data in the "ViewData"-dictionary are rendered though the inline code. There is no code behinde file, it´s similar to PHP/JSP or classic ASP.

As you can see: ASP.NET MVC is still MVC. You can still use the masterpage files and the content placeholder and use the "ViewData" in the masterpage:

...
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title><%= Html.Encode(ViewData["Title"]) %></title>
</head>
...

Strongly typed ViewData:

The dictionary isn´t very great in bigger applications, but you can use a strongly typed ViewData class to send data from the controller to the view. If you take a look at the code behinde file of the viewpage, than you see a partial class which is inherited from ViewPage:

namespace ReadYou.WebApp.Views.Home
{
    public partial class Index : ViewPage
    {
    }
}

You can pass in your own "ViewData" class to the ViewPage<T>:

Index.aspx.cs:

namespace ReadYou.WebApp.Views.Home
{
    public class IndexViewData
    {
        public string Text { get; set; }
    }

    public partial class Index : ViewPage<IndexViewData>
    {
    }
}

Index.aspx:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="ReadYou.WebApp.Views.Home.Index" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData.Model.Text) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
</asp:Content>

HomeController.cs:

        public ActionResult Index()
        {
            ViewData["Title"] = "Home Page";
            IndexViewData data = new IndexViewData();
            data.Text = "Hi strongly typed viewdatat";
            ViewData.Model = data;
            return View();
        }

The benefit of this approach is, that you get a more robust application and have a "contract" between the view and the controller.

Warning: The "ViewData["Title"]" is still in use, because the masterpage needs this data. In the MVC universe the controller is responsible to send all data to the view (there are some ideas how you can create an get an independent control).

You finde more information in this great blogpost of Scott Guthrie (it´s an older one, but the concepts are still in use):

ASP.NET MVC Framework (Part 3): Passing ViewData from Controllers to Views

Communication between the view and the controller

The view talks to the controler via normal HTML links or forms (GET/POST data).

The template included some examples:

Option 1: Via GET or the "ActionLink"

If you want to go to the register page, you just click on this link:

You just use the HTML "ActionLink" helper:

<p>
        Please enter your username and password below. If you don't have an account,
        please <%= Html.ActionLink("register", "Register") %>.
    </p>

The request will be routed to the "Register" action method on the "AccountController", because this view is inside the "Account"-folder and the second ActionLink parameter contains the name of the specific action method.

Option 2: Via POST

The login mask (username / password) use a standard HTML form:

    <form method="post" action="<%= Html.AttributeEncode(Url.Action("Login")) %>">
        <div>
            <table>
                <tr>
                    <td>Username:</td>
                    <td><%= Html.TextBox("username") %></td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><%= Html.Password("password") %></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="checkbox" name="rememberMe" value="true" /> Remember me?</td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Login" /></td>
                </tr>
            </table>
        </div>
    </form>

The Url.Action Helper create the action URL for the form. The form values will be submitted to the "Login" action method of the "AccountController", beacuse this view is inside the "Account"-folder.

The source code of the "Login" action method:

        public ActionResult Login(string username, string password, bool? rememberMe)
        {

            ViewData["Title"] = "Login";

            // Non-POST requests should just display the Login form
            if (Request.HttpMethod != "POST")
            {
                return View();
            }

            // Basic parameter validation
            List<string> errors = new List<string>();

            if (String.IsNullOrEmpty(username))
            {
                errors.Add("You must specify a username.");
            }
...
        }

The form values are automatically mapped to the method parameters. This mapping could be modified. Stephen Walther wrote a nice blogpost about this. And there is a great screencast how the binding in ASP.NET MVC works on Dimecasts.net.

Many helpers are overloaded and take strongly typed data – just try it out

"Best Practices", tips and information

The MVC framework is currently a beta version, that´s why you need to search at different blogs or websites to learn more about the framework. Here are my recommendations:

• Stephen Walthers Blog
• Rob Conerys MVC Storefront
• Scott Hanselman
• Scott Guthrie
• ASP.NET MVC Seite
• ASP.NET MVC Forum
• ASP.NET MVC Videos
• DotNetKicks – MVC

Feedback

Feel free to comment this blogpost (and my english )

A while ago I blogged about some ASP.NET MVC stuff, but why should I (and you) care about ASP.NET MVC?
ASP.NET MVC is a great and extensible framework for building web applications and is a alternative to the ASP.NET WebForms model.

Tell me more about "MVC"! 
MVC stands for "Model-View-Controller", which is a very old (but still very useful) design pattern. This design pattern will split your application in 3 different parts ("model", "view", "controller"). "Seperation of concern" is one of it´s main benefits.

Short description of these parts:

• "Model": Represents your application data/model and has no(!) business logic
• "View": Just display the given viewdata (this could be a normal HTML page or JSON/RSS data)
• "Controller": The controller represents the business logic and create the view data and send it to a view.

A good example of an MVC application is the web browser.

What is so "bad" about ASP.NET WebForms?
ASP.NET WebForms include many abstractions for the web development. If you are a WinForms developer, you will feel comfortable with it, but if you started with PHP/JSP or just pure HTML and Javascript you will feel very uncomfortable.
The "viewstate" is one feature to hide the stateless nature of HTML, but it can make your web application very slow and makes you crazy. The "WebForms" model include a very complex lifecycle and it´s  important to understand this to work with ASP.NET WebForms.
In my opinion it is too complex and the framework should embrace the nature of HTTP and don´t hide it.

Disclaimer: If you feel comfortable with WebForms, you have no reason to change to MVC – MVC is only on option.

What are the benefits of ASP.NET MVC
MVC is a very testable framework and you get full control of the rendering process. You can add functionality if you want, because MVC is very extensible and you can create a clean, DRY, testable web application.
Phil Haack (the program manager of ASP.NET MVC) did a great presentation at the PDC.

Things that you´ll maybe missing in MVC
Many ASP.NET controls use the postback-functionality. This function will not work well together with the MVC framework. Phil Haack did also 2 podcasts on HerdingCode and tell some thought about "the control story in MVC":
Part 1
Part 2

If you have questions, please add a comment (and if my english really suck please let me know ). This blogpost should only provide basics – other posts are planned.

The ASP.NET Team (see at Scotts Blog) released the 3. Preview of the MVC Framework:

• Setup MSI Download
• Sourcecode @ Codeplex

This release contains improvments of the April Code Release :

• Control Action Methods & ActionResults, useful for…
• AJAX: JsonResult
• Streaming Data: ContentResult
• Web: HttpRedirect / RedirectToAction/Route
• HTML Helper
• URL Routing & Mapping (this dll is part of the .NET 3.5 SP1 and can be used in WebForms and MVC)

Unfortunatly there are no  Sub-Controllers, a nicer AJAX integration, Authentication / Authorization (a nicer integration), Components – these features will be released in Preview 4 (or 5 )

For more information look at Scotts post…

Today I found a very good ASP.NET MVC resource list on  Craig Shoemakers Blog. The post is also available as podcast.

PS:  Even my Pagination User Control is in this list (and in the podcast) \o/