![](/img/trans.png)
[英]How to properly reference javascript files in to asp.net master page?
[英]trying to reference javascript from asp.net
我在ASP.net和C#中有一個網頁(如果有幫助的話,我正在使用Visual Studio 2010),我想在按鈕單擊事件之后得到一個模式彈出框。 我無法使用AJAX,因為不允許在服務器上安裝擴展程序...因此,我嘗試了yensdesign提供的javascript方法。
我的問題是我設置的按鈕沒有任何作用...我猜是因為我是從asp.net網頁而不是標准html調用此按鈕,所以我需要做一些額外的事情,但是谷歌搜索的一天,問我認識的每個人,但反復試驗沒有產生任何結果,所以我在這里...
我的“腳本”文件夾中有以下文件,名為popupAdminTasks.js:
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup()
{
//loads popup only if it is disabled
if (popupStatus == 0) {
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup()
{
//disables popup only if it is enabled
if (popupStatus == 1) {
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup()
{
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function () {
//LOADING POPUP
//Click the button event!
$("#btnViewTimesheet").click(function () {
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupBtnClose").click(function () {
disablePopup();
});
//Click out event!
$("#backgroundPopupAdminTasks").click(function () {
disablePopup();
});
//Press Escape event!
$(document).keypress(function (e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
});
太好了。 然后,我有一個css文件,其中包含所有正常的內容,附加內容位於底部,如下所示:
/* POPUP BOX
----------------------------------------------------------*/
#backgroundPopup
{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupAdminTasks
{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupAdminTasks h1
{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupBtnClose
{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#btnViewTimesheet
{
margin:100px;
}
精彩。 所以現在我們來看看實際的aspx文件...嗯,這有點棘手,因為顯然我不只是在做一個測試項目,所以我沒有head部分,而是headhead部分,等等...無論如何,這是有關的位和鮑勃:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link rel="stylesheet" href="../Styles/AdminPage.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/popupAdminTasks.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="btnViewTimesheet">
<input type="submit" value="View/Edit Timesheet" />
</div>
<div id="popupAdminTasks" runat="server">
<a id="popupBtnClose">X</a>
<h1>What would you like to do?</h1>
<p id="popupAdminTasksBody">
<asp:ImageButton ID="imgBtnCalendar" runat="server" Height="70px" Width="65px"
ImageUrl="~/Images/calendar.png" AlternateText="View/Edit Timesheet" />
</p>
</div>
<div id="backgroundPopupAdminTasks">
</div>
</asp:Content>
所以...這一切都沒有錯誤,但我按了btnViewTimesheet
按鈕btnViewTimesheet
什么也沒發生...有什么想法? 我一直在想的是,我在C#代碼中沒有一個單擊事件,並且我本以為我需要這個事件,並指向該事件中的js代碼,但我讀過的所有內容以及我所擁有的人說來告訴我,不,我不需要這個,因為javascript應該這樣做。
我無法使用AJAX,因為不允許在服務器上安裝擴展程序...
沒有在任何服務器上安裝AJAX。 它只是Javascript。 我多年來沒有使用過ASP.Net AJAX擴展,因此我忘記了是否甚至需要完全安裝或只是bin部署。 無論如何,利用“ Ajax”並不依賴於任何擴展名/庫-它們使事情變得容易,但並非“必需”。
id
用於<div />
而不是輸入 <input />
是一個提交,盡管您仍然可以使用它,請嘗試按一個按鈕以使事情變得更容易 如果您執行以下操作會怎樣?
<asp:button runat="server" text="Click Me" OnClientClick="javascript:loadPopup()" id="myButton"></asp:button>
問題是您的jQuery選擇器中的元素ID錯誤。
您應該將backgroundPopup
更改為popupAdminTasks
,將popupContact
更改為其他內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.