Formular absenden und Controller-Aktion von ViewComponent in ASP.NET Core ausführen

Question

Ich möchte ListItems aus einem Formular in einer ViewComponent in einer Kernanwendung von ASP.NET 5, Mvc hinzufügen.

Die Komponentenansicht (Views \ Shared \ Components \ AddListItem \ Default.cshtml):

@model ShoppingList.Models.ListItem 
<form asp-action="Create"> 
    <div class="form-horizontal"> 
     <hr /> 
     <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div> 
     <!-- some fields omitted for brevity --> 
     <div class="form-group"> 
      <label asp-for="Description" class="col-md-2 control-label"></label> 
      <div class="col-md-10"> 
       <input asp-for="Description" class="form-control" /> 
       <span asp-validation-for="Description" class="text-danger" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
</form> 

Die ViewComponent Regler (ViewComponents \ AddListItem.cs):

namespace ShoppingList.ViewComponents 
{ 
    public class AddListItem : ViewComponent 
    { 
     private readonly ApplicationDbContext _context; 

     public AddListItem(ApplicationDbContext context) 
     { 
      _context = context; 
     } 

     public IViewComponentResult Invoke(string listId) 
     { 
      return View(); 
     } 

     [HttpPost] 
     [ValidateAntiForgeryToken] 
     public async Task<IViewComponentResult> Create (ListItem listItem) 
     { 
      _context.ListItem.Add(listItem); 
      await _context.SaveChangesAsync(); 
      return View(listItem); 
     } 

    } 
} 

Die Komponente aufgerufen wird, in home.shtml:

@{ 
     ViewData["Title"] = "Home Page"; 
} 

@Component.Invoke("AddListItem", @ViewBag.DefaultListId) 

Allerdings kann ich dies nicht zur Arbeit bekommen. Nichts wird hinzugefügt.

Answer 1

Umbenennen AddListItem zu AddListItemViewComponent. Dies ist eine Konvention, die von ASP.NET zum Suchen der Komponente verwendet wird. ViewComponents muss mit einem Suffix ViewComponent enden. Wenn Sie dies nicht tun möchten, können Sie die Klasse mit dem Attribut [ViewComponent] dekorieren und die Eigenschaft name auf den von Ihnen gewünschten Namen setzen.

Auch die Create Methode wird nie aufgerufen werden und ViewComponents wird niemals auf eine HttPost reagieren, weil es nur Zweck ist, Ansicht anzuzeigen und Code als Reaktion auf ein Postback nicht auszuführen. Die Ansicht ruft entweder nur Invoke oder ihre asynchrone Version InvokeAsync auf und nichts anderes.

Es ist ein bisschen verwirrend auf den ersten, aber eine einfache Möglichkeit, darüber nachzudenken, es ist wie ein mächtiger Partial in dem Sinne, dass Sie mehr Material in der Klasse Komponente tun können, DI freundlich, und ist einfacher, als auch zu testen.

Die ASP.NET-Team hat eine Seite, die ViewComponents here

Answer 2

Danke für Ihre Hilfe, @Dealdiane erklärt.

Falls jemand intested, hier ist der Arbeitscode:

Views \ Shared \ Components \ AddListItem \ Default.cshtml

<form asp-controller="ListItems" asp-action="QuickCreate"> 
    <div class="form-horizontal"> 
     <hr /> 
     <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div> 

     <div class="form-group"> 
      <label asp-for="No" class="col-md-2 control-label"></label> 
      <div class="col-md-10"> 
       <input asp-for="No" class="form-control" /> 
       <span asp-validation-for="No" class="text-danger" /> 
      </div> 
     </div> 
... 

Controller \ ListItemsController.cs

// POST: ListItems/QuickCreate 
    // Create item without showing view, return to home 
    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public async Task<IActionResult> QuickCreate(ListItem listItem) 
    { 
      _context.ListItem.Add(listItem); 
      await _context.SaveChangesAsync(); 
      return Redirect("/"); 
    } 

Die vollständiger Quellcode des Projekts in Arbeit finden Sie hier: GitHub ShoppingList