current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

So I'm trying to create a custom editor so that for a DataType of "Duration" a textbox appears with a masked format of HH:MM:SS.

I've created a very simple piece of code so far 

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "duration" })

<script>
    $(document).ready(function () {
        $("#@Html.NameFor(c => c)").mask("00:00:00");
    });
</script>

This is in my ~/Views/Shared/EditorTemplates/Duration.cshtml file. However it requires an additional javascript to be loaded (maskedInput.js).

Is there any razor includes I can use here so that I can include the maskedInput.js file once and only once in a page load. I realise I could add it to the parent page the editor will be on (but that would require knowing every page where this editor is used). I could add it to the master layout view but this would mean overhead for the pages that don't use this editor.

So I suppose in summary all I'm asking is :- "Is there a way to include a javascript file once and only once from a EditorTemplate".

share|improve this question
    
i would add it to the pages which uses this editor template. –  Shyju Jun 28 '13 at 13:13
    
Would it make sense to load the script dynamically (with js/jquery)? You can search for the <script> tag with the matching source to see if you need to load it. Just brainstorming. –  Gray Jun 28 '13 at 13:29
    
You can study how they did it at orchard project: orchard.codeplex.com/SourceControl/latest#src/Orchard/UI/… –  0lukasz0 Jun 28 '13 at 13:51

3 Answers 3

up vote 0 down vote

Well, you can do following:

Add @RenderSection("MaskedInput", false) to your master layout. That'l render

@section MaskedInput{}

on each page that has that section;

On a page you need to add maskedInput.js you put:

@section MaskedInput
{
    @*Include scripts, styles or whatever you need here*@
}
share|improve this answer
    
But can you do this at a EditorTemplate level (i.e a partial view) and only have it included once? –  John Mitchell Jun 28 '13 at 13:19
    
No, but you can add it to page that uses partial view/editor template, which would be better than adding it each time on requesting partial view –  Sergio Jun 28 '13 at 13:21
1  
Yeah but this would mean I need to know all the pages that its used on ;) that’s what I am trying to avoid. I'm trying to make it only get called form pages that use this editor without me having to manually edit all the parent pages. –  John Mitchell Jun 28 '13 at 13:24
up vote 0 down vote

You can create singleton class with Dictionary property whic will store scripts from your custom helpers/templates. In your templates you can call method, that put script in singleton dictionary property with some string key. In that method you can prevent adding scripts with same keys.

Finally you should to write a render action for rendering scripts from dictionary and call this action from your master layout.

Here you can find solution similar to mine:

Managing Scripts for Razor Partial Views and Templates in ASP.NET MVC

share|improve this answer
up vote 2 down vote

I wrote a nuget package exactly for this purpose and wrote the blog post that YD1m has referred to.

To use the package, first thing you need to do is add a call to Html.RenderScripts() somewhere in your layout so that all of the script file references and blocks added using the helpers during the rendering of a Razor view are outputted in the response. The typical place to put this call is after the core scripts in your top level layout. Here's an example layout:

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>       
        @RenderBody()           
        <script src="~/Scripts/jquery-2.0.2.js"></script>
        @* Call just after the core scripts in the top level layout *@
        @Html.RenderScripts()    
    </body>
</html>

If you're using the Microsoft ASP.NET Web Optimization framework, you can use the overload of Html.RenderScripts() to use the Scripts.Render() method as the function for generating scripts:

@Html.RenderScripts(Scripts.Render)

With that done, now all you need to do in your editor template is use the helpers in the nuget package to add a reference to the script and add your code block

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "duration" })

@using (Html.BeginScriptContext())
{
    Html.AddScriptFile("~/Scripts/maskedInput.js");
    Html.AddScriptBlock(
        @<script>
            $(document).ready(function () {
                $("#@Html.NameFor(c => c)").mask("00:00:00");
            });
        </script>);
}

The referenced script file will only be added once to the page and all of the script blocks will be written out at the end of Html.RenderScripts() call.

Using the helpers, you can add script files and script blocks in Views, Partial Views and Editor/Display Templates. Note that the current version (1.1.0.0) will not render out scripts using the helpers when called via AJAX but this is something that I'm looking to add in the next version.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.