none
Crear formulario login - Identity RRS feed

  • Pregunta

  • Saludos a todos los amigos del foro.

    Recientemente me estoy iniciando en el mundo del ASP.NET Core 3.1 y vienen las dudas. Muchas dudas. Pero bueno, comenzaremos por 1.

    Estoy implementando la clase Identity [estoy aprendiendo a usarla, etc]. Cuando creo un proyecto asp.net con autenticacion individual, y muestro despues las paginas para hacer login [Areas|Identity|Pages|Account|Login.cshtml] y modifico esta perfecto. Pero lo que quiero es incrustar un formulario en una pagina. O sea lo que quiero es construir el formulario. No usar este que me muestra. Espero que me entiendan.

    Cualquier sugerencia, se les agradece.

    miércoles, 22 de enero de 2020 21:22

Respuestas

  • Conseguido...


    A continuación los pasos a seguir:

    Creamos una vista parcial con el código de la ventana modal copiado de  cualquier ejemplo de Boostrap 4

    <div class="modal fade" id="loginModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Inicio de Sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @{
                        Html.RenderAction("Login", "Account");
                    }
                </div>
            </div>
        </div>
    </div>

    En el div principal (class="modal fade"), se ha utilizado data-backdrop="static" para que la ventana sea realmente modal y no desaparezca al hacer clic fuera de ella.

    En el segundo div (class="modal-dialog modal-dialog-centered modal-lg", como nos podemos dar cuenta, modal-dialog-centered es para centrar el cuadro modal en la pantalla, modal-lg es para mostrar el cuadro más grande. Por último, en el modal-body es donde se renderiza la página que queremos mostrar con Html.RenderAction("acción", "controlador")

    En el enlace que nos dirige a la página de login debemos agregar los data-toggle y data-target correspondientes como en los ejemplos de Bootstrap.

    ActionLink original:

        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link navbar-brand"})</li>

    ActionLink modificado:

        <li>@Html.ActionLink("Log in", "", "", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link navbar-brand", data_toggle = "modal", data_target = "#loginModal"})</li>

    Por último, en este caso, en la vista index.cshtml añadir al final la llamada a la vista parcial creada en el primer paso:

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>
    
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>
    
    @Html.Partial("_Modal")

    En vez de hacer una vista parcial, se podría poner el código directamente en vez de la llamada a la vista, pero con la vista parcial se mantiene separado el código; y en la vista parcial podemos tener más de un modal. A continuación la vista parcial completa con 2 modales:

    <div class="modal fade" id="loginModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Inicio de Sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @{
                        Html.RenderAction("Login", "Account");
                    }
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="registerModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Registro de usuarios</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @{
                        Html.RenderAction("Register", "Account");
                    }
                </div>
            </div>
        </div>
    </div>


    martes, 28 de enero de 2020 11:28

Todas las respuestas

  • hola

    >>Pero lo que quiero es incrustar un formulario en una pagina.

    que seria eso de "incrustar" ? esa accion con un form que imagino te refieres al <form> no aplica

    >>quiero es construir el formulario. No usar este que me muestra

    pero la pagina de login.cshtml puede construirla de cero tu mismo y luego la configuras

    la que crea por defecto la hace en base a templates, pero no es obligatorio usarla

    crea la tuya propia, pero luego la usas en la configuracion de redirecion cuando no se este autenticado

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 22 de enero de 2020 22:00
  • Hola. Gracias por responder.

    Exactamente eso es lo que quiero. A pesar de que cree el proyecto desde esas plantillas, es necesario volver a crear un model extra? solo quiero porner un form con login y psw y un boton send.  pero como haria yo ese form, el action a donde lo dirijo? Apenas estoy aprendiendo. Perdone mi desconocimiento.

    Gracias.

    miércoles, 22 de enero de 2020 22:17
  • Analizando Login.cshtml el form aqui presente no lo entiendo muy bien.

    @page
    @model LoginModel

    @{
        ViewData["Title"] = "Log in";
    }

    <h1>@ViewData["Title"]</h1>
    <div class="row">
        <div class="col-md-4">
            <section>



                <form id="account" method="post">                
                    <hr />
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="Input.Email"> Email Address</label>
                        <input asp-for="Input.Email" class="form-control" placeholder="email@email.com" />
                        <span asp-validation-for="Input.Email" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="Input.Password"></label>
                        <input asp-for="Input.Password" class="form-control" placeholder="Password">
                        <span asp-validation-for="Input.Password" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label asp-for="Input.RememberMe">
                                <input asp-for="Input.RememberMe" />
                                @Html.DisplayNameFor(m => m.Input.RememberMe)
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Log in</button>
                    </div>
                    <div class="form-group">
                        <p>
                            <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
                        </p>
                        <p>
                            <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
                        </p>
                    </div>
                </form>








            </section>
        </div>
        
    </div>

    @section Scripts {
        <partial name="_ValidationScriptsPartial" />
    }

    miércoles, 22 de enero de 2020 22:19
  • hola

    >>Analizando Login.cshtml el form aqui presente no lo entiendo muy bien.

    que no entiendes ? digo sino mencionas cual es el problema no somos adivinos

    >>es necesario volver a crear un model extra?

    si usas Identity este ya tiene el modelo que mapea a la db usando Entity Framework, podrias usar el mismo o extenderlo

    >>solo quiero porner un form con login y psw y un boton send.

    pero si es solo eso modifica el form existente quitando del html lo que no necesites

    >>pero como haria yo ese form, el action a donde lo dirijo?

    aqui hay varios caminos

    - podrias crear un controller nuevo, con sus propios action, usando este para el login

    - podrias rediseñar la vista actual poniendo el diseño que quieras, cambiendo el model que recibe el action

    pero bueno vas a tener que poner algo de tu parte para aprender sobre asp.net mvc, en eso no puedo ayudarte, solo recomendando algunas lecturas

     ASP.NET MVC 5 Fundamentals

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 22 de enero de 2020 23:57
  • Cordiales saludos.

    Yo también estoy empezando con ASP.NET MVC (he hecho el curso de certificación y ahora toca practicar "lo aprendido". ya sabemos cómo son estos cursos) y ASP.NET Core 3.1 paralelamente y creo que se refiere a algo similar a lo que yo quiero hacer.

    En mi caso lo que quiero conseguir en ambas plataformas es que las páginas de login y register se muestren en una ventana modal en vez páginas independientes, es decir, que al dar clic en el enlace Login o Register no se cambie de página sino que en la misma página se muestre una ventana modal, supongo que hay que hacerlos con vistas parciales.

    Conseguí mostrar la ventana modal, pero no sin cambiar de página, es decir que al hacer clic en login se abría la página de login mostrando directamente la ventana modal..

    Muchas gracias por la ayuda que puedan brindar.

    Adjunto imagen del lo que quiero conseguir.





    • Editado FPLS_ jueves, 23 de enero de 2020 10:35
    • Propuesto como respuesta Diana AcuñaModerator martes, 28 de enero de 2020 22:46
    jueves, 23 de enero de 2020 10:05
  • Saludos a todos los que responden.

    Aproximadamente eso eso lo que quiero hacer. lo que tu lo haces en un cuadro modal (el cual me interesa) y yo lo quiero hacer incrustando el form en mi misma pagina. pongo una foto de lo que quiero hacer.

    Todo esto que estoy haciendo son pruebas. Asi que perdon un poco el desorden. Soy yo haciendo test.

    viernes, 24 de enero de 2020 17:39
  • Para incrustar en el form actual tienes que utilizar Html.RenderAction("Acción", "Controlador")

    En la imagen que adjunto he conseguido insertar el formulario de login dentro del Home/Index, es decir, se ejecuta la acción Login del Controlador Account. La acción Login retorna la Vista Login.

    Espero haber ayudado.

    La instrucción es:

    @{

         Html.RenderAction("Login", "Account")

    }

    sábado, 25 de enero de 2020 10:49
  • Conseguido...


    A continuación los pasos a seguir:

    Creamos una vista parcial con el código de la ventana modal copiado de  cualquier ejemplo de Boostrap 4

    <div class="modal fade" id="loginModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Inicio de Sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @{
                        Html.RenderAction("Login", "Account");
                    }
                </div>
            </div>
        </div>
    </div>

    En el div principal (class="modal fade"), se ha utilizado data-backdrop="static" para que la ventana sea realmente modal y no desaparezca al hacer clic fuera de ella.

    En el segundo div (class="modal-dialog modal-dialog-centered modal-lg", como nos podemos dar cuenta, modal-dialog-centered es para centrar el cuadro modal en la pantalla, modal-lg es para mostrar el cuadro más grande. Por último, en el modal-body es donde se renderiza la página que queremos mostrar con Html.RenderAction("acción", "controlador")

    En el enlace que nos dirige a la página de login debemos agregar los data-toggle y data-target correspondientes como en los ejemplos de Bootstrap.

    ActionLink original:

        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link navbar-brand"})</li>

    ActionLink modificado:

        <li>@Html.ActionLink("Log in", "", "", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link navbar-brand", data_toggle = "modal", data_target = "#loginModal"})</li>

    Por último, en este caso, en la vista index.cshtml añadir al final la llamada a la vista parcial creada en el primer paso:

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>
    
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>
    
    @Html.Partial("_Modal")

    En vez de hacer una vista parcial, se podría poner el código directamente en vez de la llamada a la vista, pero con la vista parcial se mantiene separado el código; y en la vista parcial podemos tener más de un modal. A continuación la vista parcial completa con 2 modales:

    <div class="modal fade" id="loginModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Inicio de Sesión</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @{
                        Html.RenderAction("Login", "Account");
                    }
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="registerModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">Registro de usuarios</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @{
                        Html.RenderAction("Register", "Account");
                    }
                </div>
            </div>
        </div>
    </div>


    martes, 28 de enero de 2020 11:28
  • Hola foro.

    Intentando hacer las sugerencias, un nuevo error.

    jueves, 30 de enero de 2020 14:54
  • Hola amigos del foro.

    He estado leyendo sobre el tema, y creo que es que en ASP.NET MVC Core 3.1 (que es lo que estoy usando) no se usa:

                        Html.RenderAction("Register", "Account");

    Si no que hay que usar ViewComponent

    Sigo leyendo...

    jueves, 30 de enero de 2020 22:58