CSS не применяется в диалоговом окне пользовательского интерфейса jQuery

#asp.net-mvc #css #jquery-ui

#asp.net-mvc #css #jquery-пользовательский интерфейс

Вопрос:

У меня есть представление MVC с 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" } } )
  

Это вызывает действие под названием «Создать», которое возвращает частичный вид, который затем помещается внутри div / dialog. Содержимое этого частичного представления представляет собой таблицу, некоторым строкам / столбцам и текстовым полям, каждому из которых присвоен класс CSS.

Проблема в том, что когда отображается диалоговое окно с отображением частичного представления внутри, классы CSS игнорируются и не отображаются.

Есть идеи относительно того, почему это происходит?

Спасибо

Майкл

P.S Это частичное представление, которое возвращается из действия Create GET (см. Ajax.Ссылка на действие выше)…

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

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

<% } %>
  

Как только пользователь заполняет форму, приведенный ниже фрагмент, вызывается метод Create POST, и ответ помещается в то же диалоговое окно. Этим ответом будет либо сообщение «у вас возникли ошибки», либо сообщение «успешно сохранено». Здесь я использую другой параметр визуализации, потому что у меня также есть похожая версия редактирования, которая использует ту же форму.

Ниже приведен фрагмент HTML-кода внутри DataEntryUserControl.ascx и представляет форму, которую пользователь должен заполнить…

 <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>
  

Как вы можете видеть, в этом нет ничего особенного. Методы текстового поля с дополнительными параметрами — это методы расширения, которые я создал для добавления максимальной длины, размера и т.д. К элементам управления текстового поля. Именно здесь у меня возникли проблемы с CSS. Я использую те же классы CSS и структуру формы в других «обычных» представлениях, и они отображаются правильно.

Комментарии:

1. Может быть, обновите свой вопрос и добавьте фрагмент html и css, который должен повлиять на него? По приведенному вами описанию трудно сказать.

Ответ №1:

проверьте свой вывод html / или посмотрите таблицу с помощью web developer или firebug / может быть, у него нет класса на первом месте/

если ситуация не такая; поместите ссылку на таблицу стилей в свой ascx/