تسجيل جافا سكريبت بشكل صحيح في قوالب محرر MVC 2

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

سؤال

كيف يمكنني تسجيل كتل JavaScript بشكل صحيح في قالب محرر ASP.NET MVC 2 (RTM)؟

السيناريو المحدد الذي أنا فيه هو أنني أريد استخدامه Dynarch JScal2 DatetimePicker بالنسبة إلى منتقي DateTime القياسي ، ولكن هذا السؤال بشكل عام لأي حزمة JavaScript قابلة لإعادة الاستخدام. لديّ قالب الخاص بي يعمل بشكل صحيح الآن ولكن يحتوي على JS و CSS الخاص بي في صفحتي الرئيسية وأفضل فقط تضمين هذه الأشياء إذا كنت في حاجة إليها بالفعل:

<link rel="stylesheet" type="text/css" href="../../Content/JSCal2-1.7/jscal2.css" />
<link rel="stylesheet" type="text/css" href="../../Content/JSCal2-1.7/border-radius.css" />
<script type="text/javascript" src="../../Scripts/JSCal2-1.7/jscal2.js"></script>
<script type="text/javascript" src="../../Scripts/JSCal2-1.7/lang/en.js"></script>

من الواضح أنه يمكنني فقط وضع هذه الخطوط في القالب الخاص بي ، ولكن بعد ذلك ، إذا كان لدي شاشة تحتوي على 5 DateTimePickers ، فسيتم تكرار هذا المحتوى 5 مرات وهو ما لن يكون مثاليًا. على أي حال ، ما زلت أرغب في تشغيل قالب عرضي هذا الرمز الذي يتم وضعه في <head> من صفحتي.

على الرغم من أنه لا علاقة له تمامًا بطرفي هذا السؤال ، إلا أنني اعتقدت أنني سأشارك قالب هنا (حتى الآن) في حال كان مفيدًا بأي شكل من الأشكال:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DateTime>" %>

<%= Html.TextBoxFor(model => Model) %>
<input type="button" id="<%= ViewData.TemplateInfo.GetFullHtmlFieldId("cal-trigger") %>" value="..." />

<script type="text/javascript">
    var <%= ViewData.TemplateInfo.GetFullHtmlFieldId("cal") %> = Calendar.setup({
        trigger       : "<%= ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty) %>",
        inputField    : "<%= ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty) %>",
        onSelect      : function() { this.hide(); },
        showTime      : 12,
        selectionType : Calendar.SEL_SINGLE,
        dateFormat    : '%o/%e/%Y %l:%M %P'
    });
</script>
هل كانت مفيدة؟

المحلول

عادةً ما أقوم بإضافة عنصر نائب نصوص في صفحتي الرئيسية التي يتم تجاوزها بواسطة طرق العرض:

رئيس:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <asp:ContentPlaceHolder ID="Styles" runat="server" />
</head>
<body>
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    <script type="text/javascript" src="scriptAvailableToAllPages.js"></script>
    <asp:ContentPlaceHolder ID="Scripts" runat="server" />
</body>
</html>

رأي:

<%@ Page Language="C#" 
         MasterPageFile="~/Views/Shared/Site.Master" 
         Inherits="System.Web.Mvc.ViewPage<Ns.MyModel>" %>

<asp:Content ID="indexScripts" ContentPlaceHolderID="Scripts" runat="server">
    <script type="text/javascript" src="specific.js"></script>
</asp:Content>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm()) { %>
        <%= Html.EditorFor(x => x.Date1) %>
        <%= Html.EditorFor(x => x.Date2) %>
        <%= Html.EditorFor(x => x.Date3) %>
        <input type="submit" value="OK" />
    <% } %>
</asp:Content>

لاحظ كيفية تضمين قالب المحرر لثلاث خصائص مختلفة للنموذج ولكن يتم تضمين البرامج النصية المطلوبة مرة واحدة فقط.

نصائح أخرى

أقوم ببناء scritp بسيط إدارة هذا ، للأسف لم أفعل ذلك من أجل CSS تحقق من ASP.NET MVC Manager لتشمل ملفات JavaScript و CSS . لسوء الحظ ، لا يعمل الأمر بالنسبة لـ CSS ، بالنسبة لـ JavaScript ، لقد كان لديّ ببساطة في أسفل ملف Master ، ولكن يجب أن تكون CSS في علامة الرأس ، لم أجد طريقة حتى الآن للقيام بذلك ...

ولكن باستخدام ذلك تمكنت من الحصول على برنامج نصي في htmlhelper مخصص ، DatePicker الذي أستخدمه مع قالب dateTime.ascx.

ال Telerik Web Asset Manager يسمح لك بإنجاز ما تريد ومفتوح المصدر.

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