Sunday, October 23, 2011

ASP.Net MVC Client Validation For Dynamically Added Form

This is how I have implemented the client side validation with MVC3 client side validation with JQuery validation plugin. The requirement was to create a model dialog with a form which is loaded via an Ajax request to the server.

  1. Enable client validation in web.config
We need to enable client side validation in web.config application settings section like thism


 
 <appSettings>
          <add key="ClientValidationEnabled" value="true"/>
        <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
 </appSettings>
    


    2 The form
 In your form you need to have a FormContext otherwise it will not generate validation attributes.  If the FormContext is null we need to create a new FormContext  like this in your view.
 
@{using (Html.BeginForm("Create", "Person", FormMethod.Post)
  {
      if (this.ViewContext.FormContext == null)
      {
          this.ViewContext.FormContext = new FormContext();
      }
    // .....
  }


    3 Phrase validation attributes 
 Then after the ajax request we need to phrase validation attributes using JQuery like this,<br />
 
$.get("@Url.Action("Create", "Person")", null, function (data) {
         $('#yourDivId').html(data);
         $("form").removeData("validator");
         $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");          
   });

Saturday, October 22, 2011

Creating Categorized/Grouped Autocomplete Menu with JQuery

JQuery has given you a nice extendable library to create auto complete. But what if you want to customize it to have something like Facebook search autocomplete menu.  Here I have gathered several features of JQuery to make this customization. Here is my JQuery with ASP.net MVC3 but you can use whatever the backend which you can return a array of Json objects like this,
Here is my Search action in SearchController








And here is my JQuery code,



Monday, September 19, 2011

Convert MSTest code covarage results in to XML And view through Jenkins

If you are using Jenkins as your CI for a Net project it is not easy to publish code coverage results.In Jenkins without tools such as NCover wich is costly. Instead of this you can do this your own way.
First you need to convert MSTest results in to XML and then to HTML using xstl to publish it as an HTML report in Jenkins.
Step 1

GO to your test local.settings file in visual studio and set it to display the code coverage results an add your required targeted dll's. This is same as configuring visual studio to show the test results and code coverage.
Make sure you have added the test settings file to your version controlling system then it will be in the working space of the jenkins.
Then set path to the MSTest.exe
it may be in your \Microsoft Visual Studio 10.0\Common7\IDE folder


Step 2
Add a windows batch command to run MSTest (after running ms build) and to generate test results file (“reults.trx”) and Coverage report (“data.coverage”)

del results.trx
mstest /testcontainer:Example\TestProject1\bin\debug\TestProject1.dll /resultsfile:results.trx /testsettings:Example\local.testsettings


This will generate a code coverage result in binary format (data.coverage)

Step 3
write a console app to convert binary data.coverage file in to a XML and then it to HTML by xslt and run it after adding windows batch command in jenkins. Here is the example code for console app. Make sure you have add reference to Microsoft.VisualStudio.Coverage.Analysis.dll which you can find in the \Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies folder. And copy Microsoft.VisualStudio.Coverage.Symbols.dll to your bin directory which is also in same folder.



And here is the code of the style.xslt file