在MVC 2編輯器模板中正確註冊JavaScript和CSS

如何在ASP.NET MVC 2（RTM）編輯器模板中正確註冊JavaScript塊？在MVC 2編輯器模板中正確註冊JavaScript和CSS

我所處的特定場景是我想爲我的標準日期時間選擇器使用Dynarch JSCal2 DateTimePicker，但這個問題通常是針對任何可重用的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個DateTimePicker的屏幕，那麼這個內容將被重複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>

來源

2010-03-27 Jaxidian

截至目前，我只是將所有可能的資源添加到我的母版頁。我不想管理整個資源，但管理仍處於錯誤的地方。 – Jaxidian 2010-03-29 13:26:02

相關問題： http://stackoverflow.com/questions/2877927 – 2010-05-24 20:23:53

相關問題： http://stackoverflow.com/questions/2852928 – 2010-05-24 20:24:30

我通常添加腳本佔位符在我的母版頁由觀點重寫：

站長：

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

請注意編輯器模板是如何包含模型的三個不同屬性，但所需的腳本只包含一次。

來源

2010-03-27 19:33:39

有道理，但我的編輯器模板將如何鉤入？ – Jaxidian 2010-03-27 19:34:33

編輯器模板依靠一些腳本模塊/插件包含在頁面中。在你的情況下，我猜這個腳本包含'Calendar.setup'函數。主視圖需要注意包含這個腳本。在我提供的示例中，所有腳本都包含在頁面末尾（請參閱主文件），但是如果您願意，可以將它們移動到「head」部分。 – 2010-03-27 19:38:22

儘管如此，我不希望我的觀點必須處理這些腳本。我希望我的視圖完全不關心我的模板實現。我的計劃是使用這個非理想的JavaScript「控件」，直到我有一個更好的基於JQuery或MVC的「控件」用作我的datetimepicker。到了那個時候，我不想編輯除這個編輯器模板以外的任何文件。 SOC是這裏的目標 - 我的觀點不應該需要知道我的模板依賴於什麼js文件。 – Jaxidian 2010-03-27 19:44:27

我建立一個簡單的scritp管理處理這個，很遺憾我沒有做它的CSS檢查Asp.Net MVC Manager for javascript include and Css files。不幸的是，它不能正常工作的CSS，因爲JavaScript我只是把它們放在我的主文件的底部，但CSS必須在頭標籤中，我還沒有找到辦法做到這一點......

但是使用它我已經能夠在一個自定義的HtmlHelper中使用腳本，DatePicker與模板DateTime.ascx一起使用。

來源

2010-03-29 02:20:00

感謝這個信息！這聽起來像你想要做我想做的事。我會研究這一點，並分享我可能有的任何改進。 – Jaxidian 2010-03-29 10:44:42

試過這個之後，我根本無法讓CSSManager正常工作，我也沒有看到它是如何實現的。 – Jaxidian 2010-03-29 13:24:14

這就是我在我的回覆中所說的，它對於CSS來說更加複雜......而且我沒有在我的代碼中這樣做，它只在將它添加到視圖的標題標記中時才起作用 – 2010-03-29 17:12:21

telerik web asset manager允許你完成你想要的並且是開源的。

來源

2010-07-15 22:48:53

不錯！謝謝！ – Jaxidian 2010-07-16 16:03:45

在MVC 2編輯器模板中正確註冊JavaScript和CSS

回答

相關問題