0

Estou desenvolvendo um site utilizando HTML até ai sem problemas, o que preciso é realizar um cadastro do NOME e EMAIL do visitante do site. Para isso criei um formulário em ASP.NET que realiza o procedimento e funciona corretamente.

Minha dúvida é como faço para que ao clicar no "cadastre-se" na minha página HTML seja exibida uma DIV flutuante com a página ASPX que desenvolvi e nele seja realizado o cadastro sem necessidade de carregar a página do formulário que desenvolvi.

A página aspx é bem simples somente dois inputbox e um botão que realiza o insert na base.

Isso é possível de ser feito?

4
  • Essa página ASPX é outra página que recebe os dados do cadastro ou é a mesma?
    – Sam
    Commented 12/10/2017 às 22:59
  • Outra coisa: esse DIV flutuante com a página ASPX irá mostrar o quê?
    – Sam
    Commented 12/10/2017 às 23:07
  • A Página ASP é somente o formulário que será preenchido com o nome e o email do usuário para ser armazenado numa base de dados. Commented 12/10/2017 às 23:40
  • Sua pergunta está confusa. Uma hora vc se refere a pagina ASPX como uma segunda página, outra hora como a mesma q tem o formulario... Nao responde as perguntas... Fica complicado. Vou sinalizar para fechar a pergunta por falta de clareza.
    – Sam
    Commented 13/10/2017 às 14:16

2 Respostas 2

1

Você pode criar uma Janela Modal para exibir a tela de cadastro sem redirecionar o usuário para uma outra tela.

Dê uma olhada neste exemplo: Criando uma janela modal

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">&times;</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.

3
  • Sergio é algo parecido com isso que preciso, porém se eu quiser exibir uma outra página dentro da DIV como os formulários de exemplo nesse site como faço? Commented 12/10/2017 às 23:40
  • Bruno, editei a resposta colocando um exemplo de código para você poder verificar. Espero que isso possa lhe ajudar! Commented 13/10/2017 às 4:18
  • Obrigado Sergio pela resposta, foi tentando implementá-la que achei a resposta que procurava. Uma maneira bem simples usando javascript. Commented 13/10/2017 às 22:27
0

Obrigado pessoal pela resposta

Achei uma maneira bem simples de fazer esse procedimento em:

https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript

Basta fazer um load da página aspx na div.

1
  • Correto Bruno, também pode ser feito dessa forma. O exemplo que eu te passei é para o caso de você querer fazer o load de uma página aspx dentro de outra página aspx. Nesse casso são dois arquivos físicos no seu projeto. Commented 13/10/2017 às 23:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .