在点击LinkBut​​ton控件时显示图像

时间:2015-06-01 04:51:28

标签: asp.net

How to show an image in ContentPlaceHolder4 on click of a Link Button which is placed on ContentPlaceHolder3.

我有一个母版页和一个内容页面。在母版页上,我有一个链接INSTRUMENTS,点击我被重定向到内容页面INSTRUMENTS。现在我的内容页面上有10个LINK BUTTON控件,我希望点击每个链接按钮,相应的图像应该在相同的内容页面上打开,但在不同的CntentPlaceHolder中。请指导我如何为链接按钮添加代码单击以及如何在单击链接按钮时呈现iamge。 以下是我到目前为止添加的代码。

**This is My Master Page**


    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <asp:ContentPlaceHolder id="head" runat="server">

    </asp:ContentPlaceHolder> 
    <style type="text/css">
        .style1
        {
        }
        .style2
        {
            width: 162px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div> <img src="IMAGES/main.png" style="background-color: #99FF99; border-top-color: #800000; width: 1082px; height: 105px;" />
    </div>  &nbsp;
    <a href="HOME.aspx">HOME</a>&nbsp;<a href="INSTRUMENTS.aspx">INSTRUMENTS</a>&nbsp;<a href="LOGIN.aspx">LOGIN</a>&nbsp; 
&nbsp;<a href="ADRESS.aspx">ADDRESS</a>&nbsp;
 <table style="width: 100%; height: 288px; margin-top: 11px;">
        <tr>
            <td bgcolor="#FF0066" align="center" class="style2" 
                style="text-align: center; vertical-align: top;">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
                </asp:ContentPlaceHolder>
            </td>
            <td bgcolor="#33CCCC" class="style1">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
                </asp:ContentPlaceHolder>
            </td>
        </tr>
        </table>
    </form>

   </body>
</html>

**This is My Content Page**

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="INSTRUMENTS.aspx.cs" Inherits="INSTRUMENTS" %>

 <asp:Content id="content3" ContentPlaceHolderID="head" runat="server">
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    </asp:Content> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">

    <asp:LinkButton ID="LinkButton1" runat="server"  OnClick="lkbutton_click">Sitar</asp:LinkButton><br />
    <asp:LinkButton ID="LinkButton2" runat="server">Harmonium</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton3" runat="server">Tabla</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton4" runat="server">Drum</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton5" runat="server">Guitar</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton6" runat="server">Sarod</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton7" runat="server">Flute</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton8" runat="server">Santoor</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton9" runat="server" onclick="LinkButton9_Click">Keyboard</asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton10" runat="server">LinkButton</asp:LinkButton>


</asp:Content>
<asp:content ID ="C2" ContentPlaceHolderID ="ContentPlaceHolder4" runat="Server">
<asp:Image ID ="I1" ImageUrl ="~/IMAGES/F.png" >

<asp:Image />

</asp:content>

2 个答案:

答案 0 :(得分:0)

您的设计页面中的

就像这样使用。

<asp:Content ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
    <img id="img1" runat="server" />
</asp:Content>

并在代码后面的链接按钮点击事件如下:

protected void lkbutton_click(object sender, EventArgs e)
    {
        img1.Src = "~/images/sonata-logo.png";
    }

我测试过它工作正常。 但是只要它显示出正确的图像路径。 感谢

答案 1 :(得分:0)

<asp:LinkButton ID="LinkButton1" runat="server" width="250px" height="250"> 
<img runat="server" id="IL"src="~/Class/Adds/0/4.jpg" width="250" height="250" />
</asp:LinkButton>

以此,您可以使用服务器代码来更改图片。

il.SRC = "~/Class/Adds/0/7.jpg"