MVC - Rendering View Elements in a Specified Order

In my current project, I had to render elements in the view based on a setting provided by the model(basically it is a configurable thing). Few clients need view element to be rendered in a particular order and few others in a different way. What we did was, saved this elements order in a settings file which could be changed based on the clients. Then created an extension to render this based on the order.

This is what was I was trying to explain. for Client 1 the Login section to be displayed first followed by Password reminder section

Client 1 requirement

For Client 2 , these sections needs be ordered differently

Client 2 requirement

In order to achieve this, I came up with an HtmlHelper extension

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/// <summary>
/// Renders the render items in the provided sequence order.
/// </summary>
/// <param name="htmlHelper">The HTML helper which is extended.</param>
/// <param name="sequenceOrder">The order in which items to be rendered. Sequence starts at an index of 0.</param>
/// <param name="renderItems">The items to be rendered in order.</param>
/// <remarks>
/// Values in the sequence order should match with the total number of render items.
/// Invalid sequnce numbers are ignored.
/// </remarks>
public static void OrderBy(this HtmlHelper htmlHelper, int[] sequenceOrder, params Action<HtmlHelper>[] renderItems)
{
if (sequenceOrder != null && renderItems != null)
{
foreach (var sequnce in sequenceOrder)
{
// CHeck whether the sequence is with inthe bounds
if (sequnce < renderItems.Length && sequnce >= 0)
{
renderItems[sequnce].Invoke(htmlHelper);
}
}
}
else if (renderItems != null)
{
// If the sequence order is not provided, render it in normal order in which items are declared.
foreach (var renderItem in renderItems)
{
renderItem.Invoke(htmlHelper);
}
}
else
{
// Do Nothing
}
}

In the view, you could do

1
2
3
4
5
6
7
<% Html.OrderBy(this.Model.LoginDisplayOrder, (html) => { %>
<div class="container"></div>
<% Html.RenderPartial("LoginSection", this.Model); %>
<% }, (html) => { %>
<div class="container"></div>
<% Html.RenderPartial("ReminderPassword", this.Model); %>
<% }); %>

Here Model.LoginDisplayOrder is just an array of integers in which the items to be rendered.

Hope this will help.

Create a Live Aquarium Wallpaper in Android

Final Result 1
Final Result 2

Few weeks ago I started learning Android programming, so this article is an outcome of that out-side office study :). Here I will be explaining – how to create a live wallpaper which looks like an aquarium with fishes swimming across the screen. The fish animation is done using sprite technique.

Fish sprite used here is from a code project article

Lets get started…

Creating a new Android project in eclipse (I am not familiar with any other IDEs for Android development :) ). Now create a class for your live wallpaper service, I called it as AquariumWallpaperService, then instantiate the AquariumWallpaperEngine which is responsible for creating the actual Aquarium class which does all the rendering logic. It also controls the flow of Aquarium based Surface callbacks Below is the code for AquariumWallpaperService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
public class AquariumWallpaperService extends WallpaperService {
@Override
public Engine onCreateEngine() {
return new AquariumWallpaperEngine();
}
class AquariumWallpaperEngine extends Engine{
private Aquarium _aquarium;
public AquariumWallpaperEngine() {
this._aquarium = new Aquarium();
this._aquarium.initialize(getBaseContext(), getSurfaceHolder());
}
@Override
public void onVisibilityChanged(boolean visible) {
if(visible){
this._aquarium.render();
}
}
@Override
public void onSurfaceChanged(SurfaceHolder holder, int format,
int width, int height) {
super.onSurfaceChanged(holder, format, width, height);
}
@Override
public void onSurfaceCreated(SurfaceHolder holder) {
super.onSurfaceCreated(holder);
this._aquarium.start();
}
@Override
public void onSurfaceDestroyed(SurfaceHolder holder) {
super.onSurfaceDestroyed(holder);
this._aquarium.stop();
}
}
}

Aquarium class wraps all the rendering logic, as well as creating the fishes. This also starts a thread which is responsible for updating the view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
public class Aquarium {
private AquariumThread _aquariumThread;
private SurfaceHolder _surfaceHolder;
private ArrayList<Renderable> _fishes;
private Bitmap _backgroundImage;
private Context _context;
public void render(){
Canvas canvas = null;
try{
canvas = this._surfaceHolder.lockCanvas(null);
synchronized (this._surfaceHolder) {
this.onDraw(canvas);
}
}finally{
if(canvas != null){
this._surfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
protected void onDraw(Canvas canvas) {
this.renderBackGround(canvas);
for (Renderable renderable : this._fishes) {
renderable.render(canvas);
}
};
public void start(){
this._aquariumThread.switchOn();
}
public void stop(){
boolean retry = true;
this._aquariumThread.switchOff();
while (retry) {
try {
this._aquariumThread.join();
retry = false;
} catch (InterruptedException e) {
// we will try it again and again...
}
}
}
public int getLeft() {
return 0;
}
public int getRight() {
return this._backgroundImage.getWidth();
}
public void initialize(Context context, SurfaceHolder surfaceHolder) {
this._aquariumThread = new AquariumThread(this);
this._surfaceHolder = surfaceHolder;
this._fishes = new ArrayList<Renderable>();
this._context = context;
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPurgeable = true;
this._backgroundImage = BitmapFactory.decodeResource(context.getResources(), com.plugai.android.livewallpapers.R.drawable.aquarium, options);
this.addFishes();
}
private void addFishes() {
Point startPoint = new Point(100, 100);
this._fishes.add(new ClownFish(this._context, this, startPoint, 90));
Point startPoint1 = new Point(100, 300);
this._fishes.add(new ClownFish(this._context, this, startPoint1, 50));
Point startPoint2 = new Point(200, 200);
this._fishes.add(new ClownFish(this._context, this, startPoint2, 15));
}
private void renderBackGround(Canvas canvas)
{
canvas.drawBitmap(this._backgroundImage, 0, 0, null);
}
}

Here is the code for AquariumThread class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class AquariumThread extends Thread {
private Aquarium _aquarium;
private boolean _running;
public AquariumThread(Aquarium aquarium) {
this._aquarium = aquarium;
}
public void switchOn(){
this._running = true;
this.start();
}
public void pause(){
this._running = false;
synchronized(this){
this.notify();
}
}
public void switchOff(){
this._running = false;
synchronized(this){
this.notify();
}
}
@Override
public void run() {
while(this._running){
this._aquarium.render();
}
}
}

All the renderable object in the aquarium must implement an interface Renderable, which has got one single method called render(…)

1
2
3
4
5
6
7
package com.plugai.android.livewallpapers;
import android.graphics.Canvas;
public interface Renderable {
void render(Canvas canvas);
}

This interface helps to render an object other than a fish, like plants etc… in future. I have created another abstract class which has common functionalities like changing the position and direction of a fish after a particular interval and called it as AquaticAnimal, this is because I could create specific fishes which just differ by it’s look by extending from this class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
public abstract class AquaticAnimal implements Renderable {
private static int MAX_SPEED = 100;
private Context _context;
private Aquarium _aquarium;
private FishSprite _leftSprite;
private FishSprite _rightSprite;
private int _direction = -1;
private int _speedFraction;
private long _previousTime;
public AquaticAnimal(Context context, Aquarium aquarium){
this._context = context;
this._aquarium = aquarium;
}
protected void initialize(Bitmap leftBitmap, Bitmap rightBitmap, int fps, int totalFrames, Point startPoint, int speed){
this._leftSprite = new FishSprite(leftBitmap, fps, totalFrames, startPoint);
this._rightSprite = new FishSprite(rightBitmap, fps, totalFrames, startPoint);
this._speedFraction = (MAX_SPEED / speed) * 10;
}
private FishSprite getSprite(){
if(this._direction < 0){
return this._leftSprite;
}
return this._rightSprite;
}
public int getDirection(){
FishSprite sprite = this.getSprite();
int xPos = sprite.getXPos();
if(this._direction < 0){
xPos += sprite.getWidth();
}
if(xPos < this._aquarium.getLeft()){
this._direction = 1;
}else if(xPos > this._aquarium.getRight()){
this._direction = -1;
}else{
// Do nothing
}
return this._direction;
}
public Context getContext(){
return this._context;
}
public Aquarium getAquarium(){
return this._aquarium;
}
@Override
public void render(Canvas canvas){
long currentTime = System.currentTimeMillis();
this.getSprite().render(canvas, currentTime);
this.swim(currentTime);
}
public void swim(long currentTime){
long diff = currentTime - this._previousTime;
if(diff > this._speedFraction){
int currentX = this.getSprite().getXPos();
this.getSprite().setXPos(currentX + this.getDirection());
this._previousTime = currentTime;
}
}
}

The sprite animation is moved into a specific class FishSprite

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
public class FishSprite {
/**
* Private fields
*/
private Bitmap _currentSpriteBitmap;
private Rect _drawRect;
private int _fps;
private int _noOfFrames;
private int _currentFrame;
private long _timer;
private int _spriteWidth;
private int _spriteHeight;
private Point _position;
public FishSprite(Bitmap spriteBitmap, int fps, int frameCount, Point startPoint) {
this.initialize();
this._position = startPoint;
this._currentSpriteBitmap = spriteBitmap;
this._spriteHeight = spriteBitmap.getHeight();
this._spriteWidth = spriteBitmap.getWidth() / frameCount;
this._drawRect = new Rect(0,0, this._spriteWidth, this._spriteHeight);
this._fps = 1000 / fps;
this._noOfFrames = frameCount;
}
private void initialize() {
this._drawRect = new Rect(0,0,0,0);
this._timer = 0;
this._currentFrame = 0;
}
private void Update(long currentTime) {
if(currentTime > this._timer + this._fps ) {
this._timer = currentTime;
this._currentFrame +=1;
if(this._currentFrame >= this._noOfFrames) {
this._currentFrame = 0;
}
}
this._drawRect.left = this._currentFrame * this._spriteWidth;
this._drawRect.right = this._drawRect.left + this._spriteWidth;
}
public void render(Canvas canvas, long currentTime) {
this.Update(currentTime);
Rect dest = new Rect(getXPos(), getYPos(), getXPos() + this._spriteWidth,
getYPos() + this._spriteHeight);
canvas.drawBitmap(this._currentSpriteBitmap, this._drawRect, dest, null);
}
public Point getPosition() {
return _position;
}
public void setPosition(Point position) {
this._position = position;
}
public int getYPos() {
return this._position.y;
}
public int getXPos() {
return this._position.x;
}
public void setYPos(int y) {
this._position.y = y;
}
public void setXPos(int x) {
this._position.x = x;
}
public int getWidth(){
return this._spriteWidth;
}
public int getHeight(){
return this._spriteHeight;
}
}

Now to the final bit, that is creating a fish. you might have noticed that I have created an object of ClownFishin the Aquarium class. ClownFish is just a derived class from AquaticAnimal, with a specific sprite image. So if you have sprite images for a shark, you could simple extend a new class for a shark with that image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class ClownFish extends AquaticAnimal {
private static final int TOTAL_FRAMES_IN_SPRITE = 20;
private static final int CLOWN_FISH_FPS = 20;
public ClownFish(Context context, Aquarium aquarium, Point startPoint, int speed){
super(context, aquarium);
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPurgeable = true;
Bitmap leftBitmap = BitmapFactory.decodeResource(getContext().getResources(), com.plugai.android.livewallpapers.R.drawable.left, options);
BitmapFactory.Options options1 = new BitmapFactory.Options();
options1.inPurgeable = true;
Bitmap rightBitmap = BitmapFactory.decodeResource(getContext().getResources(), com.plugai.android.livewallpapers.R.drawable.right, options1);
this.initialize(leftBitmap, rightBitmap, CLOWN_FISH_FPS, TOTAL_FRAMES_IN_SPRITE, startPoint, speed);
}
public void render(Canvas canvas){
super.render(canvas);
}
}

Please feel free to go through the code, If I haven’t explained clearly. Hope this article helped some way or other.

Happy new year!!!

Full source code is available here

It’s Better to Automate, Instead of Checklists

In my day to day activities I have seen many checklists like

  1. Code review checklist
  2. Source control check-in checklist
  3. Developer checklist

All these are good because it helps to reduce failures but does everyone follow these all the time?. Sometimes I (or any developer) forgot to go through the checklist due to many reasons like time constraints, lack of concentration etc… and I don’t think we should blame anyone for missing this because - We all are humans and we tends to forget.

Only way we could reduce these mistakes is to automate!!! wherever possible. In my current project, all the aspx page should have direction(dir) attribute in the html tag as part of the localization work. As usual an email with checklist for localizing an aspx page was sent to all the developers, out of that one item was to include dir attribute whenever they add new aspx file.

Everybody followed this in the initial stages but later we started forgetting about this requirement, which caused extra hours of effort to fix it in all the pages.

It could have been avoided if we had a automated process which verifies this. In order to automate, one way is to write a custom MSBuild task which could verify whether a aspx file has dir attribute, if it doesn’t fails build (this whole idea came from http://blogs.msdn.com/b/simonince/archive/2009/07/10/enforcing-unobtrusive-javascript.aspx). If you want to learn about writing a custom MSBuild task, I suggest http://msdn.microsoft.com/en-us/library/t9883dzc.aspx.

So here is the code which creates this custom MS Build task

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
using System.Linq;
using HtmlAgilityPack;
using Microsoft.Build.Framework;
using Microsoft.Build.Utilities;
namespace StaticFileAnalysisTask
{
/// <summary>
/// Custom MSBuild task which analyse the HTML code validation.
/// </summary>
public class HTMLCodingStandard : Task
{
#region Private fields
/// <summary>
/// Variable that holds the status of this task execution.
/// </summary>
private bool _success;
#endregion
#region Public properties
/// <summary>
/// Gets or sets the source file list.
/// </summary>
/// <value>The source file list.</value>
[Required]
public ITaskItem[] SourceFiles { get; set; }
/// <summary>
/// Gets or sets the list of files to be excluded.
/// </summary>
/// <value>The excluded files.</value>
public ITaskItem[] ExcludeFiles { get; set; }
#endregion
/// <summary>
/// Executes this task.
/// </summary>
/// <returns><c>true</c> if task executed successfully; Otherwise, <c>false</c>.</returns>
public override bool Execute()
{
this._success = true;
foreach (ITaskItem current in SourceFiles)
{
// If the items is in the exluded list, then skip
if(this.IsInExlcudedList(current))
{
continue;
}
string path = current.ItemSpec;
if (path.EndsWith(".aspx"))
{
this.ValidateFile(path);
}
}
return this._success;
}
/// <summary>
/// Method that is responsible for validating the file.
/// </summary>
/// <param name="path">The full path to the file.</param>
private void ValidateFile(string path)
{
HtmlDocument htmlDocument = new HtmlDocument();
htmlDocument.Load(path);
HtmlNode node = htmlDocument.DocumentNode.SelectSingleNode("//html");
if(node != null)
{
if(!node.Attributes.Contains("dir"))
{
this.BuildEngine.LogErrorEvent(new BuildErrorEventArgs(
"Invalid HTML coding standard",
"SFAT-HTML-1",
path,
node.Line,
node.LinePosition,
node.LinePosition,
node.LinePosition + node.OuterHtml.Length,
"SFAT-HTML-1: Direction(dir) tag is missing",
null,
"HTMLCodingStandardTask"
));
this._success = false;
}
}
}
/// <summary>
/// Determines whether an item is in the excluded list.
/// </summary>
/// <param name="taskItem">The task item which needs to checked.</param>
/// <returns>
/// <c>true</c> if item is in exlcuded list; otherwise, <c>false</c>.
/// </returns>
private bool IsInExlcudedList(ITaskItem taskItem)
{
if(this.ExcludeFiles == null)
{
return false;
}
return this.ExcludeFiles.Any(x => x.ItemSpec == taskItem.ItemSpec);
}
}
}

For including this in the your web project, open the project file in a text editor and add the below lines

1
2
3
4
5
6
7
8
9
10
11
<UsingTask AssemblyFile="..\output\StaticFileAnalysisTask.dll" TaskName="HTMLCodingStandard" />
<Target Name="BeforeBuild">
<HTMLCodingStandard SourceFiles="@(Content)" />
</Target> If you want to exclude any files from this verification process, then define an ItemGroup
<ItemGroup>
<ExcludedContents Include="WebForm2.aspx" />
</ItemGroup> and add that to the build action like below
<UsingTask AssemblyFile="..\output\StaticFileAnalysisTask.dll" TaskName="HTMLCodingStandard" />
<Target Name="BeforeBuild">
<HTMLCodingStandard SourceFiles="@(Content)" ExcludeFiles="@(ExcludedContents)" />
</Target>

Hope this helps you.

Download code sample from here

User Experience Makes Applications Stand-out

What makes your application different from others? I strongly feel the user experience that you provides plays an important role to be successful. Some of us might have felt that(at least myself), you woke up one day with a brand new idea but later you realize that somebody had implemented that an year back. Which is a frustrated feeling, I have been to that situation so many times. So even if that idea exists already, how to make that idea a successful one.

Stand-out

Say if you are going to enter in to a world where there are n number of similar applications, how will you attract the users? A great example may be GMail, IMHO they entered to the party when Yahoo and Microsoft where ruling email market. But now GMail is much popular than other email service providers. One reason I could think of for this success is the experience that you get as a user.

Not sure whether anybody has noted this or not but today when was about to send an email to my friend, I got a message box saying Did you mean to attach files?

Screenshot

Yes, GMail reminded me to attach the file. I was surprised to see this, GMail has intelligently scanned what I have typed in the email message and gave me suggestion before sending…. WOW!!!!!. I checked whether Yahoo mail has got this feature, not yet. That makes GMail stand-out from others.

Asp.Net MVC - Fluent Html Helper for FlexiGrid

There are so many free JQuery Grid plugins out there, in that I liked FlexiGrid just because of it’s look and style. In order to use it in your MVC application you may have to put the Javascript code into your view, which requires the property names of your model in order to generates the Grid columns as well the search options etc… as everybody knows when you deal with hard coded string as the property names in any code, it is error prone.

In order to avoid this problem I thought of creating a html extension which is tightly coupled with your data that is going to bound to the Grid. Which helps the developer from writing any javascript codes.

Full source code can found in this Git repo mvc-fluent-jquery-plugin-controls

JQueryUI Datepicker in ASP.Net MVC

Datepicker is nice and cool plugin for displaying the calendar with ease. It is very easy to use JQuery plugin, it comes as part of JQueryUI library, so if you want to use this – first download JQueryUI from http://jqueryui.com/download and also download JQuery(http://jquery.com/download/) if you haven’t done yet.

Assume you have a form like one below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% using(Html.BeginForm()){%>
<fieldset>
<legend>Event Information</legend>
<p>
<label for="EventName">Event Name:</label>
<%= Html.TextBox("EventName")%>
</p>
<p>
<label for="StartDate">Start Date:</label>
<%= Html.TextBox("StartDate")%>
</p>
<p>
<label for="EndDate">End Date:</label>
<%= Html.TextBox("EndDate")%>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% }%>

and you want to attach datepicker to StartDate and EndDate input fields, what you needs to do is call the datepicker function on the these input field selector like below.

1
2
3
4
$(document).ready(function() {
$('#StartDate').datepicker();
$('#EndDate').datepicker();
});

This works fine as we expected :)

###Difference in Date format patterns

Consider a scenario where your MVC application supports localization, then the selected date displayed in the input fields also should display the in the same date format of the current culture(This format could be custom one or default one).

This leads to you another issue – Datepicker plugin given by the JQueryUI supports different date formats, but it is different from one that is available in .NET. For e.g. in order to display a long day name (“Thursday”) .NET uses dddd* its equivalent in Datepicker is DD.

In order to solve this disparity between the .NET world and Datepicker world, I have created a html helper function, which could generate the Datepicker format from a .Net date format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/// <summary>
/// JQuery UI DatePicker helper.
/// </summary>
public static class JQueryUIDatePickerHelper
{
/// <summary>
/// Converts the .net supported date format current culture format into JQuery Datepicker format.
/// </summary>
/// <param name="html">HtmlHelper object.</param>
/// <returns>Format string that supported in JQuery Datepicker.</returns>
public static string ConvertDateFormat(this HtmlHelper html)
{
return ConvertDateFormat(html, Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern);
}
/// <summary>
/// Converts the .net supported date format current culture format into JQuery Datepicker format.
/// </summary>
/// <param name="html">HtmlHelper object.</param>
/// <param name="format">Date format supported by .NET.</param>
/// <returns>Format string that supported in JQuery Datepicker.</returns>
public static string ConvertDateFormat(this HtmlHelper html, string format)
{
/*
* Date used in this comment : 5th - Nov - 2009 (Thursday)
*
* .NET JQueryUI Output Comment
* --------------------------------------------------------------
* d d 5 day of month(No leading zero)
* dd dd 05 day of month(two digit)
* ddd D Thu day short name
* dddd DD Thursday day long name
* M m 11 month of year(No leading zero)
* MM mm 11 month of year(two digit)
* MMM M Nov month name short
* MMMM MM November month name long.
* yy y 09 Year(two digit)
* yyyy yy 2009 Year(four digit) *
*/
string currentFormat = format;
// Convert the date
currentFormat = currentFormat.Replace("dddd", "DD");
currentFormat = currentFormat.Replace("ddd", "D");
// Convert month
if (currentFormat.Contains("MMMM"))
{
currentFormat = currentFormat.Replace("MMMM", "MM");
}
else if (currentFormat.Contains("MMM"))
{
currentFormat = currentFormat.Replace("MMM", "M");
}
else if (currentFormat.Contains("MM"))
{
currentFormat = currentFormat.Replace("MM", "mm");
}
else
{
currentFormat = currentFormat.Replace("M", "m");
}
// Convert year
currentFormat = currentFormat.Contains("yyyy") ? currentFormat.Replace("yyyy", "yy") : currentFormat.Replace("yy", "y");
return currentFormat;
}
}

So how we could make use this helper method, just replace the datepicker initialization code we have written earlier with this

1
2
3
4
$(document).ready(function() {
$('#StartDate').datepicker({ dateFormat: '<%= Html.ConvertDateFormat() %>' });
$('#EndDate').datepicker({ dateFormat: '<%= Html.ConvertDateFormat() %>' });
});

Hope this helps.

Logging Execution Time Using AOP

What happens if your client complains that your application is running very slow!!! or in your load/stress testing you found that some functionalities are very slow in executing than expected. This is the time where you go for profiling the execution, to analyse the root cause of these issues.

So how we could develop a profiler, where we don’t have to wrap our normal code in a profiling code.

Before going to create the profiler, we have to decide where to put the profiled information. In this tutorial, I am making use of Log4Net as underlying layer to store this information. If you have not used Log4Net before, I suggest you to read http://www.beefycode.com/post/Log4Net-Tutorial-pt-1-Getting-Started.aspx as a starting point.

With the help of AOP (Aspect-Oriented Programming) we could do the profiling task without interrupting the actual code.

AOP is a programming paradigm in which secondary or supporting functions are isolated from the main program’s business logic

Wikipedia

So in order bring the AOP functionality into this application, I am going to use a third party library PostSharp which I believe this is one of the best that is available in the market.

So, now we have got the basic things to start with and now let’s start coding….

Start a new solution in visual studio and add a new console application project to it. Then add the below references to the newly created project

Add reference to the Log4Net.dll, PostSharp.Laos.dll and PostSharp.Public.dll (Please read https://www.postsharp.net/documentation to get the basic installation procedure). Next, create a new attribute class called ProfileMethodAttribute – this class is responsible for doing the profiling work. Make sure that you have decorated this class with Serializable attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
[Serializable]
public class ProfileMethodAttribute : OnMethodBoundaryAspect
{
public override void OnEntry(MethodExecutionEventArgs eventArgs)
{
........
}
public override void OnExit(MethodExecutionEventArgs eventArgs)
{
......
}
}

This class actually derives from OnMethodBoundaryAspect, it has got two methods OnEntry and OnExit which we needed. These method will be called before the start of a method execution and at the end of method execution respectively, when this attribute is decorated against a method.

When a call comes to OnEntry method, we will first log the execution call using the LoggerHelper, then start a clock using another helper class Profiler

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
public class LoggerHelper
{
/// <summary>
/// Static instance of ILogger.
/// </summary>
private static ILog logger;
/// <summary>
/// Initializes static members of the <see cref="LoggerHelper"/> class.
/// </summary>
static LoggerHelper()
{
log4net.Config.XmlConfigurator.Configure();
logger = LogManager.GetLogger(typeof(Program));
}
/// <summary>
/// Logs the specified message.
/// </summary>
/// <param name="message">The message.</param>
public static void Log(string message)
{
string enableProfiling = ConfigurationManager.AppSettings["EnableProfiling"];
if (string.IsNullOrEmpty(enableProfiling) || enableProfiling.ToLowerInvariant() == "true")
{
logger.Debug(message);
}
}
/// <summary>
/// Logs the specified method name.
/// </summary>
/// <param name="methodName">Name of the method.</param>
/// <param name="url">The URL to log.</param>
/// <param name="executionFlowMessage">The execution flow message.</param>
/// <param name="actualMessage">The actual message.</param>
public static void Log(string methodName, string url, string executionFlowMessage, string actualMessage)
{
Log(ConstructLog(methodName, url, executionFlowMessage, actualMessage));
}
/// <summary>
/// Logs the specified method name.
/// </summary>
/// <param name="methodName">Name of the method.</param>
/// <param name="url">The URL to log.</param>
/// <param name="executionFlowMessage">The execution flow message.</param>
/// <param name="actualMessage">The actual message.</param>
/// <param name="executionTime">The execution time.</param>
public static void Log(string methodName, string url, string executionFlowMessage, string actualMessage, int executionTime)
{
Log(ConstructLog(methodName, url, executionFlowMessage, actualMessage, executionTime));
}
/// <summary>
/// Constructs the log.
/// </summary>
/// <param name="methodName">Name of the method.</param>
/// <param name="url">The URL to be logged.</param>
/// <param name="executionFlowMessage">The execution flow message.</param>
/// <param name="actualMessage">The actual message.</param>
/// <returns>Formatted string.</returns>
private static string ConstructLog(string methodName, string url, string executionFlowMessage, string actualMessage)
{
var sb = new StringBuilder();
if (!string.IsNullOrEmpty(methodName))
{
sb.AppendFormat("MethodName : {0}, ", methodName);
}
if (!string.IsNullOrEmpty(url))
{
sb.AppendFormat("Url : {0}, ", url);
}
if (!string.IsNullOrEmpty(executionFlowMessage))
{
sb.AppendFormat("ExecutionFlowMessage : {0}, ", executionFlowMessage);
}
if (!string.IsNullOrEmpty(actualMessage))
{
sb.AppendFormat("ActualMessage : {0}, ", actualMessage);
}
string message = sb.ToString();
message = message.Remove(message.Length - 2);
return message;
}
/// <summary>
/// Constructs the log.
/// </summary>
/// <param name="methodName">Name of the method.</param>
/// <param name="url">The URL to be logged.</param>
/// <param name="executionFlowMessage">The execution flow message.</param>
/// <param name="actualMessage">The actual message.</param>
/// <param name="executionTime">The execution time.</param>
/// <returns>Formatted string.</returns>
private static string ConstructLog(string methodName, string url, string executionFlowMessage, string actualMessage, int executionTime)
{
var sb = new StringBuilder();
sb.Append(ConstructLog(methodName, url, executionFlowMessage, actualMessage));
sb.AppendFormat(", ExecutionTime : {0}", executionTime);
return sb.ToString();
}
}

LoggerHelper uses the Log4Net objects to log the message to configured location. Profiler class implemented like below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/// <summary>
/// Helper class that wraps the timer based functionalities.
/// </summary>
internal static class Profiler
{
/// <summary>
/// Lock object.
/// </summary>
private static readonly object SyncLock = new object();
/// <summary>
/// Variable that tracks the time.
/// </summary>
private static readonly Dictionary<int, Stack<long>> ProfilePool;
/// <summary>
/// Initializes static members of the <see cref="Profiler"/> class.
/// </summary>
static Profiler()
{
ProfilePool = new Dictionary<int, Stack<long>>();
}
/// <summary>
/// Starts this timer.
/// </summary>
public static void Start()
{
lock (SyncLock)
{
int currentThreadId = Thread.CurrentThread.ManagedThreadId;
if (ProfilePool.ContainsKey(currentThreadId))
{
ProfilePool[currentThreadId].Push( Environment.TickCount );
}
else
{
var timerStack = new Stack<long>();
timerStack.Push(DateTime.UtcNow.Ticks);
ProfilePool.Add(currentThreadId, timerStack);
}
}
}
/// <summary>
/// Stops timer and calculate the execution time.
/// </summary>
/// <returns>Execution time in milli seconds</returns>
public static int Stop()
{
lock (SyncLock)
{
long currentTicks = DateTime.UtcNow.Ticks;
int currentThreadId = Thread.CurrentThread.ManagedThreadId;
if (ProfilePool.ContainsKey(currentThreadId))
{
long ticks = ProfilePool[currentThreadId].Pop();
if (ProfilePool[currentThreadId].Count == 0)
{
ProfilePool.Remove(currentThreadId);
}
var timeSpan = new TimeSpan(currentTicks - ticks);
return (int)timeSpan.TotalMilliseconds;
}
}
return 0;
}
}

which stores the starting tick and calculate the time taken to execute when Stop is called.

Below is code snippet from OnEntry method

1
2
3
4
5
6
7
8
public override void OnEntry(MethodExecutionEventArgs eventArgs)
{
this._methodName = this.ExcludeMethodName ? string.Empty : eventArgs.Method.Name;
this._url = this.IncludeUrl ? string.Empty : (HttpContext.Current == null) ? string.Empty : HttpContext.Current.Request.Url.ToString();
LoggerHelper.Log(this._methodName, this._url, this.EntryMessage, this.Message);
Profiler.Start();
}

And OnExist, is almost similar expect there we will stop the profile timer.

1
2
3
4
5
public override void OnExit(MethodExecutionEventArgs eventArgs)
{
int count = Profiler.Stop();
LoggerHelper.Log(this._methodName, this._url, this.EntryMessage, this.Message, count);
}

Next step is to use this and see whether it is logged properly. In order enable profiling for a method, you just needs to decorate it with the ProfileMethod attribute. Like below

1
2
3
4
5
[ProfileMethod()]
public void SimpleMethod()
{
Thread.Sleep(5000);
}

Then if you run the application and calls this above method, a log entry will be created where you have configured which looks like below

PROFILING 2010-02-26 00:19:59,838 [1] Log MethodName : SimpleMethod
PROFILING 2010-02-26 00:20:04,865 [1] Log MethodName : SimpleMethod, ExecutionTime : 5002

Please least me know, if this helped you.

Download the demo code from here

ASP.Net MVC – Conditional Rndering Partial Views with Action<T> Delegate

This is an update to my previous post regarding conditional rendering partial views, in that I used the internal implementation of the Html.RenderPartail(…) method to create the Html extension. Later I found a simple way to achieve the same using Action<T> delegate

<% Html.PartialIf(this.Model.Exists, html => html.RenderPartial("MyPartialView")); %>

If you look at the PartialIf implementation, it is simple, cleaner than the previous technique I have mentioned in my post.

1
2
3
4
5
6
7
public static void PartialIf(this HtmlHelper htmlHelper, bool condition, Action<HtmlHelper> action)
{
if (condition)
{
action.Invoke(htmlHelper);
}
}

That’s it :)

ASP.Net MVC - Conditional Rendering Partial Views

Update: Later I found a cleaner and simple approach to do the same – read this post ASP.Net MVC – Conditional rendering Partial Views with Action delegate

Following my previous post about Conditional Rendering, one of my colleague asked me how to render the partial view based on a condition.

Normal way of doing this is

1
2
3
4
<% if(this.Model.Exists)
{
Html.RenderPartial("MyPartialView");
} %>

I am not sure about any other technique for rendering partial view conditionally other than this (correct me if I am wrong :) ).

Then I thought about copying the pattern I have used in my previous post and came up with this code which could conditionally render partial views and you could use the Html extension like below, which more clean than the previous

<% Html.PartialIf(this.Model.Exists, "MyPartialView"); %>

Below is the Html extension I have created

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
public static void PartialIf(this HtmlHelper htmlHelper, bool condition, string viewName)
{
if (condition)
{
RenderPartialInternal(
htmlHelper.ViewContext,
htmlHelper.ViewDataContainer,
viewName,
htmlHelper.ViewData,
null,
ViewEngines.Engines);
}
}
public static void PartialIf(this HtmlHelper htmlHelper, bool condition, string viewName, ViewDataDictionary viewData)
{
if (condition)
{
RenderPartialInternal(
htmlHelper.ViewContext,
htmlHelper.ViewDataContainer,
viewName,
viewData,
null,
ViewEngines.Engines);
}
}
public static void PartialIf(this HtmlHelper htmlHelper, bool condition, string viewName, object model)
{
if (condition)
{
RenderPartialInternal(
htmlHelper.ViewContext,
htmlHelper.ViewDataContainer,
viewName,
htmlHelper.ViewData,
model,
ViewEngines.Engines);
}
}
public static void PartialIf(this HtmlHelper htmlHelper, bool condition, string viewName, object model, ViewDataDictionary viewData)
{
if (condition)
{
RenderPartialInternal(
htmlHelper.ViewContext,
htmlHelper.ViewDataContainer,
viewName,
viewData,
model,
ViewEngines.Engines);
}
}

And here is the helper method I have used in the about extension ( most of the code snippet is taken from the MVC method Html.Renderpartial(…), thanks to open source )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
internal static IView FindPartialView(ViewContext viewContext, string partialViewName, ViewEngineCollection viewEngineCollection)
{
var result = viewEngineCollection.FindPartialView(viewContext, partialViewName);
if (result != null)
{
if (result.View != null)
{
return result.View;
}
}
throw new InvalidOperationException("Partial view not found");
}
internal static void RenderPartialInternal(ViewContext viewContext, IViewDataContainer viewDataContainer, string partialViewName, ViewDataDictionary viewData, object model, ViewEngineCollection viewEngineCollection)
{
if (String.IsNullOrEmpty(partialViewName))
{
throw new ArgumentException("PartialViewName can't be empty or null.");
}
ViewDataDictionary newViewData = null;
if (model == null)
{
newViewData = viewData == null ? new ViewDataDictionary(viewDataContainer.ViewData) : new ViewDataDictionary(viewData);
}
else
{
newViewData = viewData == null ? new ViewDataDictionary(model) : new ViewDataDictionary(viewData) { Model = model };
}
var newViewContext = new ViewContext(viewContext, viewContext.View, newViewData, viewContext.TempData);
var view = FindPartialView(newViewContext, partialViewName, viewEngineCollection);
view.Render(newViewContext, viewContext.HttpContext.Response.Output);
}

Hope this helps

ASP.Net MVC - Conditional Rendering

We come across situations like rendering elements based on the conditions in Model. For example, in the view if we want to show a TextBox if some property is true. A normal way of doing this is like below

1
2
3
<% if (this.Model.Exists) { %>
<%= Html.TextBox("Test") %>
<% } %>

This looks like old classic asp style, and when it comes to code maintenance this will be a pain. So a clean way is to use an Html helper to generate this

<%= Html.If(this.Model.Exists, action => action.TextBox("Name")) %>

which looks cleaner than the old one. Source code for this helper method is

1
2
3
4
5
6
7
8
9
public static string If(this HtmlHelper htmlHelper, bool condition, Func<HtmlHelper, string> action)
{
if (condition)
{
return action.Invoke(htmlHelper);
}
return string.Empty;
}

What about IfElse condition, we could write another helper method for that

1
2
3
4
5
6
7
8
9
public static string IfElse(this HtmlHelper htmlHelper, bool condition, Func<HtmlHelper, string> trueAction, Func<HtmlHelper, string> falseAction)
{
if (condition)
{
return trueAction.Invoke(htmlHelper);
}
return falseAction.Invoke(htmlHelper);
}

Ok, now we got a conditionally rendered element, sometimes we may have to put a wrapper around this element. So I have written another Html helper method which will help you to put any html element around a particular element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public static string HtmlTag(this HtmlHelper htmlHelper, HtmlTextWriterTag tag, object htmlAttributes, Func<HtmlHelper, string> action)
{
var attributes = new RouteValueDictionary(htmlAttributes);
using (var sw = new StringWriter())
{
using (var htmlWriter = new HtmlTextWriter(sw))
{
// Add attributes
foreach (var attribute in attributes)
{
htmlWriter.AddAttribute(attribute.Key, attribute.Value != null ? attribute.Value.ToString() : string.Empty);
}
htmlWriter.RenderBeginTag(tag);
htmlWriter.Write(action.Invoke(htmlHelper));
htmlWriter.RenderEndTag();
}
return sw.ToString();
}
return string.Empty;
}

An overloaded version which doesn’t accept HtmlAttributes as parameter

1
2
3
4
public static string HtmlTag(this HtmlHelper htmlHelper, HtmlTextWriterTag tag, Func<HtmlHelper, string> action)
{
return HtmlTag(htmlHelper, tag, null, action);
}

Below are some examples of using these helpers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%= Html.HtmlTag(HtmlTextWriterTag.Div, action => action.ActionLink("Without attributes","About") ) %>
<%= Html.HtmlTag(HtmlTextWriterTag.Div, new { name = "wrapper", @class = "styleclass" }, action => action.ActionLink("With Attributes", "About")) %>
<%= Html.HtmlTag(HtmlTextWriterTag.Div, null, action => action.ActionLink("Null attributes", "About")) %>
<%= Html.IfElse(this.Model.Exists, trueAction => trueAction.Encode("Sample"), falseAction => falseAction.TextBox("SampleName")) %>
<%--
Nesting
<div>
<span>
<a href="/Home/About">About</a>
</span>
</div>
--%>
<%= Html.If(this.Model.Exists,
div => div.HtmlTag(HtmlTextWriterTag.Div,
span => span.HtmlTag(HtmlTextWriterTag.Span,
anchor => anchor.ActionLink("About", "About"))
)) %>

Hope this will help you.