开发者

Inline javascript in my Razor file - Can I have this "included" from an external file

开发者 https://www.devze.com 2023-03-03 21:51 出处:网络
I have javascript blocks that are small. I would like to have these same blocks appear inline in my code but don\'t want to repeat them in each file. Is there a way that I can \"include\" code into th

I have javascript blocks that are small. I would like to have these same blocks appear inline in my code but don't want to repeat them in each file. Is there a way that I can "include" code into the Razor file that doesn't involve

<script src="@Url.Content("~/Scripts/small_script_block1.js")" type="text/javascript"开发者_C百科></script>

Thanks


Another possibility that will take me a few more minutes to write up:

Create an extension method for HtmlHelper. In your cshtml file it would look like this:

@Html.InlineScriptBlock("~/scripts/small_script_block1.js")

If you want I can send you the implementation but that idea might be all you need. If not, add a comment and I'll write it up.

EDIT CODE Below (not pretty and no warranty implied or given :)

public static class HtmlHelperExtensions
{
    public static MvcHtmlString InlineScriptBlock<TModel>(this HtmlHelper<TModel> htmlHelper, string path)
    {
        var builder = new TagBuilder("script");
        builder.Attributes.Add("type", "text/javascript");

        var physicalPath = htmlHelper.ViewContext.RequestContext.HttpContext.Server.MapPath(path);
        if (File.Exists(physicalPath))
        {
            builder.InnerHtml = File.ReadAllText(physicalPath);
        }

        return MvcHtmlString.Create(builder.ToString());
    }
}

Keep in mind that if you drop this into your project you will need to make the namespace visible to the views. Unlike ASP.NET WebForms where you could provide markup at the top, Razor requires you to do this in the Web.config file in the Views folder.

<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="Your.Namespace.Here.Extensions" />
  </namespaces>
</pages>


You can use the @RenderSection syntax.

<head>
    @RenderSection( "JavaScript", optional : true)
</head>

somewhere in the body, add ..

@section JavaScript
{
    <script src="/Scripts/script.js" type="text/javascript"></script>
}

EDIT: Or if you prefer inline, then as follows:

@section JavaScript
{
    <script type="text/javascript">
    function doSomething() {
    }
    </script>
}


@RenderPage("_IncludeYourScriptsHere.cshtml")

Create a partial view and paste in your tag.


If any one searching for asp.net core. Here is the full conversion code to use in asp.net core

in razor file, use

@using Project.Utility
@Html.InlineScriptBlock("scripts/small_script_block1.js")

In utility extension

    public static string GetString(IHtmlContent content)
    {
        var writer = new System.IO.StringWriter();
        content.WriteTo(writer, HtmlEncoder.Default);
        return writer.ToString();
    }

    public static HtmlString InlineStyleBlock(this IHtmlHelper helper, string path)
    {
        var builder = new TagBuilder("style");
        builder.Attributes.Add("type", "text/css");

        var physicalPath = "wwwroot/" + path; 
        if (File.Exists(physicalPath))
        {
            builder.InnerHtml.AppendHtml(File.ReadAllText(physicalPath));
        }

        return new HtmlString(GetString(builder));
    }

    public static HtmlString InlineScriptBlock(this IHtmlHelper helper, string path)
    {
        var builder = new TagBuilder("script");
        builder.Attributes.Add("type", "text/javascript");

        var physicalPath = "wwwroot/" + path;
        if (File.Exists(physicalPath))
        {
            builder.InnerHtml.AppendHtml(File.ReadAllText(physicalPath));
        }

        return new HtmlString(GetString(builder));
    }

this should embed or inline css/js in razor page/ html body. Works for dot net core

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号