change masterpage image src from page in update panel C#

I have a master page that contains an image as follow:

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

and in a child page I want to edit the property ImageUrl as follow:

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

and it doesn't give 开发者_如何学Gome an exception, but it doesn't change anything.

Note: I have an UpdatePanel in the child page.

Since the image is sitting outside of the UpdatePanel, server side changes will not be executed on the image after a partial postback. Your only option is to inject JavaScript into the page and change the image URL.

Use the ScriptManager.RegisterStartupScript Method to inject JavaScript after the partial postback.

Something like the following will work for you:

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; 
}

Wrap image by UpdatePanel with UpdateMode="Always"

Master Page:

<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;
}

Child Page:

<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");
    }

The code above works well for me.

Have a look at Sys.WebForms.PageRequestManager Class. Define handler in javascript and may change the image source.

If your code is being run after an async postback (per your UpdatePanel) then changes to anything outside the UpdatePanel will not be rendered. Content in the master page would definitely seem to qualify.

If this is what you're trying to do, this model won't really work. You will need to use some client script to effect changes to already-rendered content when working with this model.

An UpdatePanel is a construct to identify an area that's updated through ajax. The page is not actually reloaded. So an postback can never change content that's outside of the UpdatePanel (or control bound to that panel) that sourced it.

Here's a basic implementation (using jQuery). Add a hidden field to pass the new source to the client. This must be inside the UpdatePanel. Change this value from the server when you want the image to update with new_image_src.Value=ResolveUrl(...);

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

Give your image a static id too to make life easier:

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

Add javascript to the page (should NOT be in the 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);
});

This wouldn't be difficult to do without jquery either but seems more common than not these days.