How to call javascript in MVC3 pattern

Question

I'm new to the ASP.NET MVC 3 pattern and I want to call a JavaScript function in view (or controller), to display the result in a div or span object.

My solution

I create a new ASP MVC3 Solution (using Razor)
Add a new JavaScript in Script folder
Add a simple script function in the new JavaScript file, like this:
```
function HolaMundo(){
return "hola desde javascript";
}
```

Add a reference from the JavaScript in the index.csHTML file from my default controller.

@section JavaScript
{
    <script src="@Url.Content("~/Scripts/Maps.Helper.js")" type="text/javascript">  
    </script>
}

Finally add a call for the function:

<p>
    <div id="map_canvas2" style = "width:100%; height:100%">
        result from Javascript
    </div>
</p>
<script type="text/javascript">
    $(document).ready(function() {
     <text>
    $('#map_canvas2').text(HolaMundo());
     </text>
    });
</script>

Result

Doesn't work

So, can any help me? I appreciate your help.

Welcome to StackOverflow Raymundo, I've edited your post to use lists and code blocks, you should be able to do this in the future, and it greatly improves the readability of your post, and allows users to provide better quality answers. — Brian Deragon
– Brian Deragon, Commented Nov 22, 2011 at 20:11
@Raymundo I'd bet there is a javascript error occuring somewhere that will help you debug the problem. If you are using Chrome you can find the javascript console (CNTR-SHIFT-I). If you are using FireFox then use the developer tools in the menu (not sure where they are). I also think IE has similar javascript debugging. Try that and post your error here to improve your question. — kingdango
– kingdango, Commented Nov 22, 2011 at 20:14

Darin Dimitrov · Accepted Answer · 2011-11-22 18:17:14Z

2

You should remove the <text> tags from your script so that the view looks like this:

<p>
    <div id="map_canvas2" style = "width:100%; height:100%">
        result from Javascript
    </div>
</p>

<script type="text/javascript">
    $(document).ready(function() {
        $('#map_canvas2').text(HolaMundo());
    });
</script>

The <text> tag is used by the Razor interpreter to indicate a literal value to be rendered as-is without processing. It's useful when you are mixing server side code with client side markup or script. For example:

<script type="text/javascript">
    $(document).ready(function() {
        @if (Model.IsFooBar)
        {
            <text>$('#map_canvas2').text(HolaMundo());</text>
        }
    });
</script>

Also make sure that the section that you have defined in your Index.cshtml view:

@section JavaScript
{
    <script src="@Url.Content("~/Scripts/Maps.Helper.js")" type="text/javascript"></script>
}

you should make sure that is registered in your _Layout.cshtml somewhere. For example in the <head>. Also make sure that you have included the jQuery script to your page:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    @RenderSection("JavaScript")
</head>
...

or even better before the closing </body> tag which is where it is recommended to place scripts to avoid blocking the browser loading the DOM while fetching them:

    ...
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    @RenderSection("JavaScript")
</body>
</html>

edited Nov 22, 2011 at 18:17

answered Nov 22, 2011 at 18:11

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raymundo Chavez Over a year ago

Thank you very much Darin, i have more clarity now, My problem was resoved, i have a error in my JS but i can see under Kingdago show me the shortcut for the javascript console. I'm very grateful to you. =D

Collectives™ on Stack Overflow

How to call javascript in MVC3 pattern

My solution

Result

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My solution

Result

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related