我的目標如下：
- 將一些 ImageButtons 放在 aspx 頁面上（帶有母版頁）
- 每個 ImageButton 實際上是一個 PlaceHolder，我想在其中加載一個 Image。我假設一開始沒有 ImageButton.ImageUrl。
- 單擊 ImageButton 時，我希望 ImageButton 顯示影像（最終目標是從本地計算機加載它，但是，現在我使用固定影像）
我的想法是在 ImageButtonClick 之后更改 ImageButton.imageUrl。
Aspx 頁面有一個 ID=FOGLIO 的 Asp:Panel，并包含一個 ID=HEADERLOGO 的 ImageButton。
我試圖用谷歌搜索所有相關主題，但我的代碼實際上拒絕作業。一些基本錯誤可能是，因為沒有檢索到頁面中的任何控制元件，正如我在 PostBack 期間放置的 Response.Write 所證明的那樣。反正我看不到做我想做的事。有人有任何提示嗎？
Aspx 標記和后面的代碼如下。
<%@ Page Title="" Language="C#" MasterPageFile="Site.Master" AutoEventWireup="true"
CodeBehind="Images.aspx.cs" Inherits="Monitas.Images" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style media="all">
.Sheet {position: relative; left: 15%; top:15%; background: white; width: 800px;
height: 900px; border:3px solid #000;}
.HeaderLogo {position: relative; background: yellow; width:240px; height:100px;
left: 500px; top: 1px; border:1px solid #000;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Panel ID="FOGLIO" class="Sheet" runat="server">
<asp:ImageButton class="HeaderLogo" ID="HEADERLOGO" alternateText="Header Logo"
runat="server" ImageAlign="Middle" OnClick="OnImageHeaderClick" />
</asp:Panel>
</asp:Content>
后面的代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using static Monitas.GlobalVars;
namespace Monitas
{
public partial class Images : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack) // in a PostBack, following the OnImageHeaderClick
{
Panel p = (Panel)FindControl("FOGLIO");
Response.Write("<<" p ">>"); // <<<< always null
if (p!=null)
{
ImageButton img = (ImageButton)FindControl("HEADERLOGO");
Response.Write("<<" img ">>");
if (img!=null)
img.ImageUrl=HeadImage;
}
}
}
protected void OnImageHeaderClick(object sender, ImageClickEventArgs e)
{
HeadImage = Server.MapPath("../Monitas/Images/FooterLogo.png"); // use another image
after clicking on the previous
}
}
}
uj5u.com熱心網友回復：
除編譯器錯誤外，所有具有屬性的控制元件runat="server"以及ID未嵌套在資料系結控制元件中的控制元件都將作為代碼隱藏中的欄位提供。
在這種情況下，您應該能夠HEADERLOGO直接從您的代碼隱藏中參考，而不必求助于FindControl.
如果一切都失敗了，事件處理程式的sender引數OnImageHeaderClick也將是對影像按鈕的參考。
還值得指出的是，您在設定HeadImage屬性后ImageUrl更改了屬性。在您再次單擊影像按鈕之前，更新將不可見。
最后，Server.MapPath將回傳服務器上檔案的物理路徑。這不能用作影像 URL：瀏覽您網站的用戶幾乎肯定不會在其計算機上的同一路徑中擁有影像檔案；即使他們這樣做了，也幾乎可以肯定它與您服務器上的影像不同；即使是這樣，網站也無法參考存盤在本地檔案系統上的影像。
protected void OnImageHeaderClick(object sender, ImageClickEventArgs e)
{
HeadImage = "~/Monitas/Images/FooterLogo.png";
// If you want the image URL to be updated immediately:
HEADERLOGO.ImageUrl = HeadImage;
}
uj5u.com熱心網友回復：
是的，使用串列視圖（我最喜歡的）可能更好，但是說讓我們使用網格視圖。
我們有這個帶有一些列的網格視圖和一個影像按鈕：
例如這個：
<div style="padding:30px;width:50%">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" CssClass="table" >
<Columns>
<asp:BoundField DataField="Fighter" HeaderText="Fighter" />
<asp:BoundField DataField="Engine" HeaderText="Engine" />
<asp:BoundField DataField="Thrust" HeaderText="Thrust" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:TemplateField HeaderText="View">
<ItemTemplate>
<asp:ImageButton ID="btnImage" runat="server" Height="68px" Width="149px"
OnClientClick ="popimage(this);return false"
ImageUrl = '<%# Eval("ImagePath") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
現在我們的資料是這樣的：
要加載的代碼是這樣的：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadGrid();
}
void LoadGrid()
{
using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * from Fighters", conn))
{
conn.Open();
DataTable rstData = new DataTable();
rstData.Load(cmdSQL.ExecuteReader());
GridView1.DataSource = rstData;
GridView1.DataBind();
}
}
}
現在我們有了這個：
現在，我有 jQuery，但我們可以添加一些代碼來單擊影像，并在彈出視窗中顯示它 - 更大。
所以在圖片按鈕上，我們有一個點擊事件。我們將給定的行點擊（url）填充到我們隱藏在頁面上的更大的影像控制元件中，然后呼叫 jQuery.UI“對話框”以在對話框中顯示該影像。
所以，讓我們添加點擊事件 - 我們可以做到 100% 客戶端！
所以，我們添加一個 div 來保存影像，這段代碼：
<div id="imagepop" style="display:none;text-align:center;height:80%">
<asp:Image ID="Image1" runat="server" ClientIDMode="Static"
style="height:96%"/>
</div>
<script>
function popimage(btn) {
FromImage = $(btn)
ToImage = $("#Image1")
ToImage.attr("src", FromImage.attr("src"))
pHeight = ($(window).height() * 0.96)
pWidth = ($(window).width() * 0.80)
myDialog = $("#imagepop");
myDialog.dialog({
title: "Fighter",
modal: true,
height: pHeight,
width: pWidth,
closeText: "",
show : "fade",
buttons: {
Ok: function () {
myDialog.dialog("close")
}
}
})
}
</script>
所以，現在我單擊該行中的影像，我們有這個：
因此，使用網格或串列視圖 - 甚至是中繼器。放置一個影像控制元件，然后對要顯示的許多圖片重復此操作。
僅供參考：我假設彈出對話框的 jquery 和 jquery.ui 都有。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416295.html
標籤：