CSS not being applied with jQuery UI dialog

Question

Hi,

I have an MVC view with a Ajax.ActionLink.

this.Ajax.ActionLink( "Create Offender", "Create", "ReportOffender",
      null, new AjaxOptions() 
      { 
                        HttpMethod = "GET", UpdateTargetId = "dialog",
                        OnBegin = "function() { $('#dialog').dialog('open'); }" 
      },
      new Dictionary<string, object>() { { "class", "optionlink" } } )

This calls an action called "Create" which returns a partial view that is then placed inside of a div/dialog. The contents of this partial view is a table, some rows/columns and textboxes each of which have a CSS class assigned to them.

The problem is when the dialog is shown, with the partial view rendered inside, the CSS classes are ignored and not rendered.

Any ideas as to why this is happening?

Thanks

Michael

P.S This is the partial view that is returned from the Create GET action (see the Ajax.ActionLink above)...

<% using( this.Ajax.BeginForm( "Create", "ReportOffender", null, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "dialog" } ) ) { %>

    <% this.Html.RenderPartial( "~/Views/IncidentReporting/Report/Offender/DataEntryUserControl.ascx", this.Model ); %>

<% } %>

Once the user completes the form, snippet below, the Create POST method is called and the response is placed into the same dialog. This response will either be a "you've got errors" or a "saved successful" message. I use another RenderParital here because I also have a similar Edit version that uses the same form.

Below is a snippet of the HTML inside of the DataEntryUserControl.ascx and represents the form the user has to complete...

<table class="entity-form">

    <tr>
        <td class="entity-form-validation-summary" colspan="2">
            <%= this.Html.ValidationSummary() %>
        </td>
    </tr>

    <!-- FIRST NAME -->
    <tr>
        <td class="entity-form-caption"><label for="Entity.FirstName">First Name</label></td>
        <td>
        <%= this.Html.TextBox( "Entity.FirstName", this.Model.Entity.FirstName, 50, 50, this.Page.User.IsInRoles( SecurityGroups.Translators ), null ) %>
        <%= this.Html.ValidationMessage( "Entity.FirstName" ) %>
        </td>
    </tr>

    <!-- LAST NAME -->
    <tr>
        <td class="entity-form-caption"><label for="Entity.LastName">Last Name</label></td>
        <td>
        <%= this.Html.TextBox( "Entity.LastName", this.Model.Entity.LastName, 50, 50, this.Page.User.IsInRoles( SecurityGroups.Translators ), null )%>
        <%= this.Html.ValidationMessage( "Entity.LastName" )%>
        </td>
    </tr>

As you can see there is nothing special. The TextBox methods with the extra parameters are extension methods I created to add MaxLength, Size, etc, to the textbox controls. It is here were I'm having the problems with the CSS. I use the same CSS classes, and form structure, elsewhere in "normal" views and they rendered correctly.

Answer 1

verify your html output/ or look table with web developer or firebug/ may be it hasnt class in first place/

if situation isnt like that; put stylesheet link into your ascx/