尝试在以下代码中添加自适应样式

时间：2015-02-26 19:29:24

标签： c# razor model-view-controller responsive-design devexpress

所以我的同事有一个愚蠢的想法，即在我们的网站上添加一个Dev express MVC框架。我不能为我的生活让它在响应分割器大小时像正常的html布局一样呈现。我试图将整个文件放在网格视图中，但它就像它有自己的滚动条或其他东西。任何帮助，将不胜感激。基本上有3个文件。 Web配置，RootLayout和主布局。我认为它在c＃中（例如，没有px或样式声明，但有.pixel）所以如果有人能够帮助我，我会非常感激。以下是三个文件。

这是第一个文件（ROOTLAYOUT.CSHTML）

@{ Layout = "~/Views/Shared/_rootLayout.cshtml"; }

@Html.DevExpress().Splitter(settings => {
settings.Name = "ContentSplitter";
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.Height = System.Web.UI.WebControls.Unit.Percentage(100);
settings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
settings.Styles.Pane.Border.BorderWidth =   System.Web.UI.WebControls.Unit.Pixel(0);

//settings.Panes.Add(subpane => {
//    subpane.Name = "ContentLeft";
//    subpane.PaneStyle.CssClass = "leftPane";
//    subpane.ShowCollapseBackwardButton = DefaultBoolean.False;
//    subpane.Size = System.Web.UI.WebControls.Unit.Pixel(200);
//    subpane.MinSize = System.Web.UI.WebControls.Unit.Pixel(150);
//    subpane.PaneStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(1);
//    subpane.SetContent(() => {
//        Html.RenderPartial("ContentLeftPartialView");
//    });
//});

settings.Panes.Add(subpane => {
    subpane.Name = "ContentCenter";
    subpane.PaneStyle.CssClass = "contentPane";
    subpane.ScrollBars = System.Web.UI.WebControls.ScrollBars.Auto;
    subpane.Separator.Visible = DefaultBoolean.True; 
    subpane.Size = System.Web.UI.WebControls.Unit.Pixel(200);
    subpane.Separator.SeparatorStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
    subpane.Separator.SeparatorStyle.BorderTop.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
    subpane.SetContent(RenderBody().ToHtmlString());
});

     }).GetHtml()

这是第二个文件（WEBCONFIG）

     <?xml version="1.0" ?><configuration>
     <configSections>
     <sectionGroup name="system.web.webPages.razor"         type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
  <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
  <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
</sectionGroup>
</configSections>
 <system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="System.Web.UI.WebControls" />
    <add namespace="DevExpress.Utils" />
    <add namespace="DevExpress.Web" />
    <add namespace="DevExpress.Web.ASPxHtmlEditor" />
    <add namespace="DevExpress.Web.ASPxSpellChecker" />
    <add namespace="DevExpress.Web.ASPxThemes" />
    <add namespace="DevExpress.Web.ASPxTreeList" />
    <add namespace="DevExpress.XtraCharts" />
    <add namespace="DevExpress.XtraCharts.Web" />
    <add namespace="DevExpress.XtraReports" />
    <add namespace="DevExpress.XtraReports.UI" />
    <add namespace="DevExpress.XtraReports.Web" />
    <add namespace="DevExpress.XtraReports.Web.DocumentViewer" />
    <add namespace="DevExpress.XtraPivotGrid" />
    <add namespace="DevExpress.Data.PivotGrid" />
    <add namespace="DevExpress.Web.ASPxPivotGrid" />
    <add namespace="DevExpress.Web.Mvc" />
    <add namespace="DevExpress.Web.Mvc.UI" />
    <add namespace="DevExpress.XtraScheduler" />
    <add namespace="DevExpress.XtraScheduler.Native" />
    <add namespace="DevExpress.Web.ASPxScheduler" />
    <add namespace="DevExpress.DashboardWeb.Mvc" />
    <add namespace="DevExpress.Web.ASPxSpreadsheet" />
  </namespaces>
</pages>
</system.web.webPages.razor>
<appSettings>
<add key="webpages:Enabled" value="false" />
</appSettings>
<system.web>
 <httpHandlers>
  <add path="*" verb="*" type="System.Web.HttpNotFoundHandler" />
  </httpHandlers>
   <!--
    Enabling request validation in view pages would cause validation to   occur
    after the input has already been processed by the controller. By default
    MVC performs request validation before a controller processes the input.
    To change this behavior apply the ValidateInputAttribute to a
    controller or action.
-->
    <pages validateRequest="false"    pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
    <controls>
    <add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.Mvc" tagPrefix="mvc" />
   </controls>
   </pages>
   </system.web>
   <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
   <handlers>
   <remove name="BlockViewHandler" />
   </handlers>
   </system.webServer>
  </configuration>

这是第三个文件（MAINLAYOUT.CSHTML）

@Html.DevExpress().GetStyleSheets( 
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }, 
new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor }, 
new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }, 
new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList },
new StyleSheet { ExtensionSuite = ExtensionSuite.Spreadsheet },
new StyleSheet { ExtensionSuite = ExtensionSuite.SpellChecker }
      )
      @Html.DevExpress().GetScripts( 
      new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout }, 
      new Script { ExtensionSuite = ExtensionSuite.HtmlEditor }, 
      new Script { ExtensionSuite = ExtensionSuite.GridView }, 
      new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
      new Script { ExtensionSuite = ExtensionSuite.Editors }, 
      new Script { ExtensionSuite = ExtensionSuite.Chart },
      new Script { ExtensionSuite = ExtensionSuite.Report },
new Script { ExtensionSuite = ExtensionSuite.Scheduler },
new Script { ExtensionSuite = ExtensionSuite.TreeList },
new Script { ExtensionSuite = ExtensionSuite.Spreadsheet },
new Script { ExtensionSuite = ExtensionSuite.SpellChecker }
    )
 </head>

   <body style="background-color:#000000">

    @Html.DevExpress().Splitter(settings =>
   {
settings.Name = "MainSplitter";
settings.AllowResize = false;
settings.Orientation = System.Web.UI.WebControls.Orientation.Vertical;
settings.FullscreenMode = true;
settings.SeparatorVisible = false;
settings.Styles.Pane.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
settings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);

settings.Panes.Add(pane =>
{
    pane.Name = "Header";
    pane.AutoHeight = true;
    pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
    pane.PaneStyle.CssClass = "headerPane";
    pane.SetContent(() =>
    {
        Html.RenderPartial("HeaderPartialView");
    });
});

settings.Panes.Add(pane =>
{
    pane.Name = "Content";
    pane.PaneStyle.CssClass = "mainContentPane";
    pane.MinSize = System.Web.UI.WebControls.Unit.Pixel(375);
    pane.PaneStyle.BackColor = System.Drawing.Color.White;
    pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
    pane.SetContent(RenderBody().ToHtmlString());
});

settings.Panes.Add(pane =>
{
    pane.Name = "Footer";
    pane.Size = System.Web.UI.WebControls.Unit.Pixel(42);
    pane.PaneStyle.CssClass = "footerPane";
    pane.SetContent(() =>
    {
        Html.RenderPartial("FooterPartialView");
     });
     });
     }).GetHtml()

1 个答案:

答案 0 :(得分：0)

DevExpress GridView现在没有响应。因此，如果您希望在调整拆分器窗格时调整其大小，可以尝试this approach。如果您的任务不同，请更详细地描述。

您也可以尝试使用Bootstrap as demonstrated here来隐藏某些GridView列。 MVCxGridViewColumn具有该线程中使用的相同设置。

<强>更新

DX MVC GridView为adaptive now。

相关问题
最新问题