asp.net mvc 3 - How to pass parameters to referenced javascript file from razor view

If i have such javascript in my razor veiw:

@{
    Grid grid = @Model.GetGridFromModel();

    Bool isSomething = @Model.GetSomething();

    Bool isSomethingMore  = @Model.GetSomehtingMore();

    Bool isSomethingElse = @Model.GetSomethingElse()

    int caseCount = 0;
 }  



$(document).ready(function () {    
    $("#tabs").tabs({
        show: function (event, ui) {        
            switch (ui.index) {
            @if (isSomething){
            <text>
                case @caseCount:                    

                    change('@grid.Avalue');

                    break;
            </text>
                caseCount++;
                }

            @if(isSomethingElse){
            <text>   
                case @caseCount:

                    change('@grid.Bvalue');
                    break;
            </text>
                caseCount++;
                }

            @if (isSomethingElseMore){
            <text> 
                case @caseCount:
                    change('@grid.Cvalue');
                    break;
                </text>                 
                }
            }
        }
    });

    funciton change(id)
    {
    //doing somehting;
    }

So i want to put that javascript in separate file and reference that file to my view, and the problem is how may i pass values from razor to javascript when javascript in separate file?

If i have such javascript in my razor veiw:

@{
    Grid grid = @Model.GetGridFromModel();

    Bool isSomething = @Model.GetSomething();

    Bool isSomethingMore  = @Model.GetSomehtingMore();

    Bool isSomethingElse = @Model.GetSomethingElse()

    int caseCount = 0;
 }  



$(document).ready(function () {    
    $("#tabs").tabs({
        show: function (event, ui) {        
            switch (ui.index) {
            @if (isSomething){
            <text>
                case @caseCount:                    

                    change('@grid.Avalue');

                    break;
            </text>
                caseCount++;
                }

            @if(isSomethingElse){
            <text>   
                case @caseCount:

                    change('@grid.Bvalue');
                    break;
            </text>
                caseCount++;
                }

            @if (isSomethingElseMore){
            <text> 
                case @caseCount:
                    change('@grid.Cvalue');
                    break;
                </text>                 
                }
            }
        }
    });

    funciton change(id)
    {
    //doing somehting;
    }

So i want to put that javascript in separate file and reference that file to my view, and the problem is how may i pass values from razor to javascript when javascript in separate file?

Share Improve this question asked Aug 21, 2011 at 11:41 Joper 8,21922 gold badges56 silver badges81 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

Javascript are files without being parsed by the piler, so, you have no chance...

What you can do however is to use a dynamic javascript, for example:

<script src="/CustomScripts/scripts.js"><script>

Have a route that says:

routes.MapRoute(
    "CustomScripts", "CustomScripts/{id}",
    new { controller = "Scripts", action = "GetFile" }
);

Create your controler and use a simple return View(); like

public ActionResult GetFile(string id)
{
    // use id as you please

    // pass any Model you want

    return View();
}

In that view, just put your javascript with Razor syntax.

Or you can use variables and load them up make the use of RenderSection()

in your _Layout.cshtml file add a section in your <head> before any other javascript

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    @RenderSection("script_variables", false)

    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>    
</head>

and in any View that you want to add such variables, just do:

@Section script_variables {

    <script type="text/javascript">

        var variableA = '@MyVarA',
            variableB = '@MyVarB',
            variableC = '@MyVarC';

    </script>

}

And all other files that you load the script will have such code...

You might declare some js-variables on your page and then use those variables from the .js-file

You might call a function inside your .js-file and send your data as arguments

(Please consider creating one object and fill with your data instead of creating multiple variables.)

Programmer puzzle solving

asp.net mvc 3 - How to pass parameters to referenced javascript file from razor view - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)