Segue abaixo exemplos de código para telas em aspx:
1 - Página inicial que contém um botão para acionamento de janela modal. Esta página também contém o código html da modal e os scripts para acionamento da modal, carregamento de conteúdo na mesma e acionamento do servidor através de ajax para promover o cadastro.
<%@ 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 - Página de cadastro que será exibida dentro da janela modal
<%@ 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 da página de cadastro. O método a ser acionado no servidor deve ser estático decorado com a notação [WebMethod], o que requer a utilização do 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;
}
}
}
Você deve ficar atento com a url utilizada para o carregamento da página na modal, além da url utilizada no ajax para acionamento do servidor.
Tome cuidado também em relação aos parâmetros passados através do ajax ao servidor. O nome dos parâmetros e seus tipos devem corresponder aos utilizados na assinatura do método chamado no servidor.
A estrutura HTML do exemplo acima utiliza classes do framework CSS Bootstrap. Você pode adicionar este framework ao seu projeto.