将 javascript/css从子页面作为用户控件包含到母版页中

分享于 

10分钟阅读

Web开发

  繁體
JsUserControl.jpg

介绍

本文讨论了将JavaScript和CSS样式包含在母版页的主页部分中的问题。 在处理这个问题的文章和文章中,目前作者还没有找到一个令人满意的解决方案来处理将'客户端 id'传递到包含的JavaScript文件。 这里解决的另一个问题是能够对包含的脚本有语法突出显示。

Background

已经知,有许多方法将JavaScript包含到母版页的head 部分。 这可以很容易地完成,换句话说,使用股票'RegisterClientScriptInclude','RegisterStartupScript'或者'RegisterClientScriptBlock'方法。 最后两个的缺点是,必须从代码 behind 作为纯字符串,而不用语法突出显示。 虽然我们对'RegisterClientScriptInclude'方法中包含的脚本处理语法突出显示,但我们不能将客户端to传递给它。 Rick Strahl处理 [' http://www.west-wind.com/weblog/posts/252178.aspx'] 中传递客户端id的问题。 还有一个 CodeProject [ http://www.codeproject.com/KB/aspnet/resource_files_in_asp_net.aspx?display=Print ]的文章,它试图通过将JavaScript存储在资源文件中来解决这个问题。 [ http://www.dougv.com/blog/2010/02/17/dynamically-adding-javascript-to-your-asp-net-master-page-from-a-child-page/] 回顾了这个问题的常见方法,并提出了解决方案。

我的解决方案

本文的作者提出了解决以下问题的解决方案:

  • 将JavaScript和CSS放在 head 部分或者右侧 上面 中,从子页中关闭母版页的<form> 标记
  • JavaScript和CSS语法突出显示包含的脚本
  • 作为强类型属性传递的客户端 id
通过使用保存JavaScript和CSS的用户控件,这三个特性都得到了。 用户控件可以从子页动态加载到任何主占位符页中。 我们通过控件属性的public 将客户端id传递给 JavaScript。 如果占位符放置在 head 部分,我们将实现'RegisterClientScriptInclude'和'RegisterClientScriptBlock'方法的等价。 如果放置在 上面的<form> 标签中,我们将模拟'RegisterStartupScript'方法的功能。

了解代码

样例应用程序演示了如何用四种不同的方式包含JavaScript和 CSS:

  • 在子页" default.aspx"中将 JavaScript/CSS 包括到母版页" Master.master"( 就在关闭 <form> 标记之前)。 这与" RegisterStartupScript"方法等价。
  • 从子页" default.aspx"中将 JavaScript/CSS 包括到母版页" Master.master"( 到 head 部分)。 这与下面的" RegisterClientScriptBlock/RegisterClientScriptInclude "方法"
  • 包括从子页中包含的web控件" WebControl.cs"中的JavaScript/CSS 到母版页" Master.master"( 到 head 部分)。 这与下面的" RegisterStartupBlock/RegisterClientScriptInclude "方法"
  • 从子页中包含的用户控件" WebUserControl.ascx"中包括 javascript/css到母版页" Master.master"( 到 head 部分)。 这与下面的" RegisterStartupBlock/RegisterClientScriptInclude "方法"。

在这四种情况下,我们有输入。 包含在第一种情况下的JavaScript 比如 用户负责读取表单内容并在屏幕上显示它。 通过属性将输入字段id传递给控件。 表单的样式完成,包括 inside 还包括" CtrWithJs.ascx"控件。

使用代码

代码的使用非常简单。 " default.aspx"页面动态加载两个用户控件" CtrWithJs2.ascx"和" CtrWithJs.ascx",其中包含 javascript/css到" Master.master"页面。 这是在子" default.aspx"页面的" Page_PreRender"中完成的。 在前一个控件中,我们加载" CtrWithJs2.ascx 进入" ContentPlaceHolder2"在结束 <form> 标记之前,将后者直接放入主页页眉部分的页面中" runat"属性。 我们可以看到所有的"客户端 id"都是通过。

protectedvoid Page_PreRender(object sender, EventArgs e)
{
 var ctrlWithJs = (CtrWithJs)LoadControl("CtrWithJs.ascx");
 var ctrlWithJs2 = (CtrWithJs2)LoadControl("CtrWithJs2.ascx");
 ctrlWithJs.textBox1Id = txt1.ClientID;
 ctrlWithJs.textBox2Id = txt2.ClientID;
 ctrlWithJs2.textBox3Id = txt3.ClientID;
 ctrlWithJs2.textBox4Id = txt4.ClientID;
 Master.Page.Header.Controls.Add(ctrlWithJs);
 var bottomPl = (ContentPlaceHolder)Master.FindControl("ContentPlaceHolder2");
 bottomPl.Controls.Add(ctrlWithJs2);
}

有时,我们可以在页面上使用用户控件 比如" WebUserControl.ascx"。 这种情况下,用户控件动态加载容器用户控件" CtrWithJs4.ascx"到母版页的节,换句话说,:

protectedvoid Page_PreRender(object sender, EventArgs e)
{
 var ctrlWithJs4 = (CtrWithJs4)LoadControl("CtrWithJs4.ascx");
 ctrlWithJs4.textBox11Id = WebUserControltxt1.ClientID;
 ctrlWithJs4.textBox12Id = WebUserControltxt2.ClientID;
 Page.Master.Page.Header.Controls.Add(ctrlWithJs4);
}

如果我们想使用一个web控件 换句话说," WebControl.cs"来加载它自己的javascript/css? 这种方法几乎是一样的。

protectedoverridevoid OnPreRender(EventArgs e)
{
 base.OnPreRender(e);
 Control ctrlWithJs3 = Page.LoadControl("CtrWithJs3.ascx");
 ((IClientIdInterface3)ctrlWithJs3).textBox1Id = txtBox1.ClientID;
 ((IClientIdInterface3)ctrlWithJs3).textBox2Id = txtBox2.ClientID;
 Page.Master.Page.Header.Controls.Add(ctrlWithJs3);
}

我们可以看到,我们在如何将客户端传递到 javascript/css容器控件" CtrWithJs3.ascx"时会发生微小的变化。 为了实现这个目标,容器用户控件实现了接口" IClientIdInterface3",

publicinterface IClientIdInterface3
{
 string textBox1Id { get; set; }
 string textBox2Id { get; set; }
}

仅包含用于传递客户端id的string 属性,

using System;publicpartialclass CtrWithJs3 : System.Web.UI.UserControl, IClientIdInterface3
{
 publicstring textBox1Id { get; set; }
 publicstring textBox2Id { get; set; }
}

容器用户控件保存语法高亮显示的javascript/css:

<%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="CtrWithJs3.ascx.cs"Inherits="CtrWithJs3"%><scripttype="text/javascript">functionReadTTxt5(){varinputParam= '<%=textBox1Id%>';alert(document.getElementById(inputParam).value);}functionReadTTxt6(){varinputParam= '<%=textBox2Id%>>';alert(document.getElementById(inputParam).value);}</script><linkrel="Stylesheet"href="StyleSheet3.css"title="Contemporary"/>

javascript/css缓存

为了利用浏览器的javascript/css缓存,我们可以按如下方式重写 上面 " ctrwithjs3.ascx"容器用户控件,

<%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="CtrWithJs3.ascx.cs"Inherits="CtrWithJs3"%><scripttype="text/javascript">varinputParam5= '<%=textBox1Id%>';varinputParam6= '<%=textBox2Id%>';</script><scripttype="text/javascript"src="WebUserConrolScript.js"></script><linkrel="Stylesheet"href="StyleSheet3.css"title="Contemporary"/>
其中" webuserconrolscript.js"有表格
function ReadTTxt5() {
 alert(document.getElementById(inputParam5).value);
}function ReadTTxt6() {
 alert(document.getElementById(inputParam6).value);
}
将被浏览器缓存。 "stylesheet3。css stylesheet样式表也将被缓存。

结语

如" background"部分所述,在许多互联网论坛中处理的问题已经解决了无数次。 本文的作者发现惟一的是使用用户控件作为JavaScript和CSS的容器。 通过这样做,我们有一个语法突出显示,以及可以通过强类型属性传递客户端 as。 我们在这里展示了这可以从子页面上的用户控件。用户页面上使用的web控件完成。 浏览器也缓存了包含的javascript文件和CSS样式。

历史记录

  • 第十一 2010年04月: 初始版本
  • 22nd 2010年04月: 添加javascript缓存功能

JAVA  Javascript  控制  USE  用户  Master  
相关文章