Monthly Archives: March 2012

Juice UI library – Jquery UI controls as server side Asp.Net WebForm controls

Since Asp.net MVC has been launched and the way Microsoft is promoting MVC, every web form developer have this doubt whether webforms will survive. In Microsoft Tech Ed 2012 held in Bangalore  recently Microsoft denied all the rumors and showcased lot of improvements in Asp.Net 4.5 which are available in MVC by default. like Model Binding and UnObtrusive validation and lot more. Coming to the point now 🙂

There are lot of groups who are working on web forms improvements and JuiceUI is one of those groups.

Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease.

Before i start further i would mention that JuiceUI library supports only .Net framework 4.0 onward.

It provides all jquery UI controls like DatePicker, Dialog,Accordion, tabs etc as a server side control. Webform developers can treat these controls like just another asp.net control. Pretty easy to implement and easy to setup (NuGet can make your job even easier). All you need to do is.

  • Create a Asp.net(4.0+) web application. (Do not create Empty web application for now.)
  • Right click on Project -> Manage Nuget Packages
  • Search for JuiceUI and click on install.
  • It will install all the javascript  related to Juice UI and theme files in Script and Content Folder.
  • It will also include JuiceUi.dll under bin directory which will provide ui controls.

It will also add an entry to web.config like below.

<pages>
 <controls>
 <add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
 </controls>
</pages>
  • Then we need to include ScriptManager tag in the page (or master page itself)
  • Now we are ready to use the Juice control in your web page simply by the below code.
 <asp:TextBox runat="server" ID="datesample"></asp:TextBox>
 <juice:Datepicker runat="server" TargetControlID="datesample" />

Please note that there is no need to refer those jquery js or css files in your page. All that is taken care by JuiceUI dll which is included in bin folder.
To explore all the controls available please visit the official site of Juice UI
Note: There is lot of development going on yet so if you find any issues please report it to Juice UI GitHub Repository .
I am really excited to see how far Juice UI goes and enriches Asp.Net webforms with interactive Jquery UI controls.
Hope it helps!

Advertisements

Unit testing using Visual Studio 2010 — WHY and HOW

As a developer, we have been asked about Unit testing during interviews. Typical answer is “yeah! i know how to write a unit test case but did not get a chance to implement it.”  what cliche! 🙂 .

Why Unit testing is important :  Apart from SDLC and following the best practices (from my experience nobody cares for unit test cases unless it is a established product). I still found one of the reasons why we may HAVE to perform unit testing for every application in future. Cloud Hosting is making news all around the world and looking at it’s cost benefits companies are trying their best to adopt it asap. With remote hosting comes lot of rules imposed by the vendor who is hosting your application and Unit testing is one of them. for example SFDC (sales force dot com) applications need at least 70% unit testing coverage of before they agree to host it on cloud.  So it’s about time we need to take unit testing seriously.

Good news for visual studio developers is that It’s really easy to implement unit testing in VS2010.  No plugins required for a test project.

Class Library : to unit test. I have a C# class library project. which has only one class  ProductRepository.cs. I am using entity framework to access database (makes life easy. right? :)).

</pre>
public class ProductRepository
 {
 public ProductRepository()
 {
 }
 private readonly static NorthwindEntities _db = new NorthwindEntities();

public static List<Product> GetAll()
 {
 return _db.Products.ToList();
 }

public static Product GetById(int productId)
 {
 return _db.Products.Where(p => p.ProductID == productId).SingleOrDefault();
 }
 }
<pre>

it has only two methods GetAll() and GetById(). You can change the implementation the way you need.

HOW to create a Unit Test using VS 2010: 

  1. Go to any class in library project. say ProductRepository class here.
  2. Go to any method name and Right Click and Select Create Unit Tests.

3.  It opens a wizard. It shows library with all types and its methods listed.  You can select types and methods you want to write unit test cases for.

4.  Select Output project. It can be an existing Test project or Select –> “Create a new C# Test project”

5.  It creates all the test methods for selected methods in library earlier in the wizard.

6.  Check out the Test method created for TestGetAll(). it prefixes “Test”  to all the method names.


[TestMethod()]
 public void GetAllTest()
 {
 List<Product> expected = null;

// change it here and make a db call to populate expected object with the same data source.

//something like below using entity framework.

// expected = _dbContext.Products.ToList();

 List<Product> actual;
 // call library method
 actual = ProductRepository.GetAll();
 Assert.AreEqual(expected, actual);
 Assert.Inconclusive("Verify the correctness of this test method.");
 }

7.  Note that Test project does not copy the .config  settings. Though it will reference the main project so database access layer classes are still available in test methods. Connection strings need to be added manually in test project .config.

8.   Look at a better implementation of TestGetAll () method below.


[TestMethod()]
 public void GetAllTest()
 {
 var _db = new NorthwindEntities(); // declared in class library
 List<Product> expected = null;
 expected = _db.Products.ToList();

 var actual = ProductRepository.GetAll();
 Assert.AreEqual(expected.Count , actual.Count );

// comparing each item in collection

IEnumerator<Product> p1 = expected.GetEnumerator();
 IEnumerator<Product> p2 = actual.GetEnumerator();

while (p1.MoveNext() && p2.MoveNext())
 {
 Assert.AreEqual(p1.Current.ProductID, p2.Current.ProductID);
 Assert.AreEqual(p1.Current.ProductName, p2.Current.ProductName);
 Assert.AreEqual(p1.Current.SupplierID, p2.Current.SupplierID);
 Assert.AreEqual(p1.Current.UnitPrice, p2.Current.UnitPrice);
 }
 }

Above code can be changed as per our needs. If you just want to validate the count of collection or each element.

How to Run Unit Test Cases: 

You will notice that under Solution Items there is a new file created YourClassLibraryProjectName.vsmdi . It will list out all the test methods. you can select the ones you want to run or Run all. Every time you make any changes in Test methods don’t forget to Refresh the .vsmdi file in Test editor.

Just Hit Run Test in Current context and check the results (Passed or Failed) in Test Results window. you should see something like the below.

It may look like coding twice for every method 🙂 but you got to do what you got to do. right?

I will go deeper in my next article “Unit Testing beyond Assert statements”. 

I hope it is useful!