Ajax.ActionLink Alternative mit MVC Kern

Question

In MVC5 gibt es @Ajax.ActionLink das ist nützlich, um nur eine Teilansicht zu aktualisieren, anstatt die gesamte Ansicht neu zu laden. Anscheinend wird in MVC6 nicht mehr unterstützt.

Ich habe versucht, mit @Html.ActionLink wie folgt aber nicht die Form aktualisieren, es Rückkehr nur die Teilansicht:

Ausblick:

@Html.ActionLink("Update", "GetEnvironment", "Environments", new { id = Model.Id }, new 
     { 
      data_ajax = "true", 
      data_ajax_method = "GET", 
      data_ajax_mode = "replace", 
      data_ajax_update = "environment-container", 
      @class = "btn btn-danger" 
     }) 

Kontrolle:

public async Task<ActionResult> GetEnvironment(int? id) 
{ 

     var environments = await _context.Environments.SingleOrDefaultAsync(m => m.Id == id); 
     return PartialView("_Environment",environments); 
} 

Teilansicht:

@model PowerPhysics.Models.Environments 
this is a partial view 

Dann versuchte ich ViewComponents. Wenn die Seite lädt die Komponente korrekt funktioniert, aber ich verstehe nicht, wie später nur die Komponente aktualisieren (zum Beispiel mit einer Taste):

Ausblick:

@Component.InvokeAsync("Environments", new { id = Model.Id }).Result 

Komponente:

public class EnvironmentsViewComponent : ViewComponent 
{ 
    public EnvironmentsViewComponent(PowerPhysics_DataContext context) 
    { 
     _context = context; 
    } 

    public async Task<IViewComponentResult> InvokeAsync(int? id) 
    { 
     var environments = await _context.Environments.SingleOrDefaultAsync(m => m.Id == id); 

     return View(environments); 
    } 
} 

Wie kann ich nur einen Teil einer Ansicht aktualisieren, indem ich PartialViews in MVC6 verwende?

Answer 1

ViewComponents sind kein Ersatz von ajaxifizierten Links. Es funktioniert eher wie Html.Action Aufrufe, um untergeordnete Aktionen in Ihre Seiten aufzunehmen (Beispiel: Laden einer Menüleiste). Dies wird ausgeführt, wenn der Rasierer die Seite für die Ansicht ausführt.

Zum Zeitpunkt des Schreibens gibt es keine offizielle Unterstützung für Ajax Action Link Alternative in Aspnet-Core.

Aber die gute Sache ist, dass wir das ajaxified Zeug mit sehr kleinem jQuery/Javascript-Code tun können. Sie können

<a asp-action="GetEnvironment" asp-route-id="@Model.Id" asp-controller="Environments" 
           data-target="environment-container" id="aUpdate">Update</a> 
<div id="environment-container"></div> 

im JavaScript-Code mit den vorhandenen Anchor-Tag Helfern dies tun, nur auf den Link klicken und den Anruf tätigen und das DOM aktualisieren.

$(function(){ 

    $("#aUpdate").click(function(e){ 

    e.preventDefault(); 
    var _this=$(this); 
    $.get(_this.attr("href"),function(res){ 
     $('#'+_this.data("target")).html(res); 
    }); 

    }); 

}); 

Da Sie die Parameter in Abfragezeichenfolgeflag sind vorbei, können Sie die jQuery load Methode auch verwenden.

Answer 2

Verwenden Sie stattdessen Tag-Helfer und stellen Sie sicher, dass Sie _ViewImport in Ihren Sichtenordner einschließen.

Hinweis: Stellen Sie sicher, document.getElementsByName zu verwenden, wenn mehrere Links auf verschiedene Seiten verweisen, die Ihr DIV aktualisieren.

Beispiel - Razor Seite

<script type="text/javascript" language="javascript"> 
    $(function() { 
     var myEl = document.getElementsByName('theName'); 
     $(myEl).click(function (e) { 

      e.preventDefault(); 
      var _this = $(this); 
      $.get(_this.attr("href"), function (res) { 
       $('#' + _this.data("target")).html(res); 
      }); 
     }); 
    }); 
</script> 
<a asp-action="Index" asp-controller="Battle" data-target="divReplacable" name="theName" >Session</a> 
<a asp-action="Index" asp-controller="Peace" data-target="divReplacable" name="theName" >Session</a> 


<div id="divReplacable"> 
    Some Default Content 
</div>