This project is read-only.

Configure Fully Xpedited Web Site (MVC HtmlHelpers)

Xpedite makes use of five main MVC Html Helper extensions.
  • CompositeCssResource
  • CompositeScriptResource
  • CompositeImageResource
  • CssSprite
  • CompositeResource

IMPORTANT: Depending on the 'mode' configured in the web.config file (see: Configure Partially Xpedited Web Site), each Xpedite MVC HtmlHelper will either render the composite resources (when mode is On or RemoteOnly) or individual resource (when mode is Off or RemoteOnly) to ensure that debugging is not impacted by the usage of composite resources.

XpediteRoute

In order to enable the handling of XCR resources, ensure that the following line is added to the RegisterReoutes method in the Global.asax.

    public static void RegisterRoutes(RouteCollection routes)
    {
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

      routes.Add(new XpediteRoute());

      routes.MapRoute("Default", "{controller}/{action}/{id}",new { controller = "Home", action = "Index", id = UrlParameter.Optional });
    }

Web.Config Namespace

    <pages>
      <namespaces>
        <add namespace="Xpedite.Mvc.Html" />
      </namespaces>
    </pages>

CompositeCssResource

The CompositeCssResource HTML Helper is used to define combinable Cascading Style Sheet (CSS) resources.

API
    public static MvcHtmlString CompositeCssResource(this HtmlHelper htmlHelper, params String[] resources);
    public static MvcHtmlString CompositeCssResource(this HtmlHelper htmlHelper, IEnumerable<String> resources);
    public static MvcHtmlString CompositeCssResource(this HtmlHelper htmlHelper, String referenceName, IEnumerable<String> resources);

ReferenceName (Optional)

The ReferenceName attribute represents the name given to the composite CSS. Althought the ReferenceName is not required, defining a reference name can make identifying resources in FireBug a little easier.

The ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-]*$

Default Value: UnnamedXXXXXXXX

Resources

The Resources attribute represents the set of CSS resources to be combined when not running in Debug mode. Several overloads have been provided to ensure ease of composite resource definitions and as such, may either be a params array or enumerable of either string URLs or names resources.

Examples

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeCssResource(
        "/Styles/Site1.css",
        "/Styles/Site2.css",
        "/Styles/Site3.css"
      )%> 
</asp:Content>

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeCssResource(
        "MyCombinedCss",
        new [] {
          "/Styles/Site1.css",
          "/Styles/Site2.css",
          "/Styles/Site3.css"
        })%>
</asp:Content>

CompositeScriptResource

The CompositeScriptResource HTML Helper is used to define combinable JavaScript resources.

API
    public static MvcHtmlString CompositeScriptResource(this HtmlHelper htmlHelper, params String[] resources);
    public static MvcHtmlString CompositeScriptResource(this HtmlHelper htmlHelper, IEnumerable<String> resources);
    public static MvcHtmlString CompositeScriptResource(this HtmlHelper htmlHelper, String referenceName, IEnumerable<String> resources);

ReferenceName (Optional)

The ReferenceName attribute represents the name given to the composite JavaScript. Althought the ReferenceName is not required, defining a reference name can make identifying resources in FireBug a little easier.

The ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-\.]*$

Default Value: UnnamedXXXXXXXX

Resources

The Resources attribute represents the set of JavaScript resources to be combined when not running in Debug mode. Several overloads have been provided to ensure ease of composite resource definitions and as such, may either be a params array or enumerable of either string URLs or names resources.

Examples

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeScriptResource(
        "/Scripts/Script1.js",
        "/Scripts/Script1.js",
        "/Scripts/Script2.js"
      )%> 
</asp:Content>

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeScriptResource(
        "MyCombinedJavaScript",
        new [] {
          "/Scripts/Script1.js",
          "/Scripts/Script2.js",
          "/Scripts/Script3.js"
        })%>
</asp:Content>

CompositeImageResource

The CompositeImageResource HTML Helper is used to define combinable CSS Sprites (PNG) resources.

API
    public static MvcHtmlString CompositeImageResource(this HtmlHelper htmlHelper, String referenceName, IEnumerable<Resource> resources);

ReferenceName

The ReferenceName attribute represents the name given to the composite CSS Sprite. The ReferenceName will be used as the base CSS ClassName used to identify the CSS Sprite Image.

The ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-]*$

Resources

The Resources attribute represents the set of GIF, JPEG or PNG resources to be combined together in to a PNG CSS Sprite. Unlike the other HTML Helpers, no overloads have been provided as the above API is the preferred method of defining a CSS Sprite. If alternate CSS Sprite formats are defired, use the CompositeResource HTML Helper defined below.

Examples

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeImageResource(
        "MyCombinedImage",
        new [] {
          new Resource("Image1", "/Images/Image1.png"),
          new Resource("Image2", "/Images/Image2.gif"),
          new Resource("Image3", "/Images/Image3.jpg")
        })%>
</asp:Content>

CssSprite

The CssSprite HTML Helper is used to reference a combinable CSS Sprites (PNG) resource. Typically only a spriteName and imageName are required, although altText is recommented for accessibility. An id may also be specified if adding hover effects etc for a toolbar to make the CSS Selector more efficient.

API
    public static MvcHtmlString CssSprite(this HtmlHelper htmlHelper, String spriteName, String imageName)
    public static MvcHtmlString CssSprite(this HtmlHelper htmlHelper, String spriteName, String imageName, String altText)
    public static MvcHtmlString CssSprite(this HtmlHelper htmlHelper, String spriteName, String imageName, String altText, String id)

SpriteName

The SpriteName maps to a specific CompositeResource definition ReferenceName where the ImageName reference is defined.

ImageName

The ImageName maps to a specific CompositeResource definition Resource ReferenceName that represents the image to be displayed.

AltText (Optional)

The alternative text / tooltip to be displayed for the CSS Sprite image.

Default Value: null

Id (Optional)

The client identifier to be used to reference the image in JavaScript etc.

Default Value: null

Examples

  <div>
    <%= Html.CssSprite("MySprite", "Image1")%>
    <%= Html.CssSprite("MySprite", "Image2", "Image Two")%>
    <%= Html.CssSprite("MySprite", "Image3", "Image Three", "MySpriteI3")%>
  </div>

CompositeResource

The CompositeResource HTML Helper backs all of the above API calls and is exposed to ensure that all possible ResourceTypes are available (i.e., ResourceType.Jpeg and ResourceType.Gif).

API
    public static MvcHtmlString CompositeResource(this HtmlHelper htmlHelper, ResourceType resourceType, params String[] resources);
    public static MvcHtmlString CompositeResource(this HtmlHelper htmlHelper, ResourceType resourceType, IEnumerable<String> resources);
    public static MvcHtmlString CompositeResource(this HtmlHelper htmlHelper, ResourceType resourceType, params Resource[] resources);
    public static MvcHtmlString CompositeResource(this HtmlHelper htmlHelper, ResourceType resourceType, IEnumerable<Resource> resources);
    public static MvcHtmlString CompositeResource(this HtmlHelper htmlHelper, ResourceType resourceType, String referenceName, IEnumerable<String> resources);
    public static MvcHtmlString CompositeResource(this HtmlHelper htmlHelper, ResourceType resourceType, String referenceName, IEnumerable<Resource> resources);

Type

The Type attribute that defines the composite resource type.
  • Css - Represents a composite Cascading Style Sheet resource.
  • JavaScript - Represents a composite Javascript resource.
  • Png - Represents a Png based CSS Sprite (May be made up of Png, Jpeg and Gif image resources).
  • Jpeg - Represents a Jpeg based CSS Sprite (May be made up of Png, Jpeg and Gif image resources).
  • Gif - Represents a Gif based CSS Sprite (May be made up of Png, Jpeg and Gif image resources).

ReferenceName (Optional)

The ReferenceName attribute represents the name given to the composite resource. Althought the ReferenceName is not required, defining a reference name can make identifying resources in FireBug a little easier.

When the Type attribute is not set to CSS, the ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-\.]*$
When the Type attribute is set to CSS, the ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-]*$

Default Value: UnnamedXXXXXXXX

Resources

The Resources attribute represents the set of resources to be combined when not running in Debug mode. Several overloads have been provided to ensure ease of composite resource definitions and as such, may either be a params array or enumerable of either string URLs or names resources.

Examples

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeResource(
        ResourceType.Css,
        "/Styles/Site1.css",
        "/Styles/Site2.css",
        "/Styles/Site3.css"
      )%> 
</asp:Content>

<asp:Content ID="HeadContentPlaceHolder" ContentPlaceHolderID="head" runat="server">
  <%= Html.CompositeResource(
        ResourceType.Css,
        "MyCombinedCss",
        new [] {
          new Resource("Site1", "/Styles/Site1.css"),
          new Resource("Site2", "/Styles/Site2.css"),
          new Resource("Site3", "/Styles/Site3.css")
        })%>
</asp:Content>

Last edited Nov 6, 2010 at 8:12 PM by CBaxter, version 9

Comments

No comments yet.