jqmAjaxDialog (jqModal) ASP.NET MVC HtmlHelper Control

I had a need today to create a new Html helper

See jqModal here: http://dev.iceburg.net/jquery/jqModal/

This helper duplicates this jqModal javascript:

$().ready(function() {
  $('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
});
 
<a href="#" class="ex2trigger">
...
<div class="jqmWindow" id="ex2">
</div>
 
(see samples on the link above)
 

Now, I want to take this to ASP.NET MVC:

public static class jqmDialogExtensions
    {
        public static string jqmAjaxDialog<TController>(this HtmlHelper helper,

                  string dialogWindowName, string dialogTriggerName, 
                  Expression<Action<TController>> theAction)
            where TController : Controller
        {
            var sb = new StringBuilder();
            sb.AppendFormat("<div id=\"{0}\" class=\"jqmWindow\"></div>", dialogWindowName);
            sb.Append("<script type='text/javascript'>");
            sb.Append("$(function() {");
            sb.AppendFormat("$('#{0}').jqm(", dialogWindowName);
            sb.Append("{ajax: ");
            sb.AppendFormat("'{0}', ", helper.BuildUrlFromExpression(theAction));
            sb.AppendFormat("trigger:'{0}'", dialogTriggerName);
            sb.Append("});});</script>");
            return sb.ToString();
        }
    }
 
In the Html:
 
 <%= Html.jqmAjaxDialog<CompanyController>("SampleDialog", 
                    a.SampleDialogTrigger,
                    c => c.EditContactAddress(contact.Contactid.ToString()))%>
 
<a href="#" class="SampleDialogTrigger">Edit</a>
 

This is just a ‘quickie’ – as I didn’t want to be using ‘Response.writes’ or creating this in the controller code – maybe I can reuse it – that is the nice thing about these HtmlHelpers, they can be quick and easy to create and it modularizes some of that UI code.

Note again the use of the ‘BuildUrlFromExpression’ call – that is a favorite of mine  šŸ™‚

Basically it looks at the controller, ie. CompanyController, then the lambda expression is used ‘c => c.EditContactAddress(contact.Contactid.ToString())’    – this will all be picked up by intellisense, makes it easy to pass parameters, and creates the correct url path to the action.

(Note: You’ll need to reference the jqModal and jQuery files)

Advertisements

2 thoughts on “jqmAjaxDialog (jqModal) ASP.NET MVC HtmlHelper Control

  1. Hi
    Great extension. I have a question, if i have an controller action that returns JSON and i want to open a jqModal window with that content after the action have occured, do you know how to do that? Is it possible with jqModal?

    Great work!
    Regards

  2. Good question. If I’m understanding right, you might want to look at the onShow :

    onShow (callback)
    Called when a dialog is to be shown. Be sure to show (set visible) the dialog.

    // onShow : show+make the window translucent
    var myOpen=function(hash){ hash.w.css(‘opacity’,0.88).show(); };
    $(‘#dialog’).jqm({onShow:myOpen});

    (function|false) – default: false

    Within the callback perhaps make your ajax call.

    But again, I’m not sure exactly how to handle this.

    Are you display the JSON on the page – ie. to a javascript control ? or just the raw values?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s