Временно переопределить тему CSS в ASP.NET - PullRequest
Новая
       24

Временно переопределить тему CSS в ASP.NET

0 голосов
/ 11 июня 2009

У меня есть MasterPage, который состоит из двух столбцов, меню левого столбца, содержимого правого столбца. Вся страница представляет собой макет XHTML / Divs / CSS. Таким образом, столбцы - это div'ы с CSS для их размера.

Для одной страницы, страницы сетки, я хочу, чтобы только один столбец (столбец содержимого) имел ширину 100% для максимальной области просмотра.

Как я могу использовать ту же главную страницу и ту же тему на этой странице исключений?

Создание совершенно новой главной страницы и добавление нового свойства CSS в тему только для этой одной страницы кажется излишним. Есть ли способ переопределить свойство CSS ширины div содержимого только на этой странице? Я не эксперт в CSS, но я подумал, что есть способ сделать это.

У меня есть некоторые оговорки относительно того, чтобы позволить стороне клиента делать переопределение; по причинам совместимости. Я бы предпочел переопределение на стороне сервера.

Есть предложения?

Ответы [ 4 ]

1 голос
/ 11 июня 2009

Дайте каждой странице отдельный класс CSS в коде и нацеливайте этот класс в своем CSS. Вот глупо-простой способ сделать это:

Создайте свой собственный класс MasterPage: 

class MyMasterPage : MasterPage
{
    public string BodyClass {get;set;}
}

На вашей главной странице: 

<%@ Master Inherits="MyNamespace.MyMasterPage" %>
...
<body class="<% =this.BodyClass %>">
    <asp:ContentPlaceHolder ... />
</body>
...

А в коде вашей страницы: 

void Page_Load(object sender, EventArgs e)
{
    ((MyMasterPage)Master).BodyClass = "specialpage";
}

А в вашем классе CSS: 

.specialpage .mainColumn {width:100%;}
.specialpage .otherColumn {display:none;}
0 голосов
/ 08 декабря 2009

Используйте событие OnPreRenderComplete, например: 

protected override void OnPreRenderComplete(EventArgs e)
    {
        base.OnPreRenderComplete(e);
        rfv_login.CssClass = "ValidatorReset";
        rfv_pwd.CssClass = "ValidatorReset";
    }
0 голосов
/ 11 июня 2009

работал как шарм. Решением этой проблемы является добавление еще одной области на главную страницу с новым div, которому назначен CSS со 100% шириной. Также создайте новую запись стиля в вашем файле CSS. На странице содержимого поместите содержимое, ширина которого должна составлять 100%, в области со стилем 100%, а не в той, которая соответствует макету двух столбцов.

После этого просто нужно настроить страницу содержимого на использование содержимого главной страницы содержимого страницы содержимого.

MasterPage: 

<!-- start page -->
<div id="page">
    <!-- start content -->
     <div id="contentOneColumn" >
      <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server">
      <!-- content that needs 100% width, one column -->
     </asp:ContentPlaceHolder>
     </div>     
    <div id="content" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">
        <!-- content that works with two column -->
        </asp:ContentPlaceHolder>

CSS: 

/* Content */

content {
    float: right;
    width: 600px;
}

/* ContentOneColumn */
contentOneColumn {
    float:none;
    width: 850px;
}
0 голосов
/ 11 июня 2009

Вы можете использовать что-то похожее на: 

#content {
    /* Some styles */
    width: 100% !important;
}
...