I have page that uses a partial view for a contact form, and the contact form is validated (so when I don't provide a required field, it redirect me to specific layout I create for this partial.)
Here is how my page is laid out:
Last image is a blank_layout I created for my partial view because if I don't do it, it changes all content like navbar and other parts of the page.
View Model:
public class ContactoViewModel
{
public IEnumerable<ProductosModel> ProductosListes { set; get; }
public String Descripcion { get; set; }
public String Id { get; set; }
[Required(ErrorMessage = "Es necesario que ingrese su nombre")]
public String Name { get; set; }
[Required(ErrorMessage = "Es necesario que ingrese su correo")]
[Email(ErrorMessage = "Ingrese un Email válido")]
public String Email { get; set; }
[Required(ErrorMessage = "Ingrese algún comentario por favor")]
[MinLength(10, ErrorMessage = "Es necesario que ingrese al menos 10 caracteres")]
public String Comments { get; set; }
}
Partial view:
@model DismedHmo.Models.ContactoViewModel
@{
Layout = "~/Views/Shared/Blank_Layout.cshtml";
}
@*<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/component.css" rel="stylesheet" />
<link href="~/Content/default.css" rel="stylesheet" />*@
<div class="row">
<!-- feedback -->
<article class="feedback">
@*<div class="title-contact">Deja un mensaje </div>*@
@using (Html.BeginForm("Contact_Partial", "ContactModels", FormMethod.Post))
{
<div class="title-margin">
@*<h6>Campos Requeridos*</h6>*@
</div>
<div class="input-group">
<div class="col-md-12">
<div class="relative">
<i class=" fa fa-user appointment-contact"></i>
<div class="contactlbl">
@Html.TextBoxFor(model => model.Name, new { @class = "form-control, txtboxexpand", @style = "width:100%", @placeholder = "Nombre*" })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="relative">
<i class=" fa fa-envelope appointment-contact"></i>
<div class="contactlbl">
@Html.TextBoxFor(model => model.Email, new { @class = "form-control, txtboxexpand", @style = "width:100%", @placeholder = "Email*", @type = "email" })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="input-group">
<div class="hidden-xs col-sm-12 col-md-12 col-lg-12">
<div class="relative">
<i class=" fa fa-align-left appointment-message"></i>
</div>
<div class="contactlbl">
@Html.TextAreaFor(model => model.Comments, new { @class = "form-control, txtareaexpand", @style = "width:100%", @placeholder = "Mensaje*" })
@Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="input-group">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<div class="relative">
<i class=" fa fa-align-left appointment-message"></i>
</div>
<div class="contactlbl">
@Html.TextAreaFor(model => model.Comments, new { @class = "form-control, txtareaexpandxs", @style = "width:100%", @placeholder = "Mensaje*" })
@Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group margen-btn">
<div class="col-sm-12">
<input type="submit" value="Solicitar cotización" class="btn btn-contacto" />
</div>
</div>
}
</article>
</div>
Calling partial view on main page:
<div class="col-md-6">
@Html.Action("Contact_Partial", "ContactModels")
</div>
Controller:
[HttpPost]
public ActionResult Contact_Partial(ContactoViewModel model)
{
if (!ModelState.IsValid)
{
Danger("Su mensaje no fue enviado, porfavor intente de nuevo.");
return View();
}
using (var emailService = new EmailService())
{
emailService.SetRecipient("[email protected]");
emailService.Contacto(model.Name, model.Email, model.Comments);
emailService.Send();
}
Success(string.Format("Tu mensaje ha sido enviado con exito."), true);
return RedirectToAction("Productos", "Productos");
}
public ActionResult MensajeEnviado()
{
return View();
}
I really want the validation page to be displayed where the contact form was. How can I do this?