martes, 12 de julio de 2011

Un simple control de servidor ASP.NET: cuadro de mensaje y un cuadro de confirmación

En aplicaciones basadas en web, buzón de mensajes, etc caja de confirmación se usa con mucha frecuencia para alertar al usuario o para pedir confirmación del usuario para una operación importante. En los formularios web, estos cuadros emergentes suelen ser implementado usando JavaScript que se ejecuta en el lado del cliente, por ejemplo, mediante alertas, confirmar las funciones, etc. Una desventaja de esta solución es que el tiempo emergente de las cajas del sistema de forma estática especificada en el lado del cliente en tiempo de diseño, por lo que no puede ser utilizado con flexibilidad en el lado servidor como un componente del lado del servidor, que es muy incómodo, especialmente para los complejos comerciales aplicaciones que tienen la lógica de negocio muy complejo, pero necesario para proporcionar la interfaz de usuario amigable.

En el artículo de Lee Gunn "funcionalidad simple cuadro de mensaje en ASP.NET", que sólo resolvió el problema de la caja de mensajes, pero no mencionó el tema cuadro de confirmación. En este artículo, vamos a introducir un control de servidor simple pero muy práctico que puede realizar la función de buzón de mensajes o cualquier cuadro de confirmación. Es más, la configuración y el uso de este control de servidor es también muy fácil.

Utilizando el código
Para utilizar el control de servidor en el código, primero que hay que añadir el control de servidor como de componentes. NET Framework a la aplicación web. Los pasos detallados son los siguientes:. Haga clic en la "componentes" en la pestaña de la caja de herramientas, haga clic en "Añadir / Eliminar elementos", hay una ventana pop arriba, en el NET Framework, haga clic en "Brower", y seleccionar y agregar el ejecutable de control de servidor desde donde se mantiene en su ordenador. El nombre del archivo es msgBox.dll. A continuación, arrastrar y soltar el control de servidor web a su formulario. (Tenga en cuenta aquí: por favor ponga el control de servidor en la última posición de la forma de la tela, de lo contrario habrá algún resultado inesperado).

El siguiente es el código WebForm1.aspx con el control de servidor en el interior.

<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
  AutoEventWireup
="false" Inherits="msgbox_app.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
  name="vs_targetSchema">

</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:Button id="Button1" runat="server" Text="Submit"></asp:Button>
<asp:TextBox id="TextBox1" runat="server" Width="232px" Height="32px">
</asp:TextBox>
<cc1:msgBox id="MsgBox1" runat="server"></cc1:msgBox>
</form>
</body>
</HTML>


Supongamos un escenario simple: al hacer clic en Button1, se abrirá un cuadro de mensaje si no hay entrada de texto en TextBox1, pero si no hay entrada en TextBox1, que se abrirá un cuadro de confirmación que le preguntará si quiere continuar. Correspondiente de clic de botón código de manejo de eventos se enumeran a continuación.

Para que aparezca un cuadro de mensaje, sólo tiene que llamar a alert (cadena de msg) método de control de servidor. Es muy fácil así que no se explican aquí. Principalmente nos presentará como para que aparezca un cuadro de confirmación aquí. El segundo parámetro del método de confirmar (msg cadena, cadena hiddenfield_name) es el nombre de un elemento de campo oculto del formulario web que el control de servidor también pertenece. No es necesario crear explícitamente el componente de campo oculto, el control de servidor va a crear una para usted, utilizando el nombre del campo oculto que proporciona, pero es necesario proporcionar un nombre único campo oculto que se diferencian de los otros componentes en el formulario de la web . El valor original del campo oculto es "0". Cuando el usuario haga clic en "ok" para confirmar la operación, el control de servidor va a cambiar el valor del valor del campo especificado previamente ocultos de "0" a "1".


private void Button1_Click(object sender, System.EventArgs e)
{
  //for the page with only one form  if(TextBox1.Text!=null && TextBox1.Text!="")
     MsgBox1.alert("Please input something in the text box.");
  else
     MsgBox1.confirm("Hello "+ TextBox1.Text +
          "! do you want to continue?", "hid_f");
}

Si el usuario responde al cuadro de confirmación haciendo clic en "OK" o el botón "CANCELAR", la página web se publicarán de nuevo, así que tienes que escribir el código correspondiente a la captura y el proceso que. Que parte del código se pone generalmente en el método Page_Load () del código subyacente de la página ASPX. Comprobando si el valor del elemento de campo oculto del formulario se cambia a "1", lo que significa que el usuario confirme, puede colocar el código de procesamiento correspondiente de la siguiente manera. Por favor, no olvide restablecer el valor del campo oculto de nuevo al valor original "0", de lo contrario algo va a estar mal la próxima vez para invocar el cuadro de confirmación.

private void Page_Load(object sender, System.EventArgs e)
{

   if(IsPostBack)
   {
    //PLEASE COPY THE FOLLOWING CODE TO YOUR Page_Load()     //WHEN USING THE SERVER CONTROL in your page    if(Request.Form["hid_f"]=="1")   //if user clicks "OK" to confirm     {
        Request.Form["hid_f"].Replace("1","0");
          //Reset the hidden field back to original value "0"
        //Put the continuing processing code         MsgBox1.alert("hello " + TextBox1.Text);

    }
    //END OF CODE TO BE COPIED   }
}
Eso es todo. Muy fácil y simple, ¿no? Todo lo anterior código C # está en WebForm1.aspx.cs, el código detrás de WebForm1.aspx.

La otra cosa que tenemos que mencionar es que en el escenario anterior, se supone que WebForm1.aspx sólo incluye un formulario web. En realidad, en ASP.NET, cada página ASPX sólo admite una forma de control de servidor web, por lo que para la mayoría de los casos, la solución anterior es suficiente. Sin embargo, hay también muy pocos los casos de tal manera que en alguna página ASPX, hay una forma de control de servidor web y otras formas tradicionales de HTML, es decir, la página incluye más de una forma web. Usando el control de servidor MsgBox también puede fácilmente resolver este problema. Lo que hay que hacer es poner el msgbox como un elemento de la forma de control de servidor Web y el formulario de la web debe ser el primer formulario de la página web. El proceso de resto se mantiene igual. El WebForm2.aspx en el proyecto de demostración se muestra este caso.
El elemento normal de formulario HTML no es un control de servidor por lo que no se puede publicar de nuevo al código subyacente de la página ASPX, por lo que necesita para escribir el código de procesamiento en otro lugar, en el siguiente ejemplo, los códigos de procesamiento se muestra en la misma página WebForm2.aspx.


<%@ Register TagPrefix="cc1" Namespace="BunnyBear" Assembly="msgBox" %>
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs"
  AutoEventWireup
="false" Inherits="msgbox_app.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<%
if(Request.Form["btn"]!=null)
{

//for the page with more than one formsif(Request.Form["text1"]=="")
{
//Response.Write("Hi");  MsgBox1.alert(
"Button2 clicked. Please input something in the second text box.");
}
else
{
MsgBox1.confirm("Button2 clicked. Hello "+
  Request.Form["text1"].ToString() + "! do you want to continue?", "hid_f2");
}
}

if(Request.Form["hid_f2"]=="1") //if button2 is clicked and user confirmed{
//Your processing code hereMsgBox1.alert("Button2 Clicked and user confirmed. Hello "
  + Request.Form["text1"]);
Request.Form["hid_f2"].Replace("1","0");
}
%>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta
content=http://schemas.microsoft.com/intellisense/ie5
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<DIV style="LEFT: 56px; WIDTH: 512px;
POSITION: absolute; TOP: 136px; HEIGHT: 128px"

ms_positioning="FlowLayout">
<FORM id="Form1" method="post" runat="server">
<asp:button id="Button1" runat="server" Text="Button1">
</asp:button><asp:textbox id="TextBox1" runat="server"
Width="232px" Height="40px">
</asp:textbox><cc1:msgbox id="MsgBox1" runat="server"></cc1:msgbox></FORM>
<FORM id="Form2" method="post">
<INPUT id="btn" type="submit" value="Button2" name="btn" runat="server">
<INPUT id="text1" style="WIDTH: 224px;
HEIGHT: 31px"
type="text" size="32" name="text1"
runat="server">
</FORM>
</DIV>
</body>
</HTML>


Acerca de los controles de servidor MsgBox
El mecanismo básico de control de servidor MsgBox es realmente muy simple, y puede necesitar más de mejora más adelante, pero la comodidad que trae es también enorme. La clave en el control de servidor es que las salidas del correspondiente código de JavaScript en HTML durante la fase de procesamiento del servidor de control, y utilizar JavaScript para cambiar el valor del campo oculto que se crea para que el campo oculto puede funcionar como una etiqueta que representa el comportamiento del usuario (respuesta del usuario para el cuadro de confirmación). Tenga en cuenta que el control de campo oculto es un elemento puro HTML, no un control de servidor. Sólo de esta manera, se puede acceder en el código JavaScript, y su valor también se publicará en el servidor cuando el formulario se publica. El siguiente es el código fuente para el control de servidor MsgBox, que es bastante fácil de entender si usted sabe un poco del ciclo de vida de servidor ASP.NET control.


using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Text;

namespace BunnyBear
{
/// <summary>/// Summary description for WebCustomControl1./// </summary>[DefaultProperty("Text"),
ToolboxData("<{0}:msgBox runat="server"></{0}:msgBox>")]
public class msgBox : System.Web.UI.WebControls.WebControl
{
//private string msg;private string content;

true
),
Category("Appearance"),
DefaultValue("")>

public void alert(string msg)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<script language="'javascript'">" );

sb.Append( @"alert( """ + sMsg + @""" );" );

sb.Append( @"</script>" );

content=sb.ToString();
}

//confirmation boxpublic void confirm(string msg,string hiddenfield_name)
{
string sMsg = msg.Replace( "\n", "\\n" );
sMsg = msg.Replace( "\"", "'" );

StringBuilder sb = new StringBuilder();

sb.Append( @"<INPUT type=hidden value='0' name='" +
  hiddenfield_name + "'>");

sb.Append( @"<script language="'javascript'">" );

sb.Append( @" if(confirm( """ + sMsg + @""" ))" );
sb.Append( @" { ");
sb.Append( "document.forms[0]." + hiddenfield_name + ".value='1';"
  + "document.forms[0].submit(); }" );
sb.Append( @" else { ");
sb.Append("document.forms[0]." + hiddenfield_name + ".value='0'; }" );

sb.Append( @"</script>" );

content=sb.ToString();
}

/// <summary>/// Render this control to the output parameter specified./// </summary>/// <param name="output"> The HTML writer to write out to </param>protected override void Render(HtmlTextWriter output)
{
  output.Write(this.content);
}
}
}

No hay comentarios:

Publicar un comentario