es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Invocar un componente de vista (.ViewComponent) desde un controlador en .NET CORE.

16 Jul, 2023 Programación

Tengo problemas para cargar un ViewComponent desde un controlador, mi vista principal es Contact.cshtml y mi ViewComponent es AddContact.cshtml. AddContact es un formulario simple con un botón de envío, estoy tratando de hacer que cuando el modelo sea inválido, el componente se actualice con los datos que se ingresaron y los mensajes de validación del modelo.

El problema es que cuando retorno “ViewComponent(“AddContact”, newContact)” en el controlador con el modelo inválido ‘newContact’, recarga el ViewComponent en una página completamente nueva y no como una parcial en la vista Contact. ¿Hay alguna sintaxis que me falte o esto requeriría algo completamente diferente?

Contact.cshtml:

@await Component.InvokeAsync("AddContact", new { addContact = newContactModel })

AddContact.cshtml

@using (Html.BeginForm("AddContact", "Contact", FormMethod.Post))
{
    ....

<input id="addContactBtn" type="submit" value="Add" class="btn btn-success">


}

Controller:
```cs
[HttpGet]
public ActionResult AddContact()
{
    return ViewComponent("AddContact");
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddContact(AddContact_VM newContact)
{
    if (!ModelState.IsValid)
    {
        return ViewComponent("AddContact", newContact);
    }

    OperationStatus opStat = granteeRepo.AddContact(newContact);

    return View("Contact");
}

Component:

public class AddContact : ViewComponent
{
    public IViewComponentResult Invoke(AddContact_VM newContact)
    {
        return View("AddContact", newContact);
    }
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para renderizar un ViewComponent como una vista parcial en la vista principal, se debe utilizar el ViewComponentTagHelper en lugar de Component.InvokeAsync en la vista principal. Aquí hay un fragmento de código actualizado para Contact.cshtml:

    <vc:add-contact add-contact="@newContactModel"></vc:add-contact>

    Ten en cuenta que necesitas agregar el siguiente tag helper al archivo _ViewImports.cshtml:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

    Luego, en tu componente AddContact, puedes utilizar la propiedad ModelState para verificar si hay errores de validación y devolver la misma vista con los datos enviados y los mensajes de validación. Aquí hay un fragmento de código actualizado para AddContact.cshtml:

    @model AddContact_VM

@using (Html.BeginForm(nameof(AddContact), "Contact", FormMethod.Post))
{
    // ...

    @if (!ModelState.IsValid)
    {
        <div class="text-danger">
            @foreach (var key in ModelState.Keys)
            {
                foreach (var error in ModelState[key].Errors)
                {
                    <div>@error.ErrorMessage</div>
                }
            }
        </div>
    }

    <input id="addContactBtn" type="submit" value="Add" class="btn btn-success">
}

    Y finalmente, en el método de acción POST de tu controlador, puedes devolver el mismo ViewComponent con los datos enviados y los mensajes de validación utilizando el método ViewComponent. Aquí hay un fragmento de código actualizado para el método de acción AddContact:

    [HttpPost]
[ValidateAntiForgeryToken]
public IActionResult AddContact(AddContact_VM newContact)
{
    if (!ModelState.IsValid)
    {
        return ViewComponent("AddContact", new { addContact = newContact });
    }

    // ...

    return RedirectToAction(nameof(Index));
}

Comments are closed.