Können Sie nur eine Teilansicht anstelle von Ganzseitenpost aktualisieren?

Question

Gibt es eine Möglichkeit, ein Teilansichtsformular in asp.net mvc einzureichen, ohne die übergeordnete Seite neu zu laden, aber die Teilansicht nur in ihren neuen Zustand zu laden? Ähnlich wie knockout.js mit Data-Bind aktualisiert.

Meine Datentabelle rendert mit einer variablen Anzahl von Spalten/Namen, also glaube ich nicht, dass knockout.js eine Option für diese ist, also versuche ich stattdessen eine Teilansicht zu verwenden.

Answer 1

Nicht ohne jQuery.

Was müssen Sie tun würden, gesetzt wird Ihren Teil in einem div, so etwas wie:

<div id="partial"> 
    @Html.Partial("YourPartial") 
</div> 

Dann aktualisieren (zum Beispiel eine Schaltfläche mit der ID button klicken), könnten Sie tun:

$("#button").click(function() { 
    $.ajax({ 
     url: "YourController/GetData", 
     type: "get", 
     data: $("form").serialize(), //if you need to post Model data, use this 
     success: function (result) { 
      $("#partial").html(result); 
     } 
    }); 
} 

Dann würde die Aktion in etwa so aussehen:

public ActionResult GetData(YourModel model) //that's if you need the model 
{ 
    //do whatever 

    return View(model); 
} 

Answer 2

Eigentlich, wenn Ihr Teil hat eine untergeordnete Aktionsmethode, Sie können direkt an die untergeordnete Aktion posten (oder sogar einen Ankerlink verwenden) und einen Ajax-ähnlichen Affekt erhalten. Wir machen das in mehreren Ansichten.

Die Syntax ist

@Html.Action("MyPartial") 

Das Kind Aktion

public ActionResult MyPartial() 
{ 
    return PartialView(Model); 
} 

Wenn Ihr Formular Beiträge für das Kind Aktion

@using (Html.BeginForm("MyPartial")) 
{ 
    ... 
} 

die Teilansicht mit der Teilansicht aktualisiert werden ist von der Kinderaktion zurückgegeben.

Jquery ist immer noch eine legitime Möglichkeit, eine partielle zu aktualisieren. Aber technisch ist die Antwort auf Ihre Frage JA.

Answer 3

würde ich die Ajax-Formular-Helfer für solche Szenarien verwendet, um eine Teilansicht und @ Html.RenderPartial („partialname“) partial helpers

Answer 4

So normal, was ich finde, wenn die Suche nach Dingen wie diese Menschen geben zu verwenden begrenzte Informationen, so werde ich versuchen, hier zu helfen. Der Schlüssel ist, ein Div mit einer ID einzurichten, an die Sie das return html anhängen können. Auch wenn Sie Ihren Controller schlagen, stellen Sie sicher, dass es die Partiellen zurückgibt. Es gibt einige mögliche Probleme mit dieser Methode, aber an einem guten Tag sollte es funktionieren.

<div id="CategoryList" class="widget"> 
    @{ 
     Html.RenderPartial("WidgetCategories.cshtml"); 
    } 
</div> 

      function DeleteCategory(CategoryID) { 
      $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID, 
       function (data) { 
        if (data == "No") { 
         alert('The Category has report widgets assigned to it and cannot be deleted.'); 
        } 
        else { 
         $('#CategoryList').html(data); 
        } 

       } 
      ); 
     } 


    [HttpGet("DeleteWidgetCategory")] 
    [HttpPost("DeleteWidgetCategory")] 
    public IActionResult DeleteWidgetCategory(string CategoryID) 
    { 
     string Deleted = CategoryModel.DeleteCategory(CategoryID); 

     if (Deleted == "Yes") 
     { 
      return PartialView("WidgetCategories"); 
     } 
     else 
     { 
      return this.Json("No"); 
     } 
    }