Div for Name and Email Registration

Asked

Viewed 478 times

0

I am developing a site using HTML so far without problems, what I need to do is to register the NAME and EMAIL of the visitor of the site. For this I created a form in ASP.NET that performs the procedure and works correctly.

My question is how do I click on the "register" in my HTML page to display a floating DIV with the ASPX page that I developed and the registration is carried out without having to load the page of the form I developed.

The aspx page is very simple only two inputbox and a button that performs the Insert in the base.

This is possible to be done?

  • This ASPX page is another page that receives the registration data or is the same?

  • Another thing: this floating DIV with the ASPX page will show what?

  • The ASP Page is only the form that will be filled in with the user’s name and email to be stored in a database.

  • Your question is confused. One time you refer to the ASPX page as a second page, another time as the same q has the form... Does not answer the questions... It gets complicated. I will signal to close the question for lack of clarity.

2 answers

1

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

Below are examples of aspx screen code:

1 - Homepage containing a button for modal window operation. This page also contains the modal html code and the scripts for modal triggering, content loading in it and server triggering 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">&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 - 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 used on the server must be static decorated with the notation [Webmethod], which requires the use of 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.

Also be careful about the parameters passed through ajax to the server. The name of the parameters and their types must match those used in the method signature called on the server.

The HTML structure of the above example uses classes from CSS Bootstrap framework. You can add this framework to your project.

  • Sergio is something similar to what I need, but if I want to display another page inside the DIV as the example forms on this site as I do?

  • Bruno, I edited the answer by putting an example of code for you to check. I hope this can help you!

  • Thanks Sergio for the answer, was trying to implement it I found the answer I was looking for. A very simple way using javascript.

0

  • That’s right, Bruno, it can also be done that way. The example I gave you is in case you want to load an aspx page into another aspx page. In this case are two physical files in your project.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.