You can create a Modal Window to display the registration screen without redirecting the user to another screen.
Take a look at this example: Creating a modal window
Here are code examples for aspx screens:
1 - Start page that contains a button for modal window triggering.
This page also contains the html code of the modal and the scripts for triggering the modal, loading content in it and triggering the server through ajax to promote the registration.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="jumbotron">
<h1>Página Home</h1>
</div>
<div class="row">
<div class="col-md-4">
<p>
Clique no botão para exibir tela de cadastro.
</p>
<p>
<a class="btn btn-default" onclick="AbrirModalCadastro()">Cadastro</a>
</p>
</div>
</div>
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cadastro</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<script>
function AbrirModalCadastro() {
$(".modal-body").load('http://localhost:50524/Cadastro.aspx');
$("#modal").modal();
}
function EfetuarCadastro() {
var parametros = JSON.stringify({ nome: $('#txtNome').val(), email: $('#txtEmail').val() });
$.ajax({
type: "POST",
url: "Cadastro.aspx/CadastrarUsuario",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: parametros,
timeout: 5000,
success: function (response) {
$('#modal').modal('hide');
if (response.d == true) {
alert("Cadastro realizado com sucesso!");
}
else {
alert("Não foi possível realizar o cadastro!");
}
},
failure: function (response) {
$('#modal').modal('hide');
alert("Ocorreu um erro durante o processo!");
}
});
}
</script>
</asp:Content>
2 - Registration page that will be displayed inside the modal window
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cadastro.aspx.cs" Inherits="WebApplication1.Cadastro" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Nome</td>
<td><input id="txtNome" /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input id="txtEmail" /></td>
</tr>
</table>
<br />
<p>
<a id="btnCadastrar" class="btn btn-default" onclick="EfetuarCadastro()">Cadastrar</a>
</p>
</div>
</form>
</body>
</html>
3 - Codebehind of the registration page. The method to be fired on the server must be static decorated with the [WebMethod] notation , which requires using using System.Web.Services >
using System;
using System.Web.Services;
using System.Web.UI;
namespace WebApplication1
{
public partial class Cadastro : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static bool CadastrarUsuario(string nome, string email)
{
bool success = true;
// Código do servidor para cadastrar o usuário.
return success;
}
}
}
You should be aware of the url used to load the page in the modal, in addition to the url used in ajax to trigger the server.
Be careful also regarding parameters passed through ajax to the server. The name of the parameters and their types must match those used in the signature of the method called on the server.
The HTML structure of the example above uses classes from the CSS Bootstrap framework .
You can add this framework to your project.
