在前台获取套用了MasterPage后页面中的后台控件

我们知道如果页面套用了MasterPage页, 并且页面中含有Asp控件, 同时,我们又想在前台获取到此控件并对其做一些操作, 那么在获取的过程中, 通过一般的DOM方式document.getElementById()方法对其进行操作时, 找到Asp控件的Id是一个很麻烦的事情;

下面我们就来说一下如何在这种情况下获取控件的id;

 

在这里我们需要说明的是: 如果是一个页面对一个后台页面的Asp开发模式是不需要这样做的;

 

在页面中,我们可能需要同时是用Html控件可Asp控件, 典型的实例在于页面进行回调时, 使用Html控件对服务器及页面响应速度会有显著的提高, 但有时一些Html控件可能无法实现一些Asp控件的功能, 此时就需要我们同时使用一些Asp控件去实现必要的功能;

 

那么我们可以这样做:

在前台正常使用Html控件, 在需要Asp控件时, 添加Asp控件,但要注意:

    Asp控件有一个特点, 就是在申明时需要加一个runat="server"属性;

下面是一段实例代码:

 <div> <asp:FileUpload ID="FileUploadControl" runat="server" /> <input type="button" οnclick="UpLoad()" value="UpLoad" /> </div>

在后台页面中, 我们需要同样申明一个FileUpload类型的控件,一般我会这样做:

private FileUpload mFileUploadControl; public FileUpload FileUploadControl { set { mFileUploadControl = value; } get { return mFileUploadControl; } }

在组件加载时,就会同前台的页面初始化这个对象,

 

那么在前台的JavaScript中我们如果想去获得这个对象就需要这样做:

var obj = document.getElementById("<%=FileUploadControl.ClientID%>");

因为Asp.Net在MasterPage中的控件Id分配时不定的, 如果有兴趣的读者可以使用IE8的Developer Tool调试一些,会发现它的Id有可能是这样的:

    ctl00_ContentPlaceHolder1_FileUploadControl;

这里"ctl00_ContentPlaceHolder1_"是不定的,会根据你使用的ContentPlaceHolderId的改变和MasterPage的改变而改变;