Archive | March 2010

ExtJs Grid Dynamic Columns

I had to use ExtJs grid in my recent MVC project. The grid and all other controls are really good, both functionality and usability wise but I stuck into the problem when I needed to make the grid columns dynamic. Most of the examples I found on forums and online tutorials were about using it with fix definition of columns. After searching forums and blogs on Internet, I was able to fix the issue but I realized that there is no thorough tutorial or help to address this issue for ASP.Net MVC. In this blog, I will be giving a complete end to end solution to use dynamic grid columns from ASP.Net. It can be further improved and make more dynamic but it will fulfill most of the requirements.

First of all, I found this ExtJs extension method on ExtJs forums. I didn’t save the link otherwise I would have added the link to that post here. This script needs to be just saved in .js file and referenced from the code. It will take care of most of the heavy lifting on the client side.
Although most of the code is same as I copied it from the forums but I modified the “DynamicColumnModel” function to add my own code for handling the “Column” metadata sent from server. I have commented those line in the code so it can be modified if JSon result returning from server is not in the same format as mine.

//*****************************************
//ExtJS method for dynamic columns
//*****************************************
Ext.data.DynamicJsonReader = function(config)
{
    Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};

Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
    getRecordType: function(data)
    {
        var i = 0, arr = [];
        for (var name in data[0]) { arr[i++] = name; } // is there a built-in to do this?

        this.recordType = Ext.data.Record.create(arr);
        return this.recordType;
    },

    readRecords: function(o)
    { // this is just the same as base class, with call to getRecordType injected
        this.jsonData = o;
        var s = this.meta;
        var sid = s.id;

        var totalRecords = 0;
        if (s.totalProperty)
        {
            var v = parseInt(eval("o." + s.totalProperty), 10);
            if (!isNaN(v))
            {
                totalRecords = v;
            }
        }
        var root = s.root ? eval("o." + s.root) : o;

        var recordType = this.getRecordType(root);
        var fields = recordType.prototype.fields;

        var records = [];
        for (var i = 0; i < root.length; i++)
        {
            var n = root[i];
            var values = {};
            var id = (n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);
            for (var j = 0, jlen = fields.length; j < jlen; j++)
            {
                var f = fields.items[j];
                var map = f.mapping || f.name;
                var v = n[map] !== undefined ? n[map] : f.defaultValue;
                v = f.convert(v);
                values[f.name] = v;
            }
            var record = new recordType(values, id);
            record.json = n;
            records[records.length] = record;
        }
        return {
            records: records,
            totalRecords: totalRecords || records.length,
            totalProperty: 'totalRecords'
        };
    }
});

Ext.grid.DynamicColumnModel = function(store)
{
    var cols = [];
    var recordType = store.recordType;
    var fields = recordType.prototype.fields;

    //for dynamic columns we need to return the columnInfo from server so we can build the columns here.
    //in this example, the ResultData is a JSON object, returned from the server which contains a ColumnInfo
    //object with "fields" collection. Each Field in Fields Collection holds the information column
    //we are using the "renderer" here as well to show one important feature of displaying the MVC JSon Date
    $.each(store.reader.jsonData.ResultData.columnInfo.fields, function(index, metaValue)
    {
        cols[index] = { header: metaValue.header, dataIndex: metaValue.dataIndex, width: metaValue.width,
            sortable: metaValue.sortable, hidden: metaValue.hidden,
            renderer: function(dtData) { if (metaValue.renderer) { return eval(metaValue.renderer + "('" + dtData + "')"); } else return dtData; }
        };
    });

    Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});
//*****************************************
//End of dynamic columns
//*****************************************

One of the issues which I had faced when using the ExtJs Grid with ASP.Net MVC was the date format of Json serializer. It was returning the date as a special value of “/Date(xxxxx)” format and it needed to be converted before displaying it on the Grid. This is where the “renderer” property of columns comes into play. I had passed the name of the renderer from ASP.net code so there are no long list of checks in the javascript code. It will just call the “eval” and execute whatever server render method is specified. In case of dates, I am using the following javascript code to parse and convert the date into short date time format.

//this method is used to convert the MS JSON date format to the ExtJS Grid Date Column Value
function dateFormatter(dt)
{
    /// <summary>this method is used to convert the MS JSON date format to the ExtJS Grid Date Column Value</summary>
    /// <param name="dt">Actual JSON Date Value</param>
    try
    {
        //microsoft JSON date format needs to convert into Javascript date
        var newdata = dt.replace(/\/Date\((-?[0-9]+)([+-][0-9]+)?\)\//g, "new Date($1)");
        newdata = eval('(' + newdata + ')');
        return newdata.format('m/d/Y');
    }
    catch (e)
    {
        return dt;
    }
}

Enough of ExtJs Code :). Now let’s look at some server side code which will help us build the dynamic columns and the meta data for ExtJs. First thing which I needed was to convert the datatable into an object which can be serialized by Json. If you try to serialize a datatable with ASP Json serializer then it will through the “circular reference” error so this utility method will take the datatable and convert it into a list which can be easily serialized.

/// <summary>
/// Normalizes the datatable into simple collection of row objects, that later on can be used to create the JSON object.
/// </summary>
/// <remarks>
/// whenever we need to return the datatable from view as a JSON object, then we need to first convert that datatable into a collection of rows so that it can be properly serialized.
/// </remarks>
/// <param name="dt">Source datatable that will be used to create the rows collection.</param>
/// <returns></returns>
protected List<Dictionary<string, object>> GetNormalizedRows( DataTable dt )
{
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Array.ForEach(
        dt.Select(),
        row =>
        {
            Dictionary<string, object> Dictionary = new Dictionary<string, object>();
            foreach ( DataColumn col in dt.Columns )
                Dictionary.Add( col.ColumnName, row[col] );
            rows.Add( Dictionary );
        }
    );
    return rows;
}

Once we have the helper method ready to convert our datatable, we can write a “Controller” action, which will be called from the UI to access the data for the grid.

/// <summary>
/// This method will execute the SQL Query to create the Search results.
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult GetData( string anyServerData )
{
        //Execute the query and return the data.
        Datatable resultTable = <get your data from server>;

        //datatables can't be serialized as JSON object, so we need to normalize them and also we need to pass the column meta
        //data information to only show specific grid columns.
        return JSon( new ResultData {
	 new
        {
            GridData = GetNormalizedRows( resultTable ),
            columnInfo = GetColumnMetaData( resultTable )
        } } 
	);
}

That method was really simple and if you have been following it then there was another helper method used in it to get the column meta data, “GetColumnMetaData”. This method will simply loop through the table, create the meta data objects for the ExtJs. It will set the required fields which we need in ExtJs to create the columns.

/// <summary>
/// Extracts the column meta data for ExtJS grid. 
/// </summary>
/// <param name="searchResult"></param>
/// <returns></returns>
private Dictionary<string, object> GetColumnMetaData( DataTable searchResult )
{
    Dictionary<string, object> metaData = new Dictionary<string, object>();
    List<Dictionary<string, object>> colMeta = new List<Dictionary<string, object>>();
    Dictionary<string, object> colDefinition = new Dictionary<string, object>();

    //loop through each datatable column. Get the column name type and other meta specific information and store them in this specific 
    //format so that it can be used by the ExtJS grid on client side.
    foreach ( DataColumn col in searchResult.Columns )
    {
        colDefinition = new Dictionary<string, object>();
        colDefinition.Add( "header", col.ColumnName );
        colDefinition.Add( "dataIndex", col.ColumnName );
        colDefinition.Add( "width", 100 );
        colDefinition.Add( "sortable", true );
        colDefinition.Add( "hidden", false );

	//for datetime columns, we need to render them specially as the date returned from MVC Json is not in format to display to the user
        if ( col.DataType == typeof( DateTime ) )
            colDefinition.Add( "renderer", "dateFormatter" );

        colMeta.Add( colDefinition );
    }

    metaData.Add( "fields", colMeta );
    metaData.Add( "root", "ResultData" );
    metaData.Add( "totalProperty", "results" );
    metaData.Add( "id", "id" );

    return metaData;
}

Finally, to make these all pieces to work, we need to make an AJAX call from client to this Controller action. Any button or link on client can be used to attach a click event handler and in that event handler, we can create the ExtJs store and grid.

//attach a function to the click of HTML Element
$("#btnGetData").click(LoadGridData);

//This will make an AJAX call to the server, passing all the form data and get the result of the search.
function LoadGridData(e)
{
    /// <summary>This will make an AJAX call to the server, passing all the form data and get the result of the search.</summary>
    /// <param name="e">Event object for the clicked Element.</param>

    e.preventDefault();

    //show the AJAX loader... the code is in my previous posts. it is not required so it can be removed if not needed
    objUIHelper.ShowAJAXLoader(true);

    //create the data store to load the data from AJAX web call
    jstore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({ url: 'MyController/GetData', method: 'POST' }),
        reader: new Ext.data.DynamicJsonReader({ root: 'ResultData.GridData' }),
        remoteSort: false
    });

    //in case of any AJAX call exception, hide the uiBlocker and show the error message	
    jstore.on('loadexception', function(event, options, response, error)
    {
        //unblock the UI, another helper method to remove the ajax loader
        objUIHelper.HideAJAXLoader();
        
        //show the server error... 
        alert( response.responseText );
    });

    //we need to set the extra params here so it can be used on the grid refresh click
    jstore.on('beforeload', function()
    {
        jstore.baseParams = {
            anyServerData: $("#myHTMLForm").serialize()
        };
    });

    //after the data load in store, create the grid and display the data
    jstore.on('load', function(gridStore)
    {
        //remove any exisitng items from grid div. Grid div is a placeholder to show the extJsGrid
        $("#grid").empty();

        // Reset the Store's recordType
        gridStore.recordType = gridStore.reader.recordType;
        gridStore.fields = gridStore.recordType.prototype.fields;

        //create the paging toolbar
        var bar = new Ext.PagingToolbar({
            store: gridStore,
            pageSize: resultPageSize,
            displayInfo: true,
            displayMsg: 'Displaying record {0} - {1} of {2}',
            emptyMsg: 'No rows to show'
        });

        // Create the grid and bind it with the data store.
        grid = new Ext.grid.GridPanel({
            store: gridStore,
            cm: new Ext.grid.DynamicColumnModel(gridStore),
            selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
            enableColLock: true,
            renderTo: 'grid',
            width: 940,
            autoHeight: true,
            title: 'Results',
            bbar: bar,
            pageSize: resultPageSize
        });

        // render the grid on UI
        grid.render();

        //unblock the UI
        objUIHelper.HideAJAXLoader();
    });

    //store's load will call the web URL and load the data
    jstore.load({
        params: {
            start: 0,
            limit: resultPageSize
        }
    });
}
Advertisements

MVC Action Authroization

One good option to apply the action level authorization is to subclass the “AuthorizeAttribute” and in the “AuthorizeCore” method, check for user authorization. If we are using the “Form” authentication then simply we can return “false” and it will redirect the user to the Login Form. In case of windows authentication and running on IIS, it will just keep displaying the Windows Login dialog to the user, so it is better to redirect the user to an Error View for windows Authentication.

[AttributeUsage(AttributeTargets.Method, AllowMultiple=false)]
public class AuthorizeAction : AuthorizeAttribute
{
    private int currAction;

    public AuthorizeAction( int currAction )
    {
        this.currAction = currAction;
    }

    protected override bool AuthorizeCore( HttpContextBase httpContext )
    {
        //check "currAction" against custom database user authroization and set the allowed variable
	bool allowed = true;

	//if user is not authanticated then return the error
        if ( !httpContext.User.Identity.IsAuthenticated )
            allowed = false;

        if ( ! allowed )
        {
            //if it's an AJAX call then simply return the error to the client and show error dialog there
            if ( !string.IsNullOrEmpty( httpContext.Request.Headers["X-Requested-With"] ) && httpContext.Request.Headers["X-Requested-With"] == "XMLHttpRequest" )
                return false;
            else
            {
                //in case of a normal URL access, redirect to the special error controller/action.
                httpContext.Response.Redirect( "~/Error/UnAuthorized/" );
                return true;
            }
        }
        else
        {
            return true;
        }
    }
}

Generate HTML string for a MVC View

Sometimes you don’t want to render the view on the standard output stream but you need it to return the output HTML of a view for a JSON call. So, instead of adding the ActionResult of that view to the JSON property, we can force the view to return the output as a string and pass that string as one of the JSON property.
Following Code sample can be used to retrieve the HTML string of a given view and pass the model data to it. The controller context is a required parameter and it can easily be retrieved by the controller.ControllerContext property of the caller.

/// <summary>
/// Generates the HTML string represenation, of a target view.
/// </summary>
/// <param name="c">Controller context is required.</param>
/// <param name="viewName">Target view name.</param>
/// <param name="data">Data object for the view.</param>
/// <returns>HTML string output of the actual view.</returns>
protected string ConvertViewToHtmlString( ControllerContext c, string viewName, object data )
{
    if ( data != null )
    {
        //set view data notifications
        ViewData.Model = data;

        StringWriter output = new StringWriter();
        //find the view to general html string
        ViewEngineResult result = ViewEngines.Engines.FindView( c, viewName, "" );
        ViewContext viewContext = new ViewContext( c, result.View, ViewData, TempData, output );

        try
        {
            //render the view to stringWriter, rather than on Response stream
            result.View.Render( viewContext, output );
        }
        finally
        {
            //release the view so that it can be used by other controllers
            result.ViewEngine.ReleaseView( c, result.View );
        }

        //html string for the view
        return output.ToString();
    }
    else
        return "";
}

Centralized AJAX Caller

JQuery provides number of ways to make AJAX calls and creating a centralized helper class to call the server methods and capture the returning success or failure messages, can really help to speed up the development process. In this post, I will walk through a sample code, which can be easily used in any ASP.Net project to make server calls. By no means this is a bullet proof framework, there are many possible enhancements in it but it will provide enough guidance that anyone can use it to start working on their project.

I will be using the JQuery and some of it’s plugins, in this post. JQuery plugins will really help to perform UI tasks, which may not be directly related to AJAX calling but will provide a mechanism for making AJAX calls a better user experience.

One of the plugin is “block.ui”, it will be used to block the UI during the AJAX call, if we want user to wait and show an AJAX Loader. The same plugin has a feature to just show the AJAX loader, without blocking the UI. I will also show some code for JQuey UI tools, which will be really helpful to show the modal message dialogs, for errors or other application messages.

Let’s walk through the code sample.

1.

We need to create a separate class, to handle all the AJAX call. One option is to use the Javascript prototyping. We can then use this class in our asp.net application, to call the MVC controller actions.

In the constructor, we need few variables to control the overall behavior of our AJAX call. Since we want to show an AJAX loader so adding a “delay” timer will make sure that the AJAX loader won’t show up, unless call is taking more time than specific minimum time (e.g. we are using 1 second in the code here and loader won’t show if some call executes within a second).

function AJAX()
{
    var objSelf = this;

    // This struct will cache the current XmlHTTP requests
    // so that we can reference them if a call fails.
    this.currentRequests = {};
    
    //keeping the counter of active ajax calls. It will be used to hide or show the AJAX Loader
    this.activeAjaxCounter = 0;

    //default wait timer
    this.delayShowLoader = 1000;
}

2.
Some setup properties of the AJAX class will be helpful in appearance and data return. “UIHelper” is an example class, which can be created in the project to handle some common UI tasks, for instance, showing the message dialog or the ajax loader etc. “SourceElement” can be quite useful in situations where after the AJAX call succes, we need to make some changes on the control which has initiated the AJAX request.

/// <summary>Set 'true', if View needs to be disabled during AJAX call.</summary>
AJAX.prototype.disableView = true;

/// <summary>UIHelper to use from this AJAX.</summary>
AJAX.prototype.UIHelperRef = null;

/// <summary>Reference to the element, making the AJAX call.</summary>
AJAX.prototype.SourceElement = null;

3.
Creating a helper method inside the AJAX class will make sure that from calling code, we don’t need to provide the “Datatype” and “method” on ever call.

// This handles the JSON request. This checks to see if the current
// request is already being processed and also handles any error
// wiring that is required.
AJAX.prototype.PostJSON = function(requestName, requestURL, requestData, fnCallback)
{
    /// <summary>This function handles the JSON request. It will validate that a request with same name doesn't execute twice and
    /// it also handles any error wiring that is required.</summary>
    /// <param name="requestName">This is optional parameter. If "null" is provided for the value then multiple AJAX calls for the same request won't be blocked.</param>
    /// <param name="requestURL">Target URL for the AJAX call.</param>
    /// <param name="requestData">Required key/value pair data to pass to the target URL.</param>
    /// <param name="fnCallback">Call back function to handle the returned data and errors.</param>

    var objSelf = this;
    objSelf.Execute(requestName, requestURL, requestData, fnCallback, 'json', 'POST');
}

AJAX.prototype.PostHTML = function(requestName, requestURL, requestData, fnCallback)
{
    /// <summary>This function handles the HTML request. It will validate that a request with same name doesn't execute twice and
    /// it also handles any error wiring that is required.</summary>
    /// <param name="requestName">This is optional parameter. If "null" is provided for the value then multiple AJAX calls for the same request won't be blocked.</param>
    /// <param name="requestURL">Target URL for the AJAX call.</param>
    /// <param name="requestData">Required key/value pair data to pass to the target URL.</param>
    /// <param name="fnCallback">Call back function to handle the returned data and errors.</param>

    var objSelf = this;
    objSelf.Execute(requestName, requestURL, requestData, fnCallback, 'html', 'POST');
}

4.
This is the method which will do all the heavy lifting of making AJAX call and showing proper UI behavior. Code is well commented here to make it easy to follow the logic. AJAX loader delay is not 100% functional, as there can be situations where multiple calls can make it crash but in most of the situations it will work effectively.
In case of an AJAX call, we can take the advantage of returned JSON formatted data and create a structure on server to package the data with any server messages. For example, in a JSON post, the server can return an object with properties of “Data”, “Message” (success or new id etc) etc. For HTML ajax calls, we can simply grab the return HTML in callback function and manipulate it.

AJAX.prototype.Execute = function(requestName, requestURL, requestData, fnCallback, callDataType, callMethod)
{
    /// <summary>This method will be called internally by the AJAXHelper class.</summary>
    /// <param name="requestName">This is optional parameter. If "null" is provided for the value then multiple AJAX calls for the same request won't be blocked.</param>
    /// <param name="requestURL">Target URL for the AJAX call.</param>
    /// <param name="requestData">Required key/value pair data to pass to the target URL.</param>
    /// <param name="fnCallback">Call back function to handle the returned data and errors.</param>
    /// <param name="callDataType">Either "json" or "html".</param>
    /// <param name="callMethod">Either "GET" or "POST".</param>

    var objSelf = this;

    // First, we have to check to see if this request is
    // already being processed. We don't want the user to
    // try and fire off multiple requests of the same type.
    // Of course, if the name is NULL, then don't worry.
    if (!requestName || !this.currentRequests[requestName])
    {

        // Store current request.
        objSelf.currentRequests[requestName] = true;

        if (!objSelf.UIHelperRef)
            objSelf.UIHelperRef = new UIHelper();


	//if this is the first call then we need to initiate the AJAX loader. On subsequent call, we can skip this block, because the loader will already be shown for previous call.
        if (objSelf.activeAjaxCounter == 0)
        {
            setTimeout(
                function()
                {
		    //This check will make sure that once the 1 second delay is over, then still there is at least one active call which needs the AJAX loader.
                    if (objSelf.activeAjaxCounter > 0)
                        objSelf.UIHelperRef.ShowAJAXLoader(objSelf.disableView)
                }, objSelf.delayShowLoader);
        }

        //counter increment
        objSelf.activeAjaxCounter++;

        // Make actual AJAX request.
        $.ajax(
		    {
		        // Basic properties.
		        url: requestURL,
		        data: requestData,
		        dataType: callDataType,
		        type: callMethod,

		        // The success call back.
		        success: function(objResponse)
		        {
		            // Remove request flag.
		            objSelf.currentRequests[requestName] = false;

		            // Pass off to success handler.
		            if (callDataType == 'json')
		            {
		                objSelf.AJAXSuccessHandler(objSelf, objResponse, fnCallback);
		            }
		            else
		                fnCallback(objResponse);

		            //counter decrement
		            objSelf.activeAjaxCounter--;

		            //unblock the UI
		            if (objSelf.activeAjaxCounter == 0)
		                objSelf.UIHelperRef.HideAJAXLoader();
		        },

		        // The error handler.
		        error: function(objResponse, textStatus)
		        {
		            // Remove request flag.
		            objSelf.currentRequests[requestName] = false;

		            //counter decrement
		            objSelf.activeAjaxCounter--;

		            //unblock the UI
		            if (objSelf.activeAjaxCounter == 0)
		                objSelf.UIHelperRef.HideAJAXLoader();

		            // Pass off to fail handler.
		            objSelf.AJAXFailHandler(
		                objSelf,
					    objResponse,
					    textStatus,
					    fnCallback
					    );
		        }
		    }
		    );

    } else
    {
        // This request is currently being processed.
        alert("Request being processed. Be patient.");

    }
}

5.
Success handler is pretty simple but in case of an AJAX call failure, we should review the returned server error and display it to the user. We can even redirect to some specific error page if we dont’ want to display the message dialog.

// This will handle all AJAX failures.
AJAX.prototype.AJAXSuccessHandler = function(objAJAXCaller, objResponse, fnCallback)
{
    /// <summary>On the successful AJAX call, we have to update the Application messages section and execute the callback method. This method is internally called by the AJAXHelper.</summary>

    //************************
    //if returned data is packaging server messages then we can evaluate it here and show messages to the user in some modal popup or notification area	
    //************************


    //execute the callback method
    fnCallback(objResponse.ResultData, objAJAXCaller.SourceElement);
}

// This will handle all AJAX failures.
AJAX.prototype.AJAXFailHandler = function(objAJAXCaller, objResponse, textStatus, fnCallback)
{
    /// <summary>Since this AJAX request failed, let's call the callback but manually create a failure response. This is to handle the exceptions. All validation or business logic errors will be handled in the "success" call back of AJAX.</summary>

    //display the error dialog
    objAJAXCaller.UIHelperRef.CreateAJAXResponseErrorMessage( objResponse.responseText );

    fnCallback(
		{
		    IsSuccessful: false,
		    ResultData: ""
		});
}

6.
Using the “blockUI” can be quite helpful here as we can easily show the AJAX loader to the user. We can create some methods which will show and hide the loader on the UI. In the example code, I am using a .gif file for loader animation, which is set as the message to the blockUI.

UIHelper.prototype.ShowAJAXLoader = function(disableView)
{
    /// <summary>Displays the loader progress image at top right corner of the browser window.</summary>
    /// <param name="disableView">"true", if view needs to be disabled.</param>
    var objSelf = this;

    //this check will make sure that we don't make unnecessary calls to unblockUI method
    objSelf.ajaxLoaderShown = true;

    $.blockUI.defaults.css = {};
    $.blockUI({
        message: $('img#ajaxLoading'),
        centerY: 0,
        fadeIn: 100,
        showOverlay: disableView
    });
}

UIHelper.prototype.HideAJAXLoader = function()
{
    /// <summary>Hides the AJAX Loader image.</summary>

    var objSelf = this;

    if (objSelf.ajaxLoaderShown)
    {
        //unblock the UI but make the fadeout slower
        $.unblockUI({ fadeOut: 800 });
        objSelf.ajaxLoaderShown = false;
    }

}

7.
Following methods are really handy to show the “AJAX call failure”. In showMessageDialog, we are just using the JQuery UI Modal dialog, with the passed message parameter. We can create a blank div on a Master page and use it to hook the JQuery dialog. In this example code I am using the “messageDialogDiv” div.

//It will parse the response text to retrieve the "title" tag for the error information and display an error dialog.
UIHelper.prototype.CreateAJAXResponseErrorMessage = function( message )
{
    /// <summary>It will parse the response text to retrieve the "title" tag for the error information and display an error dialog.</summary>
    /// <param name="title">Title for the dialog.</param>
    /// <param name="message">Full response text from Response Object.</param>

    var errorMessage = '';
    message.replace(/[^<]*(<title>([^<]+)<\/title>)/gi, function()
    {
        errorMessage = arguments[2];
    });

    if (errorMessage.length == 0)
        errorMessage = 'Unspecified Error';

    this.ShowMessageDialog('Application Error', errorMessage);
}

//Displays a standard message dialog for errors or other notifications.
UIHelper.prototype.ShowMessageDialog = function(title, message)
{
    /// <summary>Displays a standard message dialog for errors or other notifications.</summary>
    /// <param name="title">Title for the dialog.</param>
    /// <param name="message">Actual HTML formatted or simple string message to show in the dialog.</param>

    var dialogDiv = $('#messageDialogDiv');

    if (title == null || title.length == 0)
        title = 'Application Message';

    dialogDiv.empty();
    dialogDiv.attr('title', title);
    dialogDiv.append(message);

    dialogDiv.dialog({
        width: 400,
        modal: true,
        buttons: {
            Ok: function()
            {
                $(this).dialog('close');
                $(this).dialog("destroy");
            }
        }
    });
}

8.
The empty div can simply be defined with display style set to none. JQuery dialog will handle it showing to the user and hiding it.

    <div id="messageDialogDiv" title="Error" style="display:none;">
    </div>