Função de confirmação Yes/No em Asp.net

Como fazer uma função de confirmação Yes/No em Asp.net?

A programação para internet onde mais falha é na dificuldade em fazer caixas de comunicação entre o utilizador e o site. O que é curioso é que esta comunicação é bastante importante: Se apagarmos algo do cesto de compras, devemos receber uma mensagem do género “Quer mesmo apagar?”

Não há em nenhuma das linguagens de programação para internet, como o asp.net ou o php, uma forma expedita de fazer mensagens de confirmação. Já vimos anteriormente como fazer uma mensagem alert iremos agora estudar uma alternativa para uma mensagem de confirmação.

Diferença entre mensagem de confirmação e mensagem de Alert?

A diferença entre uma mensagem de confirmação e uma mensagem de Alert é muito simples: A mensagem de confirmação espera uma resposta do utilizador para agir em conformidade. Enquanto que uma mensagem de Alert, apenas chama a atenção do utilizador para determinada ação, a mensagem de confirmação tem que ler uma resposta do utilizador.

A solução proposta é conseguida fazendo uso do ModalPopup. É fácil, um pouco nada trabalhosa, mas resulta na perfeição. Usando esta opção podemos colocar imagens na resposta o que amplia a utilidade desta caixa.

Recomenda-se a leitura do artigo sobre ModalBox .

Código do panel

Eis o código do panel:

asp:Label ID="lblstupid" runat="server" Text=""></asp:Label>
<asp:Panel ID="Panel1"  runat="server" CssClass="pnlBackGround" Width="400px" Height="180px">   
            <br />
            <div class="row">
                <div class="col-md-3">
                    <asp:Image ID="Image1" runat="server" ImageUrl="/imagens/warning.png" Width="40px" Height="40px" />
                </div>
                <div class="col-md-9">
                    <p style="font-size:x-large;">Delete Record ?</p>
                </div>
            </div>
            <br />
            <br />
            <div class="row">
                <div class="col-md-4 col-md-offset-1">
                    <asp:Button ID="Button3" CssClass="form-control btn-warning"  runat="server" Text="Delete" OnClick="Delete_option"  />
                </div>
                <div class="col-md-4 col-md-offset-1">
                    <asp:Button ID="Button4" CssClass="form-control btn-default" runat="server" Text="Cancel" />
                </div>
            </div>       
             
        </asp:Panel>

O código css

Devemos usar o seguinte CSS:

<style>
.modalBackground
{
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.7;
}
.pnlBackGround
{
 position:fixed;
    top:10%;
    left:10px;
    width:300px;
    height:125px;
    text-align:center;
    background-color:White;
    border:solid 3px black;
}
    </style>

Como estamos a usar Bootstrap, convém não esquecer de colocar os includes. O bootstrap não é obrigatório, apenas o usamos neste exemplo para configurar o panel de forma correta.

Está disponível um vídeo que mostra todo o processo: