使用Linkbutton和C＃隱藏面板和javascript

我是一個新的程序員，所以任何幫助或建議，將不勝感激。使用Linkbutton和C＃隱藏面板和javascript

我有一個datalist包含顯示一行數據的鏈接按鈕。點擊鏈接按鈕時，應該取消隱藏包含數據列表（也包含鏈接按鈕）的面板，以顯示更詳細的信息。我遇到的問題是，當我點擊摘要鏈接按鈕時，它不會觸發JavaScript來隱藏或顯示詳細信息面板。我沒有得到任何例外，我的程序會建立並運行，所以我不確定爲什麼JavaScript不會觸發。僅供參考，DBClass和DbClass對象是內部類，它們工作正常。這裏是我的代碼：

using System; 
usingSystem.Collections; 
usingSystem.Configuration; 
usingSystem.Data; 
usingSystem.Linq; 
usingSystem.Web; 
usingSystem.Web.Security; 
usingSystem.Web.UI; 
usingSystem.Web.UI.HtmlControls; 
usingSystem.Web.UI.WebControls; 
usingSystem.Web.UI.WebControls.WebParts; 
usingSystem.Xml.Linq; 
usingDBClass; 


namespaceTimeLogging.pages 
{ 
    publicpartialclassdbEntry:System.Web.UI.Page 
    { 
    QueryClassqc=newQueryClass(); 

    protectedvoidPage_Load(objectsender,EventArgse) 
    { 
    bindDlReportProjSum_devSummary(); 
    } 

    //getsthelinkbuttonattributefortheemployeeidsothatitcanbeboundtothedatalist 
protectedvoiddlReportProjSum_devSummary_OnItemDataBound(objectsender,DataListItemEventArgse) 
{ 
    if(e.Item.ItemType == ListItemType.Item 
    || e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
    DataListnestedDataList=(DataList)e.Item.FindControl("dlReportProjSum_devDetail"); 
    LinkButtonlinkbtn=(LinkButton)e.Item.FindControl("lbReportProjSum_devSummary"); 
    bindDlReportProjSum_devDetail(nestedDataList,linkbtn.Attributes["empid"]); 
    //Panelpan=(Panel)e.Item.FindControl("panReportProjSum_devDetail"); 
    } 
} 

//hidesthedevedetailpanelonlinkbutttonclick 
protectedvoiddlReportProjSum_devSummary_OnItemCommand(objectsender,DataListCommandEventArgse){ 

LinkButtonlb=(LinkButton)e.Item.FindControl("lbReportProjSum_devSummary"); 
Panelpan=(Panel)e.Item.FindControl("panReportProjSum_devDetail"); 
} 

//thedatalistthatshowsasummaryofeachemployeewhohasworkedonaproject 
protectedvoidbindDlReportProjSum_devSummary(){ 
DbClassdb=newDbClass(); 
DataTabledt=newDataTable(); 
[email protected]"selectname,empid,sum(actualtime)astotal 
fromTime_logging_vwProjDevDetail 
whereprojid=1 
groupbyempid,name"; 
db.OpenConnection(); 
db.Execute(sqlString); 
dt=db.GetData.Table; 
dlReportProjSum_devSummary.DataSource=dt; 
dlReportProjSum_devSummary.DataBind(); 
db.CloseConnection(); 
db.Dispose(); 
} 



//bindthenesteddatalistinthedevSummaryOnItemDataBoundevent 
privatevoidbindDlReportProjSum_devDetail(DataListdl,stringdevEmpid) 
{ 
DbClassdb=newDbClass(); 
DataTabledt=newDataTable(); 
stringsqlString=string.Format(@"selectDAYOF,ESTTIME,ACTUALTIME,NOTES,TASK 
fromtime_logging_resourceswhere 
projid=1andempid={0}",devEmpid); 
db.OpenConnection(); 
db.Execute(sqlString); 
dt=db.GetData.Table; 
dl.DataSource=dt; 
dl.DataBind(); 

db.CloseConnection(); 
db.Dispose(); 
} 



////whenthedeveloperssummaryoftotalhoursonaprojectisclicked 
protectedvoidlbReportProjSum_devSummary_Click(objectsender,EventArgse) 
{ 
ClientScript.RegisterStartupScript(GetType(),"Javascript","HidePanel()",true); 

} 

} 
} 

ASPXpage//////////////////////////////////////////////////////////////////////////////// 


<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="dbEntry.aspx.cs"Inherits="TimeLogging.pages.dbEntry"%> 

<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="asp"%> 

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<headrunat="server"> 
<title>UntitledPage</title> 
<linkhref="../css/Main.css"rel="stylesheet"type="text/css"/> 

<scripttype="text/javascript"language="javascript"> 
functionHidePanel() 
{ 
alert("hello"); 
varpanel=document.getElementById('panReportProjSum_devDetail'); 
if(panel.style.display=='none') 
{ 
panel.style.display='block'; 
} 
else 
{ 
panel.style.display='none'; 
} 
} 
</script> 

</head> 
<body> 
<formid="form1"runat="server"> 

<asp:ToolkitScriptManagerID="ToolkitScriptManager1"runat="server"> 
</asp:ToolkitScriptManager> 
<div> 
<asp:PanelID="panMainReportsHolder"runat="server"> 

<asp:DataListID="dlReportProjSum_devSummary"runat="server"RepeatDirection="Vertical" 
ShowFooter="False"ShowHeader="False"OnItemDataBound="dlReportProjSum_devSummary_OnItemDataBound" 
OnItemCommand="dlReportProjSum_devSummary_OnItemCommand"> 
<HeaderTemplate> 
</HeaderTemplate> 
<ItemTemplate> 
<div> 
<asp:LinkButtonID="lbReportProjSum_devSummary"OnClick="lbReportProjSum_devSummary_Click" 
runat="server"empid='<%#DataBinder.Eval(Container.DataItem,"empid")%>'name='<%#DataBinder.Eval(Container.DataItem,"name")%>' 
total='<%#DataBinder.Eval(Container.DataItem,"total")%>'CssClass="developerSummaryLinkButton"><%#DataBinder.Eval(Container.DataItem,"name")%>'stotalhoursspentdevelopingtheproject:<%#DataBinder.Eval(Container.DataItem,"total")%> 

</asp:LinkButton> 

<asp:PanelID="panReportProjSum_devDetail"runat="server"> 

<asp:DataListID="dlReportProjSum_devDetail"runat="server"RepeatDirection="Vertical" 
ShowFooter="False"ShowHeader="False"> 
<HeaderTemplate> 
</HeaderTemplate> 
<ItemTemplate> 
<div> 
<asp:LinkButtonID="LinkButton1"CssClass="developerDetailLinkButton"runat="server" 
Enabled="false">Dateworked:<%#DataBinder.Eval(Container.DataItem,"dayof")%>task:<%#DataBinder.Eval(Container.DataItem,"task")%>numberofhoursworked:<%#DataBinder.Eval(Container.DataItem,"actualtime")%>anynotes:<%#DataBinder.Eval(Container.DataItem,"notes")%> 
</asp:LinkButton> 
</div> 
</ItemTemplate> 
<FooterTemplate> 
</FooterTemplate> 
</asp:DataList> 
</asp:Panel> 


</div> 
</ItemTemplate> 
<FooterTemplate> 
</FooterTemplate> 
</asp:DataList> 
</asp:Panel> 
</div> 
</form> 
</body> 
</html>

來源

2012-10-26 katyholb

你需要連接你的Linkbutton1來觸發Javascript事件。您可以使用的OnClientClick屬性像這樣做：

<asp:LinkButtonID="LinkButton1"CssClass="developerDetailLinkButton"runat="server" Enabled="false" onclientclick="HidePanel();return false;"/>

將返回false防止它調用設置的onclick（如果有的話），服務器端事件。

瞭解更多關於這裏的OnClientClick的答覆，約翰MC enter link description here

來源

2012-10-26 13:51:16

感謝。我試了一下，它確實讓我的JavaScript火。現在的問題是JavaScript無法找到面板對象。該面板位於數據列表中，我相信對JavaScript的調用必須來自後面的代碼，因爲該面板只能在綁定數據列表之前和期間訪問。我需要找出爲什麼linkbutton的「OnCick」事件不會觸發JavaScript，但我不明白頁面的生命週期，並且控制得足夠好，以便進行調試。 – katyholb

根據.NET版本和其他設置，'panReportProjSum_devDetail'可能不是您需要使用的客戶端ID（早期版本的.NET在ID之前添加'ct100_'之類的內容以避免命名衝突）。相反，在HidePanel（）函數中，您可能想要嘗試如下所示：varpanel = document.getElementById（'<％= panReportProjSum_devDetail.ClientID％>'）; – psantiago

爲什麼你需要使用Javascript來隱藏面板？你能不能在頁面加載時執行此操作（PreRender事件）？你可以在後面的代碼中以編程方式設置style = display：none。不要使用Visible = false –

使用Linkbutton和C＃隱藏面板和javascript

回答

相關問題