MVC Source Code to debug MVC Projects using Visual Studio 11 Beta

In this video we will see how to use MVC source code to debug MVC project, in this video we will show you how to remove the references of the MVC dll files from the project and add the reference to the MVC source code projects. This will enable us to debug our MVC project and see under the hood of the execution

Reference for this article come from the innovated Steve Sandrson, thanks Steve for your wonderful help

 

 

To download Visual Studio and TFS 11 Beta click on the following link
http://www.microsoft.com/visualstudio/11/en-us/downloads

Unobtrusive JavaScript and Ajax in MVC 3

In the previous release of the ASP.NET MVC which is (MVC 2) I didn’t like the Ajax usage, like Ajax action link and Ajax begin form and I make a rule for the previous project for all my team memebers, that it is prohibited to use any of them, Why??

Because they generate inline JavaScript which is the same way as the web form does, this one of the reason that makes me hit the web form approach.

So why I use them isnted of I can makes a clean JQuery code to follow JavaScript Unobtrusive JavaScript which means that we should keep our JavaScript code separated in. js file, as the CSS it must be separated from the html, the JavaScript also must be separated from html

But in MVC 3 I surprised that all Ajax action not generate inline scripts and use JQuery and custom html attributes, we just reference unobtrusive-ajax.js file and of course the JQuery library, which I can consider it (unobtrusive) as a JQuery plugin, so now I really consider using Ajax helper method in  my next proejct

• See Ajax Begin Form in MVC 2

<form onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event),
{ insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: '#myDiv' });"
onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
method="post" action="/Home/Save">

<input type="text" name="Name">
    <input type="submit" value="Save">

</form>

• See the Ajax Begin from in MVC 3

<form method="post" id="form0" data-ajax-update="#myDiv" data-ajax-mode="after" data-ajax-method="POST" data-ajax="true" action="/Home/Save">

<input type="text" name="Name">
<input type="submit" value="Save">

</form>

This really show us how Microsoft not only imporove the MVC itself  but also how they try to follow and lead the web community again as before

Thanks Microsoft Keep Improving

Solve the MVC 3 Shortcut conflict with MVC 2 on Visual Studio 2010

When we install MVC 3 on Visual Studio 2010, the shortcut for MVC 3 didn’t work and this because all shortcut are associated with MVC 2, we can solve this issue by many ways,

We can open–>Tool–>Option–>Enviroment–>Keyboard

Start search for the following items, and we will found each one has 2 items, so we will associate shortcut to the item that didn’t has:

• ProjectandSolutionContextMenus.Project.Add.Controller Ctrl+M, Ctrl+C
• ProjectandSolutionContextMenus.Project.Add.Area     Ctrl+M, Ctrl+A
• EditorContextMenus.CodeWindow.AddView     Ctrl+M, Ctrl+V
• OtherContextMenus.ASPXcontext.GoToController    Ctrl+M, Ctrl+G
• Project.AddClass     SHIFT+ALT+C

We can also make another solution by removing MVC 2 Tool from Add Remove Program but this will make any existing MVC 2 application not be able to work, if you remove it by mistake you can install this tool again from VS2010 DVD, the tool name is VS2010ToolsMVC2.msi and can be fond  under WCU\ASPNETMVC

Configure IIS on Win 2008 R2 to work with ASP MVC and Web Deploy Video.

In this video I will configure IIS and Web Deployment  on Win 2008 R2 so it can work with ASP MVC application and deployed with Web Deploy by remote administrator

Thanks

MVC 3 Dependency injection with Unity 2.0 Video

I just create a video that explain the new feature of MVC3 IDependencyResolver which make the DI(Dependency Injection) easier with mvc .net, I used the Unity 2.0 DI framework to inject Service A and Service B, in this video I show how to work with Unity in design-time and run-time for different services

I will use Unity Microsoft, with net MVC, as we know Microsft Unity one of the appliction block for dependency injection .net

Thanks for Jan Jonas for his post.

For more information you can visit the following link on MSDN

You can download the project from here (Download)

MVP design pattern for Web application vs. MVC, with Example

I start reading about MVP design pattern in web application and I found it very useful, but I get out of one main important concept, the MVP pattern is very good in web application if we working with ASP.NET Web Forms because it will make the model testable but if we working with MVC it’s already a testable and more and more it can be TDD (Test driven Development) model, of course this not the only reason for MVP or MVC they also enhance the maintainability of the web application and there are many other reasons for using them.

I read many articles about MVP but most of my writing come from dot net miscellany, I create a Web form application that has MVP pattern that can download from the following link download

So let’s start what is the MVP pattern?

MVP

Model View Presenter (MVP) is a software design pattern which essentially isolates the user interface from the business logic through the presenter. MVP is derived from the Model View Controller (MVC) pattern, by Martin Fowler.
The principal behind the MVP pattern is that an implementing application should be split into three core components; Model, View and Presenter:
The main concept of the MVP is that the UI is separated from the business logic and this could have many advantages as we will see

• The Model component encapsulates all the Data in the application. This may be a database transaction or a call to a web service, or any persistence or even volatile data

• The View component is the Presentation layer (User Interface); this may be a standard Win Forms client, an ASP.NET Web Form or Web part or Mobile client. In the MVP pattern, it will handle the rendering and accepting user input only.

• The Presenter is controlling of the application’s actions. For example a sample operation would involve; taking user input from the View, invoking operations on the Model and if needed, setting data in the View to indicate the operations result and so on.

The advantages of MVP pattern are:

• Isolation of User Interface from Business logic
• The ability to change the UI from Web to Window or Mobile is very easy
• Ability to test all code in the solution for all projects (excluding visual presentation and interaction)

We can see here that we can separate the physical class of the MVP in separate assemblies like the following architecture and layer diagram

Layers of MVP

You can download the project as I mention before from the above download link

For more information you can read the following post MSDN

Thanks

Create a localized version of DisplayName attribute for MVC

As most of my followers know I am now working on MVC Enterprise project and when the time come to start refactoring my team code I found that, they didn’t use DsipalyName attribute to read from the resource file (No hard coded string to support multilingual) and when I search why they doing this I found that there is no one, so I decide to create an extension method that support this feature, of curse I search on the internet and I found a solution included in a new feature in MVC (MVC Futures release. see this article) but it needs some configuration and I don’t want any new modification to my project until I completely convert it to MVC 3.0 RTM soon. so here my custom method to create a localized version of  DsipalyName attribute.

So first I will create a class that override DisplayName

using System;
using System.ComponentModel;
using System.Reflection;
using System.Resources;

namespace Radwan
{
 public class DisplayNameLocalizedAttribute : DisplayNameAttribute
 {

 private readonly string resourceFileName;
 private readonly string resourceKey;
 private readonly Type type;

 public DisplayNameLocalizedAttribute(Type type, string resourceKey)
 {
 this.type = type;
 this.resourceKey = resourceKey;
 }

 public override string DisplayName
 {
 get
 {
 return
 new ResourceManager(this.type.FullName, Assembly.GetExecutingAssembly()).GetString(this.resourceKey);
 }
 }

 }

}

so now I can call the new version like the following

public class Employee: IEmployee
 {

 public int Id { get; set; }

 [DisplayNameLocalized(typeof(ResourceFileName), "Name")]
 public string Name{ get; set; }

 }

That’s it

How to include minify files or custom files with web pagckage or MS Deploy package?

Wow it was a large title any way, I suppose now to sit and finishing my proposal of my Mcs and if the Dr read this article she will tell me, What the hell you are doing?? you should finish your proposal but I couldn’t prevent my self from writing this post because it’s very important article to me any way.

If you read most of my articles you will know that I am working on an MVC project and I am using TFS2010 and I automate the whole building process including deployment of database and Test database for Data driven test, running test, deploy database to QA machine and finally create the deploy package and deploy the website to the IIS of the QA machine.

I have some issues, I just doing some workarounds until solve it at a proper time, so now the time come for one of the most important issues which is the minify files didn’t included in the MS deploy package so the deployment of the website didn’t deploy this files

I read a wonderful article to sayed.hashimi, you always impressed me Sayed!!

But it needs a little tweaking to work with minify fiels and I found a question on StackOverFlow which is “  How can we include the files created by ajaxmin in the msdeploy package created by MSBuild ” so I decide to post an article describe my tweaking to solve this issue.

First you can download the whole project which successfully include the minify file in the MS Deploy package from here Download

First you need to create include for each folder in your application that has minify files and this will has source and destination folder so you make sure you didn’t copy the minify file in every script folder in your application as the following

SolSolution file that show the scripts in your project

You need to follow the image or just download the project as mention before

MVCProject file.csproj

You can also see the text version here

<!-- ======== Minify files ========= -->
 <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
 <Target Name="AfterBuild">
 <ItemGroup>
 <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
 </ItemGroup>
 <ItemGroup>
 <CSS Include="**\*.css" Exclude="**\*.min.css" />
 </ItemGroup>
 <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
 </Target>

<!-- ====== Package the minify fiels ===== -->

 <PropertyGroup>
 <CopyAllFilesToSingleFolderForPackageDependsOn>
 CustomCollectFiles;
 $(CopyAllFilesToSingleFolderForPackageDependsOn);
 </CopyAllFilesToSingleFolderForPackageDependsOn>
 </PropertyGroup>
 <Target Name="CustomCollectFiles">
 <ItemGroup>
<!-- =====Root folder ==== -->
 <_CustomFilesForRootFolder Include="MyScript\*.min.js">
 <DestinationRelativePath>%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
 </_CustomFilesForRootFolder>
 <FilesForPackagingFromProject Include="%(_CustomFilesForRootFolder.Identity)">
 <DestinationRelativePath>MyScript\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
 </FilesForPackagingFromProject>

<!-- ======sub folder ==== -->
 <_CustomFilesForSubFolder1 Include="MyScript\Login\*.min.js">
 <DestinationRelativePath>%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
 </_CustomFilesForSubFolder1>
 <FilesForPackagingFromProject Include="%(_CustomFilesForSubFolder1.Identity)">
 <DestinationRelativePath>MyScript\Login\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
 </FilesForPackagingFromProject>

<!-- === another sub folder ==== -->
 <_CustomFilesForSubFolder2 Include="MyScript\Registration\*.min.js">
 <DestinationRelativePath>%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
 </_CustomFilesForSubFolder2>
 <FilesForPackagingFromProject Include="%(_CustomFilesForSubFolder2.Identity)">
 <DestinationRelativePath>MyScript\Registration\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
 </FilesForPackagingFromProject>

 </ItemGroup>
 </Target>

That’s it

Code coverage with Team build and MVC or any web application

• I just need to create a code coverage and display it with the team build but I face a problem when I follow the normal steps, so my question was why the code coverage doesn’t appear with the team build? but there is no answer after little investigation here the result.
• Fist the visual studio premium or Ultimate edition must be installed on the building machine so code coverage can viewed and calculated.

The MVC or the website needs additional test configuration and may normal configuration cause an error because I face the following error

Test Run Error. Cannot initialize the ASP.NET project ‘WebUIController’.
Exception was thrown: The web site could not be configured correctly; getting ASP.NET process information failed. Requesting ‘http://localhost:3352/VSEnterpriseHelper.axd’ returned an error: The remote server returned an error: (500) Internal Server Error.

You can check here a bug that closed because it can’t reproduced on Microsoft for this error

Microsoft Connect, click to see the bug

• So I read many articles but the most important one as the following,  it’s very good but it’s not cover all my cases

http://blogs.blackmarble.co.uk/blogs/rfennell/archive/2009/04/15/team-build-code-coverage-and-mvc.aspx

So let’s start

• First you will see that you have 2 test configuration files by default (you can add more config file  if you want) when you create new test project in any solution so you can use one of them as a local configuration and the other with the team build if you want,  so every configuration has different values, remember the way that selecting the testing configuration is different, it depends on  the place you will build your solution on,  for example if you build your solution on your machine then you will select the desire test configuration from Visual  Studio menu Test–>Select Active test

• But if you build your solution on building machine using Team build so you will select this configuration from the build definition parameters window, when you create or edit build definition

Test Configuration in the solution

• Open the test configuration you want let’s say its TraceAndTestImpact.testsettings, just double click on it and select code coverage and select the dll you want but remember don’t select the web, you will configure it manually, and here is the tricky sometimes it’s OK and sometimes it give me the previous error in the Microsoft connect, any way don’t select it, save the file and close it.

Select code coverage

• Open the file again but this time with open with as XML and start adding new line to point to the Web dll as the class library but remember you have to set the absolute path because it’s different on the source folder in the build machine,so you just need to go there and find where the path to the dll on the server machine and put there.

Test Configuration in XMl

• Build your application on the build machine,  now you should see the code coverage for the class libraries and the MVC or the Web Application.

Using Microsoft Ajax Minifier with team build

2 weeks ago I had a problem with Microsoft Ajax Minifier on Team Build 2010 because my file doesn’t’ minify, and I post 3 posts title ” Why Microsoft Ajax Minifier dosen’t minfi the file when used with team build 2010? ” in ASP.NET, MSDN forum and Stackoverflow but with no result, the post has many views on both ASP.NET and MSDN forum but with no answer except very kind person “Sid Forcier” that try to help me but also with no result.

Part of the log file as the following

===================================================================
Using “AjaxMin” task from assembly “C:\Program Files\MSBuild\Microsoft\MicrosoftAjax\ajaxmintask.dll”.
Task “AjaxMin”
Done executing task “AjaxMin”.
Done building target “AfterBuild” in project “MVCWithAjax.csproj”.
===================================================================
And after hard investigation I found the solution, the problem was that when I set the build definition I make the drop folder inside the D:\ drive  and the Team build copy the source code to the C:\build\…., so the AjaxMin can’t find any CSS or js in the whole D:\ drive, only dlls.

And because the AjaxMin use search criteria to find the files and if it didn’t find just doesn’t do anything so it doesn’t give me any error in the log file as you can see, so all I had to do just change the path to the CSS and JS to my source folder on the Team Build server as the following

Using AjaxMinifier

Remember how to use the partial path, its very important to know how to include a file and what is the wild card that you can use to refer to the path you want, here you can find good link to the MSDN that describe this point, click-here