ASP.NET MVC4 – Incorporating Web Designer’s HTML Pages

Architectureasp.net-mvc-4design

We are embarking on a new project which will be using the ASP .NET MVC4 platform.

I have been informed that the design is being outsourced to a custom design firm and they will be supplying us with HTML pages and stylesheets.

How easy will it be to incorporate these css stylesheets and HTMl pages in our application?
Do I need to ask for something more than HTML pages?

My personal experience is limited to one site that was built for an in-house and I used the HTMLHelper to generate Views. Another past experience I have from long-ago is using Classic ASP and that was a breeze since I could literally mash up ASP and HTML together.

My question is, what is this a good approach to incorporating HTML and stylesheets from a web designer into an ASP.NET MVC4 web application?

Best Answer

Converting/incorporating a static HTML website in to ASP.NET MVC is very easy, and relatively hassle free. The situation you describe is one that occurred frequently at my last job. You won't need to ask for anything more than the static HTML site; HTML, JS, CSS and images are fine to start from.

You mentioned using classic ASP and HTML together in one file. ASP.NET MVC has something very similar to this with with the templating engine: Razor. Briefly, it gives you full access to the C# language (and I believe VB) inside pages which would otherwise be just HTML. Using this inside our (.cs)HTML pages is the main way in which we convert static HTML. It should be noted that Razor is not the only templating engine we can use with ASP.NET MVC.

In terms of work flow when doing this, we would:

  1. Start by identifying a set of overarching layouts for all pages (eg some pages might have a left-aligned menu whilst others might have no menu at all). We would then strip out all of the markup which differed between pages of the same layout (typically this is the real content of the page) and use the resulting markup as a template page.

  2. Place all of the separated markup from each file in to an appropriate view file, and set the appropriate layout files, to create the individual pages of the site.

  3. Examine the views we created in step 2 to find common elements - such as a tables, menus and forms. These common elements could then be extracted in to partial views, and the markup in the pages replaced with a call to the partial view.

  4. Once layout pages have been created and common elements extracted to partial views, begin incorporating your business logic by strongly typing your views and partials.

After step 4, the processes are the same as creating an ASP.NET MVC site without the base of static HTML.

Related Topic