Introdução

O ModalPopupExtender do ASP.NET AJAX é uma ferramenta poderosa para criar janelas modais em aplicações web. No entanto, um desafio comum enfrentado pelos desenvolvedores é a necessidade de executar funções JavaScript específicas toda vez que a modal é exibida. Embora o ModalPopupExtender forneça as propriedades OnCancelScript e OnOkScript para lidar com eventos de cancelamento e confirmação, ele não possui uma propriedade OnShowScript, o que causa certa frustração.

Neste post, vamos explorar como contornar essa limitação e garantir que o JavaScript desejado seja executado perfeitamente quando a modal for exibida.

O Problema

Você pode precisar executar uma função JavaScript específica quando sua janela modal aparece. Um cenário comum é ao integrar recursos como o editor TinyMCE em uma caixa de texto situada dentro da modal. O TinyMCE requer que a caixa de texto esteja visível para se inicializar corretamente, o que significa que você precisa de um meio para acionar o script de inicialização no momento certo.

A Solução

Para executar JavaScript toda vez que sua modal for exibida, você pode utilizar o evento shown fornecido pelo ModalPopupExtender. Essa abordagem permite uma integração mais limpa, sem depender de controles fictícios ou soluções complicadas.

Implementando a Solução

Veja como você pode configurá-la:

1. Adicionar JavaScript à Sua Página: Você precisará anexar suas funções JavaScript ao evento shown da janela modal. Isso pode geralmente ser feito na função pageLoad.

2. Exemplo de Código: Aqui está um exemplo de código demonstrando como conseguir isso:

function pageLoad() {
    var popup = $find('ModalPopupClientID');
    popup.add_shown(SetFocus);
}

function SetFocus() {
    // Substitua 'TriggerClientId' pelo ID real da sua caixa de texto
    $get('TriggerClientId').focus();
}

Análise do Código

• Função pageLoad: Esta função é executada quando sua página é carregada. Ela usa $find para obter uma referência ao seu ModalPopupExtender pelo seu ID do cliente (ModalPopupClientID é um espaço reservado e deve ser substituído pelo ID real).

• Adicionando o Evento shown: O método add_shown é usado para anexar a função SetFocus ao evento shown. Isso significa que toda vez que a modal é exibida, a função SetFocus será executada automaticamente.

• Função SetFocus: Nesta função, simplesmente definimos o foco na caixa de texto que será transformada em um editor TinyMCE. Garantir que ela esteja visível permitirá que o TinyMCE se inicialize corretamente sem problemas.

Conclusão

Utilizando o evento shown do ModalPopupExtender, você pode integrar com suavidade as execuções de JavaScript necessárias para suas necessidades de recursos, como inicializar editores TinyMCE. Essa abordagem não só simplifica seu código, mas também garante que suas funções JavaScript sejam executadas no momento correto.

Se você está lidando com requisitos semelhantes em suas aplicações ASP.NET, integrar JavaScript com janelas modais nunca foi tão fácil. Boas codificações!