Tabelle mit AJAX in ASP.NET aktualisieren MVC

Question

Ich möchte Tabelle in MVC mit Ajax aktualisieren. Ich habe bereits Daten in die Datenbank mit Ajax eingefügt. Ich möchte nur die Tabelle aktualisieren, nachdem ich eine neue Zeile eingefügt habe.

PS. Ich habe versucht zu suchen, aber nichts hat mir geholfen, ich bin immer noch verwirrt.

Here is my code: 

Main page View: 

<div id="theTable"> 
    @Html.Partial("_IPTable") 
</div> 
    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/Admin.js"></script>"` 

Partial page View: 

<table id="table">` 
    <tr> 
     <th>ID</th> 
     <th>Line</th> 
     <th>Supplier</th> 
    </tr> 

    @foreach (var item in ViewBag.IPTable)` 
    { 
     <tr> 
      <td> 
       @item.ID 
      </td> 
      <td> 
       @item.Line 
      </td> 
      <td> 
       @item.Supplier 
      </td> 
     </tr> 

    } 
</table>enter code here 

Controller view: 

public ActionResult Admin() 
     { 
      // get data from database 
      return View(); 
     } 
public ActionResult _IPTable() 
     { 

      return PartialView(); 
     } 

Ajax-Code für Einsatz neuen Rekord:

<script> 
$(document).ready(function() { 
//function will be called on button click having id btnsave 
$("#btnSave").click(function() { 
    $.ajax(
    { 
     type: "POST", //HTTP POST Method 
     url: "AdminInsert", // Controller/View 
     data: { //Passing data 
      //Reading text box values using Jquery 
      Line: $("#txtLine").val(), 
      Supplier: $("#txtSupplier").val() 
     } 
    }); 
}); 

}); </script> 

Answer 1

Sie können eine Aktion Methode erstellen, die den HTML-Markup zurück benötigt, um Ihre Tabelle zu machen. Lassen Sie uns ein View-Modell erstellen, mit dem wir die Tabellendaten übergeben.

public class ItemVm 
{ 
    public string ItemId {set;get;} 
    public string Line {set;get;} 
    public string Supplier {set;get;} 
} 

Jetzt in Ihrer Aktionsmethode, Ihre Daten aus der Tabelle, Last auf eine Liste unserer Ansicht Modellklasse erhalten und zur Ansicht schicken. Da ich mir über Ihre Tabellenstruktur/Datenzugriffsmechanismen nicht sicher bin. Ich werde die Artikel hart codieren. Sie können es durch echte Daten ersetzen.

public ActionResult TableData() 
{ 
    var items = new List<ItemVm>{ 
     new ItemVm { ItemId="A1", Line="L1", Supplier="S1" }, 
     new ItemVm { ItemId="A2", Line="L2", Supplier="S2" }  
    }; 
    return PartialView("TableData",items); 
} 

Nun stellen Sie sicher, dass Ihre Teilansicht stark auf eine Sammlung unserer Ansicht Modell eingegeben wird

@model List<ItemVm> 
<table> 
@foreach(var item in Model) 
{ 
    <tr><td>@item.ItemId</td><td>@item.Line</td></td>@item.Supplier</td></tr> 
} 
</table> 

Jetzt alles, was Sie sich zu tun haben, diese Aktion Methode aufrufen und das DOM mit der Antwort aktualisieren zurück kommen. Sie können das im Ereignishandler success Ihres Ajax-Aufrufs tun, wo Sie einen neuen Datensatz einfügen. Sie können die Methode jQuery load verwenden, um das relevante Element im DOM zu aktualisieren.

$(document).ready(function() { 
    $("#btnSave").click(function() { 

    $.ajax(
    { 
     type: "POST", //HTTP POST Method 
     url: "AdminInsert", // Controller/View 
     data: { //Passing data 
      //Reading text box values using Jquery 
      Line: $("#txtLine").val(), 
      Supplier: $("#txtSupplier").val() 
     } 
    }).success(function() { 
      $("#theTable").load("/YourControllerName/TableData"); 
     }); 
}); 

Jetzt für die erste Ansicht können Sie unsere neue Teilansicht verwenden. Aber da es eine Liste von ItemVm erwartet, müssen Sie es explizit übergeben, anstatt es über ViewBag zu übergeben.