Question

我有一个母版页，其中包含如下图像：

<asp:Image ID="imgCompanyLogo" runat="server" ImageUrl="image path" />

在子页面中，我想编辑属性ImageUrl，如下所示：

Image imgCompanyLogo = (Image)Page.Master.FindControl("imgCompanyLogo");
imgCompanyLogo.ImageUrl = ResolveUrl("~/images/CompanyLogo/Logo.png");

它不会给我一个例外，但它不会改变任何东西。

注意：我在子页面中有一个UpdatePanel。

Answer 1

UpdatePanel使用UpdateMode =“Always”

包装图像

母版页：

<asp:UpdatePanel runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:Image runat="server" ID="Image1" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>

public void SetImageUrl(string url)
{
    Image1.ImageUrl = url;
}

儿童页面：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Button Text="Click Me" runat="server" OnClick="UpdateImage" />
    </ContentTemplate>
</asp:UpdatePanel>

    protected void UpdateImage(object sender, EventArgs e)
    {
        ((Main)Master).SetImageUrl("~/Images/0306d95.jpg");
    }

上面的代码对我很有用。

Answer 2

由于图像位于UpdatePanel之外，因此在部分回发后，图像上不会执行服务器端更改。您唯一的选择是将JavaScript注入页面并更改图像URL。

使用ScriptManager.RegisterStartupScript Method在部分回发后注入JavaScript。

以下内容适用于您：

<强> C＃

protected void btnPostback_Click(object sender, EventArgs e)
{
    imgCompanyLogo.ImageUrl = ResolveUrl("~/images/CompanyLogo/Logo.png");
    ScriptManager.RegisterStartupScript(btnPostback,this.GetType(), "myScript", "ChangeImage('" + ImageUrl + "');",false);
}

<强>的JavaScript

function ChangeImage(imgURL) {
    //make sure the ID of the image is set correctly
    document.getElementById('imgCompanyLogo').src = imgURL; 
}

Answer 3

如果您的代码是在异步回发后运行的（根据您的UpdatePanel），则不会呈现UpdatePanel之外的任何内容的更改。主页中的内容肯定似乎符合条件。

如果您正在尝试这样做，这个模型将无法正常工作。在使用此模型时，您将需要使用一些客户端脚本来对已呈现的内容进行更改。

UpdatePanel是一个用于标识通过ajax更新的区域的构造。该页面实际上并未重新加载。因此，回发永远不会更改源自UpdatePanel（或绑定到该面板的控件）之外的内容。

这是一个基本的实现（使用jQuery）。添加隐藏字段以将新源传递到客户端。此必须位于UpdatePanel内。如果希望使用new_image_src.Value=ResolveUrl(...);

更新图像，请从服务器更改此值

<asp:HiddenField ClientIdMode="Static" runat="server" id="new_image_src" 
    value="" EnableViewState="false">

为您的图片提供静态ID，让生活更轻松：

<asp:Image ClientIdMode="Static" runat="server" id="dynamic_image" ImageUrl="..." >

向页面添加javascript（不应该在UpdatePanel中）：

function updateImage() {
    var new_src=$('#new_image_src');
    if (new_src) {
        $('#dynamic_image').attr('src',new_src);
        /// erase it - so it won't try to update on subsequent refreshes
        new_src.val('');
    }
}
$(document).ready(function() {
    /// adds an event handler after page is refreshed from asp.net
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(updateImage);
});

如果没有jquery，这也不难做到，但这些日子似乎更常见。

Answer 4

查看Sys.WebForms.PageRequestManager班级。在javascript中定义处理程序，可能会更改图像源。

从更新面板C＃中的页面更改母版页图像src

4 个答案: