كيفية وضع JavaScript في عرض ASP.NET MVC

StackOverflow https://stackoverflow.com/questions/2564548

سؤال

أنا جديد حقًا على ASP.NET MVC ، وأحاول دمج بعض JavaScript في موقع ويب أقوم به كاختبار لهذه التكنولوجيا.

سؤالي هو: كيف يمكنني إدراج رمز JavaScript في طريقة عرض؟

دعنا نقول أنني أبدأ مع قالب ASP.NET MVC الافتراضي. من حيث المشاهدات ، هذا ينشئ صفحة رئيسية ، عرض "الصفحة الرئيسية" ، و "حول" حول ". تشكل عرض "الصفحة الرئيسية" ، المسمى index.aspx ، هكذا:

<%@ 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>

إضافة أ <script> علامة هنا لم تنجح. أين وكيف أفعل ذلك؟

ملاحظة: لدي شعور بأنني أفتقد شيئًا أساسيًا جدًا ... شكرًا مقدمًا!

هل كانت مفيدة؟

المحلول

اذهب لإنشاء إضافي <asp:ContentPlaceHolder> داخل <head> من Masterpage الخاص بك وبعد ذلك سوف يكون وجهات نظرك ثلث <asp:Content> قسم لتسجيله خارجي .js الملفات ، مخصصة <script> كتل ، خارجي .css الملفات والعرف <style> كتل.

نصائح أخرى

شيء واحد قد ترغب في التفكير فيه هو إضافة حامل محتوى "البرامج النصية" إلى صفحتك الرئيسية ، التي تقوم بتحميل البرامج النصية في نهاية الجسم. وبهذه الطريقة ، تقوم بتحميل البرامج النصية الخاصة بك في نهاية الصفحة بحيث لا تبطئ تحميل عناصر DOM (بمجرد أن يبدأ البرنامج النصي في تحميله فقط يقوم بطلب واحد في كل مرة ، لأن الرمز يمكن أن يؤثر على DOM). هذا يصبح صعبًا بعض الشيء مع PartialView - إذا قمت بتضمين رمز فيها ، فيجب عليك اكتشاف طريقة لتأخير تنفيذ أي شيء يعتمد على البرامج النصية اللاحقة بعد تحميل هذه البرامج النصية. قد يكون التسوية هو تحميل أشياء مثل jQuery في الرأس وبقية البرامج النصية المشتركة في نهاية الجسم.

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>

رأي

  <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>

تعثرت للتو في هذا السؤال وأرغب في إضافة تعليق أنه في Visual Studio 2013 يمكن القيام به بطريقة أكثر أناقة.

في صفحتك الرئيسية ، ضع الكود التالي في أسفل الصفحة (في الصفحة الرئيسية التي تم إنشاؤها الافتراضي هذا الرمز موجود بالفعل):

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

ثم في عرضك فقط في أسفل الرمز التالي:

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

أو إذا كنت تستخدم حزم

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

أو يمكنك وضع ملف u003Cscript>...u003C/script> قسم مع رمز javaScript الخاص بك في كتلة البرامج النصية cection في العرض.

ال <script> يجب أن تذهب العلامة داخل <asp:Content> منع. (وإلا ، أين سينتهي الأمر؟)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top