All geek questions in one place

How to host Javascript in an ASP.NET MVC view

I am really new to ASP.NET MVC and I am trying to integrate Javascript into a website that I am doing as a test of this technology.

My question is this: how can I embed Javascript code in a view?

Let's say that I start with the default ASP.NET template. In terms of “Views”, a master page, “Home” view, and “About” are created. The home view, called Index.aspx, is as follows:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> Home Page </asp:Content> <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <h2><%= Html.Encode(ViewData["Message"]) %></h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. </p> <p>Welcome to this testing site!</p> </asp:Content>

Adding the <script> here did not help. Where and how should I do this?

PS: I have a feeling that I am missing something very simple ... Thanks in advance!

+4
source share
4 answers

Go create an additional <asp:ContentPlaceHolder> inside the <head> your main page, and then your views will have a third <asp:Content> section to register external .js files, custom <script> blocks, external .css > and custom <style> blocks.

+1
source

One thing you might want to consider is adding to your main page a “script storage location” that loads scripts at the end of the body. This way, you load your scripts at the end of the page so as not to slow down the loading of DOM elements (after starting the loading of the script, only one request at a time, because the code can affect the DOM). This is a bit complicated with PartialView - if you include code, you need to figure out a way to delay the execution of something that relies on later scripts after loading these scripts. The trade-off may be to load things like jQuery into the header and the rest of your common scripts at the end of the body.

Site.Master

  <body> ... <asp:ContentPlaceHolder runat="server" id="MainContent"></asp:ContentPlaceHolder> ... <script type="text/javascript" src="<%= Url.Content( "~/scripts/jquery-1.4.1.min.js" ) %>"></script> <asp:ContentPlaceHolder runat="server" id="ScriptContent"></asp:ContentPlaceHolder> </body> </html>

View

  <asp:Content runat="server" ID="mainContent" ContentPlaceHolderID="MainContent"> ... HTML ... </asp:Content> <asp:Content runat="server" ID="scriptContent" ContentPlaceHolderID="ScriptContent"> <script type="text/javascript"> $(function() { $('.selector').click( function() { ... }); }); </script> </asp:Content>
+2
source

Just stumbled upon this question and would like to add a comment, which can be done in a more elegant way in Visual Studio 2013.

On the main page, simply enter the following code at the bottom of the page (on the main page created by default, this code already exists):

 <body> ... @RenderSection("scripts", required: false) </body> </html>

Then, in your opinion, the following code is at the bottom below:

 @section scripts { <script src="...script url..."></script> }

or if you use packages

 @section scripts { @Scripts.Render("~/bundles/<script id>") }

or you can put a <script> ... </script> section with your Javascript code in the @section script block in the view.

+2
source

The <script> must be inside the <asp:Content> block. (Otherwise, where would it end?)

+1
source

Source: https://habr.com/ru/post/1305817/

More articles:


All Articles