Improving ASP.NET MVC MUSIC STORE more usability with DotNetAge in 30 minutes

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<WidgetCategory>>" %>
<% var prefix = Guid.NewGuid().ToString().Substring(0, 5); %>
<%: Html.ScriptRefs(new string[]{"plugins/ajaxupload.js"}) %>
<input type="hidden" value="" id="<%:prefix+"_wid" %>" />
<div class="ui-widget-explorer" id="<%:prefix+"_widget_explorer" %>">
    <ul>
        <% 
            foreach (var cat in Model)
            { %>
        <li><a href="<%="#__catTab"+cat.Id.ToString() %>">
            <%=cat.Title %></a></li>
        <%
            }
        %>
    </ul>
    <% foreach (var c in Model)
       { %>
    <div id="<%="__catTab"+c.Id %>">
        <div class="ui-listview" id="<%:prefix+"_widget_explorer_listview_"+c.Id %>" style="height: 110px;">
            <ul>
                <% 
                    var web = this.CurrentWeb();
                    var descriptors = c.GetDescriptors();
                    foreach (var descriptor in descriptors)
                    {
                        if ((web.Type == (int)WebTypes.Public) && (descriptor.Scopes == (int)Scopes.Personal))
                            continue;
                %>
                <li title="<%=descriptor.Description %>">
                    <div class='ui-listview-item-img'>
                        <p>
                            <img src="<%=string.IsNullOrEmpty(descriptor.ImageUrl) ? Url.Content("~/Content/Images/Widgets/app.gif"):Url.Content(descriptor.ImageUrl) %>"
                                alt="" /></p>
                    </div>
                    <div title="<%=descriptor.Description %>">
                        <%=descriptor.Title %>
                    </div>
                    <% string _area = string.IsNullOrEmpty(descriptor.Url) ? "" : descriptor.Url;
                       string dvalue = descriptor.ID.ToString() + "," + Url.Action(descriptor.Action, descriptor.Controller, new { Area = _area }) + ",'" + (string.IsNullOrEmpty(descriptor.IconUrl) ? "" : Url.Content(descriptor.IconUrl)) + "'"; %>
                    <input type="hidden" value="<%=dvalue %>" />
                </li>
                <%} %>
            </ul>
        </div>
    </div>
    <%
        Ajax.jQuery("#" + prefix + "_widget_explorer_listview_" + c.Id, "listview", new ListViewOptions()
        {
            ItemField = "ul>li",
            OnItemClick = "var _args = ui.value.split(\",\");$(\"#" + prefix + "_wid\").val(_args[0]);$(\"#" + prefix + "_content_detail\").load(\"" +
            Url.Action("Info", "Widget", new { Area = "" }) + "\", { id: _args[0] }); var $preview = $(\"#" +
            prefix + "_content_preview\");  var wp = $(\"<div></div>\"); $preview.html(\"\");$preview.append(wp); wp.portlet({id: _args[0],url: _args[1],icon:_args[2],closable:false,deletable:false,expanded:true,showHeader:true,showFooter:false,preview:true,design:true,title:ui.text}); $('#" +
            prefix + "_widget_preview_dialog').dialog(\"open\");"
        });
       } %>
    <div style='display: none;' class="ui-widget-preview" id="<%=prefix+"_widget_preview_dialog" %>"
        title="<%=Html.Global("RES_WIDGETPREVIEW") %>">
        <table cellspacing="5px" style="bottom: 0px; overflow: auto; width: 100%">
            <tr>
                <td valign="top">
                    <div style="margin-bottom: 5px; height: 30px;">
                        <span style="float: left; padding-top: 5px; margin-right: 5px;">Add to:</span>
                        <div id="zonesInPage" style="float: left;">
                        </div>
                    </div>
                    <div style="clear: left; overflow: auto; width: 300px" class="ui-content-preview"
                        id="<%=prefix+"_content_preview" %>">
                    </div>
                </td>
                <td valign="top">
                    <div style="overflow: auto; display: block;" class="ui-content-detail" id="<%=prefix+"_content_detail" %>">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
<%
    Ajax.jQuery("#" + prefix + "_widget_preview_dialog", "dialog", new DialogOptions()
    {
        AutoOpen = false,
        bgiFrame = true,
        HideEffect = jQueryEffects.Scale,
        ShowEffect = jQueryEffects.Slide,
        Width = 685,
        Position = new string[] { "'center'", "'top'" },
        OnOpen = ((new StringBuilder())
                                .Append("if ((portal.dynamicUI.zones.length) && ($('#zonesInPage').children().length==0)){")
                                .Append("var _zItems=$(\"<ul/>\").appendTo($('#zonesInPage'));")
                                .AppendLine("portal.dynamicUI.zones.each(function (i, n) {")
                                .Append("var _zItem = $(\"<li/>\").appendTo(_zItems),")
                                .Append(" _zVal = $(\"<input type='hidden' />\").appendTo(_zItem).val($(n).attr(\"id\")),")
                                .Append("_zTxt = $(\"<span/>\").appendTo(_zItem);")
                                .Append("_zTxt.text($(n).attr(\"title\") ? $(n).attr(\"title\") : $(n).attr(\"id\"));")
                                .AppendLine("});")
                                .Append("$('#zonesInPage').dropdown({ selectedValue: $(portal.dynamicUI.zones[0]).attr(\"id\") });")
                                .AppendLine("}")
        ).ToString(),
        Buttons = (new OptionBuilder()).AddFunctionOption("'" + Html.Global("RES_ADDTOPAGE") + "'", Ajax.GeneratejQueryAjaxScripts(new jQueryAjaxOptions()
        {
            Url = Url.Action("AddTo", "Widget", new { Area = "" }),
            HttpMethod = "POST",
            DataType = AjaxDataTypes.Json,
            Data = (new OptionBuilder()).AddOption("wid", "$(\"#" + prefix + "_wid\").val()", false)
            .AddOption("url", "document.URL", false)
            .AddOption("zoneID", "$('#zonesInPage').dropdown('option','selectedValue')", false)
            .AddOption("preview", true)
            .AddOption("closable", false)
            .AddOption("deletable", false)
            .AddOption("expanded", false)
            .AddOption("pos", 0),
            OnSuccess = "$(\"<div></div>\").prependTo($('#'+$('#zonesInPage').dropdown('option','selectedValue'))).portlet(data); $('#" + prefix + "_widget_preview_dialog').dialog(\"close\");"
        }))
    });

    Ajax.jQuery("#" + prefix + "_widget_explorer", "tabs");
%>
<%=Html.StartupScripts() %>