Esta artículo les ayudará a comprender como utilizar formularios enviados vía post (postback) y formularios que envían peticiones vía post (callback), entonces empecemos..
<%Html.EnableClientValidation();%> <% using (Html.BeginForm("formPost", "home", FormMethod.Post, new { id = "frmPost", name = "frmPost" })) { %> <div> <%= Html.LabelFor(model => model.cardNumber) %> <%= Html.TextBoxFor(model => model.cardNumber, new { maxlength = "16", autocomplete = "off" })%> <%= Html.ValidationMessageFor(model => model.cardNumber, "*" )%> </div> <div> <%= Html.LabelFor(model => model.cardOwnerName) %> <%= Html.TextBoxFor(model => model.cardOwnerName, new { autocomplete = "off" })%> <%= Html.ValidationMessageFor(model => model.cardOwnerName, "*")%> </div> <input type="submit" name="formpost" id="Submit2" value="Form Submit" /> <% } %> |
Declaramos que utilizaremos un formulario con Html.BeginForm y dentro ponemos todos los campos de texto que necesitamos enviar a la acción “formPost” .. para este ejemplo he generado un modelo que es el que contiene cardNumber y cardOwnerName .. y son los campos que ven dentro del formulario, los ilustro porque también quiero que vean que en antes de hacer submit se toman en cuenta las validaciones sobre las propiedades del modelo.
Continuamos, otra forma que también existe es utilizando ajax y es muy similar al método anterior, entonces..
<div id="divResponse"> <%Html.EnableClientValidation();%> <% using (Ajax.BeginForm( "ajaxPost", "Home", new AjaxOptions{ UpdateTargetId = "divResponse", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" })) { %> <div> <%= Html.LabelFor(model => model.cardNumber) %> <%= Html.TextBoxFor(model => model.cardNumber, new { maxlength = "16", autocomplete = "off" })%> <%= Html.ValidationMessageFor(model => model.cardNumber, "*" )%> </div> <div> <%= Html.LabelFor(model => model.cardOwnerName) %> <%= Html.TextBoxFor(model => model.cardOwnerName, new { autocomplete = "off" })%> <%= Html.ValidationMessageFor(model => model.cardOwnerName, "*")%> </div> <input type="submit" name="ajaxsubmit" id="Submit1" value="Ajax Submit" /> <% } %> </div> |
Básicamente Ajax.BeginForm es similar al helper Html solo que las peticiones se envían por callback y la respuesta es parcial .. esto es muy útil cuando necesitamos enviar mensajes cortos o porciones de REST al cliente.
Otra parte necesaria es la forma en que se debe de trabajar con las peticiones sobre las acciones..
public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(); } [HttpPost] public ActionResult formPost() { return View("PostPage"); } [HttpPost] public PartialViewResult ajaxPost() { return PartialView("AjaxPage"); } } |
Véase que cuando la petición es enviada vía ajax se utiliza en la respuesta PartialViewResult.. y para no perderse, “PostPage” y “AjaxPage” son páginas que están alojadas en Views/Home/ y contienen la respuesta que se visualiza en el cliente.
Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!
Si te ha servido compártelo y difunde nuestro blog..
