asp.net - net - asp page tag helper

Distribución de ASP.NET MVC4 con Twitter Bootstrap

Question

Estoy tratando de usar la nueva función de agrupamiento en MVC 4 con Twitter bootstrap y me parece que las rutas a los archivos png de glyphicons en caso de que el CSS se haya equivocado de alguna manera. Aquí está mi código:

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

No veo ningún icono en los botones y del mismo modo. ¿Estoy haciendo algo mal aquí? ¿Alguna sugerencia?

Answer 1

El ''CssRewriteUrlTransform'' funciona muy bien para aplicaciones que NO se ejecutan en la parte superior de un directorio virtual.

Por lo tanto, si su aplicación se ejecuta en http://your-site.com/ funciona muy bien, pero si se ejecuta en http://your-site.com/your-app/ tendrá 404 para todas sus imágenes, porque el valor predeterminado ''CssFixRewriteUrlTransform'' hace referencia a sus imágenes con ''/''.

Para resolver este problema, he implementado mi propia versión de ''CssRewriteUrlTransform'' de esta manera:

    public class CssFixRewriteUrlTransform : IItemTransform {
    private static string ConvertUrlsToAbsolute(string baseUrl, string content) {
        if (string.IsNullOrWhiteSpace(content)) {
            return content;
        }
        var regex = new Regex("url//([''/"]?(?<url>[^)]+?)[''/"]?//)");
        return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")"));
    }

    public string Process(string includedVirtualPath, string input) {
        if (includedVirtualPath == null) {
            throw new ArgumentNullException("includedVirtualPath");
        }
        var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
        return ConvertUrlsToAbsolute(directory, input);
    }

    private static string RebaseUrlToAbsolute(string baseUrl, string url) {
        if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) {
            return url;
        }
        if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) {
            baseUrl = string.Concat(baseUrl, "/");
        }
        return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url));
    }
}

ACTUALIZACIÓN: gracias a los superjos que señalaron que había otra solución:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

Answer 2

Lo más probable es que los iconos / imágenes en los archivos css estén usando rutas relativas, por lo que si su paquete no vive en la misma ruta relativa a la aplicación que sus archivos css desagregados, se convertirán en enlaces rotos.

Hemos reescrito urls en CSS en nuestra lista de tareas pendientes, pero por ahora, lo más fácil es que su ruta de paquete se parezca al directorio css para que las direcciones URL relativas funcionen, es decir:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Actualización: Hemos agregado soporte para esto en la versión 1.1beta1, por lo que para volver a escribir automáticamente las URL de la imagen, puede agregar una nueva ItemTransform que hace esta rebase automáticamente.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

Answer 3

Lo que puede hacer es ir a la page personalización y cambiar @iconSpritePath y @iconWhiteSpritePath en la sección de Sprites y, por supuesto, descargar el nuevo estilo.

He puesto mis imágenes en la carpeta Content/Images y he cambiado la ruta en:

• /Content/Images/glyphicons-halflings.png
• /Content/Images/glyphicons-halflings-white.png

Otra alternativa es descargar todos los archivos LESS de github , cambiar las mismas variables en el archivo variables.less y volver a compilar el archivo bootrap.less con una herramienta como SimpLESS .

Answer 4

AspNetBundling arregló esto ahora agregado a mi paquete AspNetBundling NuGet que resuelve un montón de otros problemas en el transformador estándar, particularmente en torno al uso de data-uris. De código abierto en GitHub también.

Solo haz:

1. Install-Package AspNetBundling
2. Reemplace CssRewriteUrlTransform con CssRewriteUrlTransformFixed