Usar Modal Pop up es super fácil solo hay que colocar los tags que tienen ya todo un plugin hecho por detrás. El problema viene si es que queremos que funcione adecuadamente con un form de contacto o de recolección de datos, puede ser de edición o ingreso de datos hacia una tabla. He visto una solución para Core 3 que en mi caso no funciona por que trabajo esto con otra versión menor.
Normalmente cuando haces clic sobre el botón de envío los campos se validan en el cliente hasta que se den todos los campos como válidos, pero no pasa lo mismo cuando estás dentro de un modal pop up. En ese caso, al hacer clic Submit se actualiza la página y a consecuencia de ello se cierra, el pop up, ya no puedes ver si es que se validó el form lo cual se complica si es que tienes más de un botón que dispara el pop up que es mi caso.
Luego de ver muchas posibles soluciones encuentro que la única forma de validar sin que se cierre el pop up es mediante Ajax. Hay varias formas con Ajax, pero encontré esta que usa «Ajax.BeginForm», entonces veamos el código con una explicación.
Para comenzar las versiones que estoy usando son:
- Bootstrap 3.4.1
- Jquery 3.4.1
- MVC C# 4.7.2
Primero, creamos un modelo en donde tenemos las validaciones:
public class ContactForm
{
public string producto { get; set; }
[Required(ErrorMessage = "Ingrese sus nombres")]
[StringLength(80, ErrorMessage = "Máximo 80 caracteres")]
public string nombres { get; set; }
[StringLength(12, ErrorMessage = "No más de 12 números")]
public string telefono { get; set; }
[Required(ErrorMessage = "Email is required.")]
[EmailAddress(ErrorMessage = "Invalid Email Address.")]
public string email { get; set; }
[DataType(DataType.MultilineText)]
public string mensaje { get; set; }
}Segundo, nuestro controller HttpGet:
public ActionResult Services()
{
return View();
}Vamos a usar una vista y dentro de esa vista usaremos una vista parcial de la siguiente manera:
@using (Ajax.BeginForm("Services", "Home", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "divform" }))
{
<div id="bootstrapmodal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm " role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="BorraDatos();"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel" style="color: #009dcd;">Comenzar ahora</h3>
<h5>Escríbanos, nos pondremos en contacto. </h5>
<label id="sn"></label>
</div>
<div class="modal-body" id="divform">
@Html.Partial("_FormServices")
</div>
</div>
</div>
</div>
}Además en algún lugar de la vista vamos a llamar al Pop Up:
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#bootstrapmodal1" data-id="Web Site & Design">
Comenzar ahora
</button>Dos cosas en este código,, estamos usando un formulario que se actualizará mediante Ajax y estamos señalando el contenido de divform, justo en donde está nuestra vista parcial. Lo demás del código son las clases que usamos del modal Pop up.
Además debemos tener instaladas las siguientes librerías que es mejor bajarlas desde NuGet:
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>La clase parcial que se llama _Formservices sería así;
@model MiAplicacion.Models.ContactForm
@Html.AntiForgeryToken()
<style>
span {
color: #a94442;
}
</style>
<span class="alert-danger">
@*@Html.ValidationSummary()*@
</span>
<div class="row">
<div class="col-md-12 ">
<input type="hidden" id="producto" name="producto" />
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div>@Html.EditorFor(model => model.nombres, new { htmlAttributes = new { @class = "form-control", @Placeholder = "Nombres" } })</div>
@Html.ValidationMessageFor(model => model.nombres, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div>
@Html.EditorFor(model => model.telefono, new { htmlAttributes = new { @class = "form-control", @Placeholder = "Teléfono" } })
</div>
@Html.ValidationMessageFor(model => model.telefono, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div>
@Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control", @Placeholder = "Email" } })
</div>
@Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
@Html.EditorFor(model => model.mensaje, new { htmlAttributes = new { @class = "form-control", @Placeholder = "Su mensaje" } })
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<input type="submit" class="btn btn-info" value="Enviar datos" />
</div>
</div>
<div class="row" style="padding-bottom:10px;">
<div class="col-md-12">
@if (ViewBag.Message != null)
{
<div class="text-success" id="msg">@ViewBag.Message</div>
}
</div>
</div>Aquí en la vista parcial tenemos los campos del formulario y el botón de submit.
Ahora miremos como vamos a recibir los datos en el Controller.
[HttpPost]
public ActionResult Services(ContactForm ServicesForm)
{
if (ModelState.IsValid)
{
// Save it in database
//Return Success message
ViewBag.Message = "Hemos recibido su correo";
ModelState.Clear();
return PartialView("_FormServices");
}
return PartialView("_FormServices", ServicesForm);
}Con esto ya tenemos un formulario funcionando para validar campos y realizar nuestros envíos de correo o entrada y edición de datos para guardarlos en un tabla,
