Registrando corretamente JavaScript e CSS em modelos de editor MVC 2

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

Pergunta

Como registro corretamente os blocos JavaScript em um modelo de editor ASP.NET MVC 2 (RTM)?

O cenário específico em que estou é que quero usar Dynarch JSCAL2 DATETIMEPICKER Para o meu seletor de dados padrão, mas essa pergunta é em geral para qualquer pacote JavaScript reutilizável. Eu tenho meu modelo funcionando corretamente agora, mas ele tem meu JS e CSS inclui na minha página mestre e eu prefiro apenas incluir essas coisas se eu realmente precisar delas:

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

Então, obviamente, eu poderia apenas colocar essas linhas no meu modelo, mas se eu tiver uma tela com 5 datetimepickers, esse conteúdo seria duplicado 5 vezes que não seria o ideal. De qualquer forma, eu ainda quero o modelo da minha visão para acionar esse código colocado no <head> da minha página.

Embora não esteja completamente relacionado a fazer essa pergunta, pensei em compartilhar meu modelo aqui (até agora), caso seja útil: de alguma forma:

<%@ 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>
Foi útil?

Solução

Normalmente, adiciono um espaço reservado para script na minha página mestre que é substituída pelas visualizações:

Mestre:

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

Visão:

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

Observe como o modelo do editor está incluído para três propriedades diferentes do modelo, mas os scripts necessários estão incluídos apenas uma vez.

Outras dicas

Eu construo um scritp simples, consigo lidar com isso, infelizmente não o fiz para o CSS, confira ASP.NET MVC Manager para JavaScript Incluir e Arquivos CSS . Infelizmente, não está funcionando para o CSS, para JavaScript, eu simplesmente os tive no fundo do meu arquivo mestre, mas o CSS deve estar na etiqueta da cabeça, não encontrei uma maneira de fazer isso ...

Mas, usando isso, pude ter script em um htmlhelper personalizado, datepicker que eu uso com um modelo datetime.ascx.

o Telerik Web Asset Manager Permite que você realize o que deseja e é de código aberto.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top