изменить изображение главной страницы src со страницы в панели обновления C # - PullRequest
Новая
       28

изменить изображение главной страницы src со страницы в панели обновления C #

2 голосов
/ 08 июня 2011

У меня есть главная страница с изображением в следующем виде: 

<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 на дочерней странице.

Ответы [ 4 ]

1 голос
/ 08 июня 2011

Поскольку изображение находится за пределами UpdatePanel, изменения на стороне сервера не будут выполняться для изображения после частичной обратной передачи. Единственный вариант - добавить JavaScript на страницу и изменить URL-адрес изображения.

Используйте метод ScriptManager.RegisterStartupScript для внедрения 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; 
}
1 голос
/ 08 июня 2011

Обернуть изображение с помощью 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");
    }

Приведенный выше код хорошо работает для меня.

0 голосов
/ 08 июня 2011

Взгляните на <a href="http://msdn.microsoft.com/en-us/library/bb311028.aspx" rel="nofollow">Sys.WebForms.PageRequestManager</a> Класс.Определите обработчик в javascript и можете изменить источник изображения.

0 голосов
/ 08 июня 2011

Если ваш код запускается после асинхронной обратной передачи (согласно вашему 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">

Присвойте статическому идентификатору свое изображение, чтобы упростить жизнь: 

<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, но кажется более распространенным, чем не в наши дни.

...