El HTML generado por el navegador para la vista Cliente/Editar aparece a continuación. Vale la pena estudiar detenidamente el HTML del lado del cliente porque al hacerlo se aclara la relación entre las vistas parciales, los elementos y las acciones del controlador.
Tenga en cuenta las siguientes características del HTML:
- Hay dos elementos de la forma, uno en cada uno de los elementos correspondientes a las vistas parciales:www. div. div.;
- Cada forma tiene una ficha anti-falsificación.
- Cada forma tiene una acción HTTP POST que apunta a la firma del método controlador correspondiente al método POST para la vista parcial asociada.
- El elemento de formulario SelectAddressTypePartial incluye atributos Ajax que especifican las acciones a realizar cuando la acción POST regrese del servidor, incluyendo la especificación del reemplazo del elemento CreateAddress.
- El elemento <div³³³; existe dentro del elemento <corp³³³, pero fuera de cualquiera de los elementos <form³³³.
- En la parte inferior de la página se incluyen jquery-3.2.1.js y jquery.unobtrusive-ajax.js, las dos bibliotecas esenciales para las clases de AjaxHelper.
La elipsis (…) indica que el código ha sido redactado para ser más breve.
localhost:61621/Customer/Edit/68f8202d-21cb-4090-a86c-0722bf588d1b
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119< ! DOCTYPE html;<html;head;<metacharset="utf-8"/;<metaname="viewport "content="width="ancho=ancho de dispositivo, escala inicial=1.0"<title;Edit Customer Information - My ASP. NET Application</title&;www.www. www. www. www. www. www. www. www. www. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ...editar la información de los clientes</h2 <inputname="__RequestVerificationToken "type="hidden "value="rN4xA8UDIHeo8YHYFZ4Bnc16Fr6oQdjpnV0hKPNpgHcMHNe5ZyE7tCP5ouWG3OyRGI8a9ihfpoaonfd1pf5o-RcQuG7049hNX0cKSTuNE0I1"/> ...div...hr/...h4..; Editar los detalles del cliente</h4;div&&d4;;labelfor="CustomerID"/Número de cliente</label&d4;div&d4;;inputname="CustomerID "readonly="readonly "type="text "value="68f8202d-21cb-4090-a86c-0722bf588d1b"/> labelfor="CustomerName"/Nombre del cliente</label;/según el cual el nombre del cliente es un nombre de usuario y no un nombre de usuario. "data-val-length-max="75 "data-val-required="El campo Nombre del cliente es obligatorio. "name="CustomerName "type="text "value="Spacely Space Sprokets"/;<spandata-valmsg-for="CustomerName "data-valmsg-replace="true"</span></div>< /div;div;²;²;labelfor="SelectedCountryIso3"²;Country</label;²;²;div;²;²;selectdata-val="true "data-val-required="El campo País es obligatorio. "name="SelectedCountryIso3"³;<optionvalue=""--- select country ---</option --> --> --> optionvalue="CAN"³;Canada</option --> --> optionvalue="FRA"³;France</option --> --> --> optionselected="selected "value="USA">Estados Unidos de América</option --> -->select spandata-valmsg-for="SelectedCountryIso3 "data-valmsg-replace="true"--> -->span>/div;</div;;div></div;;labelfor="SelectedRegionCode"-->Estado / Región</label "name="SelectedRegionCode"³;<optionvalue="AL"³;Alabama</option²;<optionvalue="AK"³;Alaska</option²; ... optionvalue="WY">Wyoming</option&;</select&;www.spandata-valmsg-for="SelectedRegionCode "data-valmsg-replace="true"->;/span></div;;/div;;div,->;div,->;inputtype="submit "value="Save"/mph;/div,->; /div.;/div.;/form.;/div.;/div.;/div.;/div; formaction="/Customer/AddressTypePartial/68f8202d-21cb-4090-a86c-0722bf588d1b "data-ajax="true "data-ajax-method="POST "data-ajax-mode="replace "data-ajax-update="#CreateAddress "method="post "*; w6veexTOKQxJc3_3BQh7yRC7mHM-iSQgkXaIQdh3EZsTVELEnsxpgpYtSSpZ4CO0ZZdfQrEjck8UBomFrTcHfJuH343y1n1eWv_OmDCjAUE1"/ > Seleccione un tipo de dirección para agregar</h4;<inputdata-val="true "data-val-length="El campo CustomerID debe ser una cadena con una longitud máxima de 38. "data-val-length-max="38 "name="CustomerID "type="hidden "value="68f8202d-21cb-4090-a86c-0722bf588d1b"/>div><div><labelfor="SelectedAddressType">Tipo de dirección< /label="SelectedAddressType"/div.;/selectname="SelectedAddressType"/option="Email spandata-valmsg-for="SelectedAddressType "data-valmsg-replace="true"--> -->span;/div;;/div;;;div;;;div;;;inputtype="submit "value="Select"/mcdiv;;/div;;/div; Regresar a la lista</div .. <scriptsrc="/Scripts/jquery-3.2.1.js"></script><scriptsrc="/Scripts/bootstrap.js">/script>scriptsrc="/Scripts/respond.js">/Scripts/jquery. unobtrusive-ajax.js";/Scripts/jquery,
scriptsrc=»/Scripts/jquery.validate.js»;/Scripts/jquery,
html
Cliente/Editar respuesta de Ajax
Cuando se selecciona «Email» para Address Type y se pulsa el botón Select , el CreateAddress se sustituye por el siguiente código:
1234567891011121314151617181920<div><formaction="/Cliente/CreateEmailAddressPartial "method="post"< inputname="__RequestVerificationToken "type="hidden "value="p3BCpdqspecbfFOxrQfzdrt9cyoiVgtloMzHDYUbYgmeVbEssngLCmfWTUGGY0p8sWGzOFex1PURQDZCctvoteNvTBeDVfUgPJ8CrebXxl41"/ >..; El campo CustomerID debe ser una cadena con una longitud máxima de 38. "data-val-length-max="38 "name="CustomerID "type="hidden "value="68f8202d-21cb-4090-a86c-0722bf588d1b"/>div><labelfor="Email">Email</label=;<div><inputname="Email "type="email "value=""/>< spandata-valmsg-for="Email "data-valmsg-replace="true"-->;</span></div;;/div;;div;;div;;;inputtype="submit "value="Add"/mph;;/div;;/div;;/div;;/form;;/div;
html
Esto añade un tercer elemento a la página con su propio botón de envío. Al seleccionar «Postal» en el desplegable Tipo de dirección y al pulsar Seleccionar se añade la correspondiente vista parcial para añadir una dirección postal.
Cada formulario interactúa con sus propios métodos de control, al igual que los formularios para editar la información del cliente y seleccionar el tipo de dirección a añadir (correo electrónico o postal). En consecuencia, se puede añadir información actualizada sobre el cliente utilizando el primer formulario de la página, independientemente de la presentación de la información sobre la dirección de correo electrónico o la dirección postal.
Acciones del controlador
Al examinar los métodos de CustomerController.cs se obtendrá una comprensión más completa de cómo funciona cada sección de la vista Cliente/Editar y cómo se utiliza Ajax para actualizar la vista con nuevo contenido sin necesidad de actualizar toda la página.
En el siguiente cuadro se resumen los elementos de la vista y los métodos de control con los que interactúan:
ViewViewModelForm Helper TypeHTTP ActionController MethodEdit.cshtml(none)(none)GETActionResult Edit(string id)EditCustomerPartial.cshtmlCustomerEditViewModel. csHTMLGETActionResultadoEditarClienteParcial(stringid)EditarClienteParcial.cshtmlClienteEditarVerModelo.csHTMLPOSTActionResultadoEditarClienteParcial(ClienteEditarVerModelo)DirecciónTipoParcial.cshtmlDirecciónTipoVerModelo. csAjaxGETActionResultadoDirecciónTipoParcial(Identificador de cadena)DirecciónTipoParcial.cshtmlDirecciónTipoVerModelo.csAjaxPOSTActionResultadoDirecciónTipoParcial(DirecciónTipoVerModelo)CrearDirecciónCorreoParcial.cshtmlDirecciónCorreoVerModelo. csHTMLPOSTActionResultadoCrearDirecciónCorreoParcial(DirecciónCorreoVistaModelo)CrearDirecciónPostalParcial.cshtmlDirecciónPostalEditarVistaModelo.csHTMLPOSTActionResultadoCrearDirecciónCorreoParcial(DirecciónPostalEditarVistaModelo)
Obsérvese que no hay un método POST para la vista padre Edit porque todos los formularios y botones de envío pertenecen a vistas parciales y cada uno tiene sus propios métodos de controlador asociados.
Obsérvese también que no hay acciones HTTP GET para las vistas parciales de la dirección de correo electrónico y la dirección postal. Estas vistas se obtienen mediante la firma de la acción POST del método AddresTypePartial.
Editar Ver Método GET
La presentación de la vista comienza con un método ActionResult para Edit.cshtml , la página principal. Tenga en cuenta que no hay ningún modelo de vista asociado a esta vista; como se ha descrito anteriormente, todos los modelos de vista relacionados están asociados a las vistas parciales. Todo lo que esta vista necesita es comprobar si hay un GUID válido y devolver la vista.
12345678910111213// GET: Cliente/Edit/68f8202d-21cb-4090-a86c-0722bf588d1bpublicActionResultEdit(string id){if(!String.IsNullOrWhiteSpace(id)){bool isGuid = Guid. TryParse(id,outGuid customerId);if(isGuid && customerId != Guid.Empty){returnView();}}}returnnewHttpStatusCodeResult(HttpStatusCode.BadRequest);}csharp
Método EditCustomerPartial GET
Este método se llama durante la renderización de Edit.cshtml por esta línea en la vista Razor:
@Html.Action(«EditCustomerPartial», new { id = Url.RequestContext.RouteData.Values[«id»] })
Note que el método de ayuda Html.Action pasa el valor de la ruta para el CustomerID como argumento. El valor de id se utiliza para recuperar el registro de cliente de la base de datos de SQL Server mediante el método GetCustomer de CustomersRepository.
La información del cliente se devuelve en una instancia de CustomerEditViewModel, que proporciona los valores de las listas desplegables para el país y la región, así como los valores actuales para el país y la región asociados con el registro del cliente. Todo esto es manejado por el repositorio, de manera que la lógica de negocios no tiene que preocuparse de los datos necesarios para mecanizar la interfaz de usuario.
csharpChildActionOnlypublic ActionResultado EditCustomerPartial(string id){if (!String.IsNullOrWhiteSpace(id)){bool isGuid = Guid.TryParse(id, out Guid customerId);if (isGuid && customerId ! = Guid.Empty){var repo = new CustomersRepository();var model = repo.GetCustomer(customerId);return View(model);}}devuelve el nuevo HttpStatusCodeResult(HttpStatusCode.BadRequest);}
123456789101112131415161718192021222324252627282930 El método está decorado con el atributo "ChildActionOnly" para indicar que sólo puede ser llamado dentro de una vista de padre, nunca como una acción GET independiente. Esto evita que la vista parcial se renderice por sí misma y que se utilice potencialmente para subvertir el correcto funcionamiento de la aplicación.##### AddressTypePartial GET MethodEste método se llama durante la renderización de **Edit.cshtml** por esta línea en la vista Razor:`@Html. Action("AddressTypePartial", new { id = Url.RequestContext.RouteData.Values["id"] })`Como en la vista parcial para la edición de la información del cliente, este método GET rellena los datos en el modelo de vista que soporta la interfaz de usuario. ```csharp[ChildActionOnly]public ActionResult AddressTypePartial(string id){ if (!String.IsNullOrWhiteSpace(id)) { bool isGuid = Guid.TryParse(id, out Guid customerId); if (isGuid && customerId ! = Guid.Empty) { var repo = new MetadataRepository(); var model = new AddressTypeViewModel() { CustomerID = id, AddressTypes = repo.GetAddressTypes() }; return PartialView("AddressTypePartial", model); } } devolver nuevo HttpStatusCodeResult(HttpStatusCode.BadRequest);}En este punto, el motor de la Navaja tiene todos los datos y marcas que necesita para renderizar la página. La vista Cliente/Editar puede ser utilizada por el usuario.
AddressTypePartial POST Method
Cuando el usuario selecciona un tipo de dirección para añadir y pulsa el botón Select , los datos se envían al servidor y se manejan por el método POST para AddressTypePartial. Este método no se ejecutará a menos que el token anti-falsificación asociado al formulario sea válido.
123456789101112131415161718192021222324252627282930[HttpPost][ValidateAntiForgeryToken]publicActionResultAddressTypePartial(AddressTypeViewModel model){if(ModelState.IsValid &&!String.IsNullOrWhiteSpace(model.CustomerID)){switch(model. SelectedAddressType){case "Email":var emailAddressModel =newEmailAddressViewModel(){ CustomerID = model.CustomerID };returnPartialView("CreateEmailAddressPartial", emailAddressModel);case "Postal":var postalAddressModel =newPostalAddressEditViewModel(){ CustomerID = model. CustomerID };var countriesRepo =newCountriesRepository(); postalAddressModel.Countries = countriesRepo.GetCountries();var regionsRepo =newRegionsRepository(); postalAddressModel.Regions = regionsRepo. GetRegions();returnPartialView("CreatePostalAddressPartial", postalAddressModel);default:returnnnewHttpStatusCodeResult(HttpStatusCode.BadRequest);}}}returnnewHttpStatusCodeResult(HttpStatusCode.BadRequest);}csharp
Dependiendo del tipo de dirección seleccionada por el usuario, este método crea una instancia del modelo de vista apropiado y establece el valor de CustomerID. Si se selecciona el tipo de dirección postal, el controlador también rellena las colecciones SelectList pertinentes para las listas de países y regiones. El controlador devuelve entonces la vista apropiada junto con el modelo de vista asociado.
En el lado del cliente, el navegador toma el HTML y los datos del servidor y, utilizando las bibliotecas de JavaScript, muestra la vista parcial y sus datos de modelo de vista en lugar del elemento.
En este punto, el usuario puede introducir y presentar datos para el tipo de dirección seleccionado, o volver a seleccionar el tipo de dirección y ver la página actualizada con la otra vista parcial. Una vez que el usuario introduce los datos y presiona el botón Guardar , el método de controlador POST apropiado maneja la solicitud.
CreateEmailAddressPartial POST Method
En el caso de una dirección de correo electrónico, el método POST se ve así. Es una simple cuestión de usar el repositorio para guardar los datos y responder en consecuencia a los resultados de esa llamada al método.
123456789101112131415[HttpPost][ValidateAntiForgeryToken]publicActionResultatCreateEmailAddressPartial(EmailAddressViewModel model){if(ModelState.IsValid){var repo =newCustomersRepository();bool saved = repo. SaveEmailAddress(modelo);if(saved){returnRedirectToAction("Edit",new{ id = model.CustomerID });}}}returnnewHttpStatusCodeResultado(HttpStatusCode.BadRequest);}csharp
En el proyecto de ejemplo, cuando la dirección de correo electrónico se guarda con éxito, el controlador pasa el control al método para cargar la página Cliente/Editar (Edit.cshtml) para el cliente actual. Esto equivale a restablecer la página. En las aplicaciones del mundo real, es posible obtener cualquier otro resultado, incluida la recarga de una vista parcial de Ajax que muestra la lista actual de direcciones del tipo asociado.