WebHU - Programozási kérdések és válaszok

Táblázat frissítése AJAX használatával az ASP.NET MVC-ben

Frissíteni akarok táblát MVC-ben ajax használatával. Adatokat már beszúrtam az adatbázisba ajax segítségével. Csak frissíteni szeretném a táblázatot, miután beszúrtam egy új sort.

PS. Próbáltam keresni, de semmi sem segített, még mindig tanácstalan vagyok.

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 kód az új rekord beszúrásához:

 <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>

  • Hol van a kódod új sor beszúrásához ajaxon keresztül? 28.07.2016
  • Az ügyféloldali kódra gondoltam. 28.07.2016
  • Lent tettem közzé. 28.07.2016
  • Kérjük, adja meg a $.ajax függvénykódját, a jquery/javascrip kódot 28.07.2016
  • Kérjük, csak az ajax hívás megfelelő részét tegye közzé. 28.07.2016

Válaszok:


1

Létrehozhat egy műveleti metódust, amely visszaadja a táblázat megjelenítéséhez szükséges HTML-jelölést. Hozzunk létre egy nézetmodellt, amellyel a táblázat adatait továbbítjuk.

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

Most a műveletmódszerben kérje le adatait a táblázatból, töltse be a nézetmodell osztályunk listájába, és küldje el a nézetbe. Mivel nem vagyok biztos a tábla szerkezetében/adatelérési mechanizmusában. A tételeket keményen kódolom. helyettesítheti valós adatokkal.

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);
}

Most győződjön meg arról, hogy a részleges nézet erősen be van írva nézetmodellünk gyűjteményébe

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

Most már csak annyit kell tennie, hogy meghívja ezt a műveleti metódust, és frissítse a DOM-ot a válasz visszatérésével. Ezt megteheti az ajax hívás success eseménykezelőjében, amelybe új rekordot szúr be. A jQuery load metódussal frissítheti a DOM megfelelő elemét.

$(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");
       });
});

A kezdeti nézethez használhatja az új részleges nézetünket. De mivel a ItemVm listát várja, kifejezetten át kell adnia a ViewBagen keresztül történő átadás helyett.

28.07.2016
  • fantasztikus! Voila Daniel kérlek figyelmen kívül hagyd a ViewBag használatát $.ajax cuccok használata közben. helyette használhatja a @model-t. 28.07.2016
  • Köszönöm! PS TableData részleges nézetként működött. 28.07.2016
  • Új anyagok

    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..