Publicado en Tutoriales, Visual Studio

MVC Bootstrap: Desplegar mensaje de confirmacion despues de un Post en Theme Concept

theme concept dashboard

Acá dejare un pequeño ejemplo para implementar un mensaje de confirmación después de un Post en el Theme Concept.

Tomaremos el código para crear un modal Popup que desplegara el formulario a grabar y en esta misma vista tendremos el mensaje de confirmación con el estilo del theme CONCEPT

Cambien parto de la idea que ya sabemos como integrar un Template al MVC de Visual Studio (bundles, content, js, etc.).

theme concept dashboard modal

Crearemos un Layout, Controller y Vista para este ejemplo.

1) Codigo del Layout

@using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
    <title>MVC Message Confirmation POST</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->

    @Styles.Render("~/Content/chartmorriscss")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <!-- ============================================================== -->
    <!-- main wrapper -->
    <!-- ============================================================== -->
    
<div class="dashboard-main-wrapper">
        @Html.Partial("_navbar")
        @Html.Partial("_leftsidebar")
        @RenderBody()

    </div>

    <!-- ============================================================== -->
    <!-- end main wrapper -->
    <!-- ============================================================== -->
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/influencer")

    
    @RenderSection("scripts", required: false)
</body>
</html>

2) Codigo del Controller

Usaremos la variable global TempData para pasar un dato desde el controller a la vista. Puede ocupar otros tipos según como quieran manejarlo.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyApp.NET.Controllers
{
    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Grabar()
        {
            TempData["success"] = "registro grabado";

            return View("Index");
        }

    }
}

3) Código de la vista con el formulario y mensaje

Acá implementamos la validación de la variable “TempData” si tiene valor, desplegamos el mensaje.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutTest.cshtml";
}
@{
    var message = ViewBag.SuccessMsg;
}

<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- wrapper  -->
<!-- ============================================================== -->
<div class="dashboard-wrapper">
    <div class="container-fluid  dashboard-content">
        <!-- ============================================================== -->
        <!-- pageheader -->
        <!-- ============================================================== -->
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="page-header">
                    <h2 class="pageheader-title">Modal</h2>
                    <p class="pageheader-text"></p>
                    <div class="page-breadcrumb">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">TYDW</a></li>
                                <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Tutorial</a></li>
                                <li class="breadcrumb-item active" aria-current="page"></li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- end pageheader -->
        <!-- ============================================================== -->
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="section-block" id="modal" tabindex="-1">
                <h3 class="section-title">Modals</h3>
                <p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
            </div>
            <div class="card">
                <h5 class="card-header">Examples</h5>
                <div class="card-body">
                    <div class="">
                        <h4>Live Demo</h4>
                        <!-- Button trigger modal -->
                        <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                            Launch demo modal
                        </a>
                       <!-- Validacion para desplegar Mensaje despues del POST-->
                        @if (TempData["success"] != null)
                        {                           
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <strong>MENSAJE</strong> @Html.Encode(TempData["success"])
                                <a href="#" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </a>
                            </div>
                        }
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </a>
                                    </div>
                                    <div class="modal-body">
                                        @using (Html.BeginForm("Grabar", "Test", FormMethod.Post, new { id = "testform" }))
                                        {
                                            <label>Codigo</label><input type="text" name="txtCodigo" value="" />
                                            <br />
                                            <label>Descripcion</label><input type="text" name="txtDescripcion" value="" />
                                            <br />
                                            <button type="submit" class="btn btn-primary">Grabar</button>
                                        }
                                    </div>
                                    <div class="modal-footer">                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- ============================================================== -->
    <!-- footer -->
    <!-- ============================================================== -->
    @Html.Partial("_footer")
    <!-- ============================================================== -->
    <!-- end footer -->
    <!-- ============================================================== -->
    
</div>
<!-- ============================================================== -->
<!-- end main wrapper -->
<!-- ============================================================== -->

La ejecución se ve asi:

Paso 1: Presionamos el boton “Launch demo Modal”

Paso 2: En el Modal, presionamos el boton “Grabar”

Paso 3: Se despliega el mensaje de confirmacion en Verde (success).

Y acá termina este tutorial, espero que les sirva. Cualquier comentario y/o contribución bienvenido.

TYDW.-

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s