Ajaxos táblázatfrissítés ASP.NET MVC-ben JavaScript nélkül

A HTML5 Játéktér fejlesztésénél jött elő a feladat, hogy egy Ajax hívás után frissíteni kell egy táblázatot, pontosabban törölni kell egy sort belőle. Ha az adott sorban a felhasználó rákattint a Törlés gombra, akkor törölni kell a megfelelő rekordot a szerveren, majd a kliens oldalon a táblázatból is, természetesen teljes page postback nélkül. A jó hír az, hogy ezt ASP.NET MVC-ben egyetlen sor JavaScript írása nélkül meg lehet tenni.

Íme a view egy részlete, ami a táblázat egy sorát rendereli:

<tr id="game-@item.Slug">
  <td>
    @Ajax.ActionLink( "Törlés", "Delete", "Game",
      new { slug = item.Slug },
      new AjaxOptions
      {
        Confirm = "Biztos?", 
        InsertionMode = InsertionMode.Replace, 
        UpdateTargetId = "game-" + item.Slug
      },
      new { @class = "button delete" } )
  </td>
</tr>    

A lényeges részeket aláhúztam:

  • Minden sornak generálunk egy egyedi id attribútumot.
  • Az Ajax hívásnál megadjuk, hogy a szervertől érkező válasszal cserélje ki (InsertionMode) az egész sort (UpdateTargetId).

Ha a feladat az aktuális sor eltávolítása, akkor csak arról kell gondoskodnunk, hogy a szerver oldali controller action üres válasszal térjen vissza:

public ActionResult Delete( string slug )
{
  // Ide jön a törlés...

  return new EmptyResult();
}

 

Technorati-címkék: ,,

2 thoughts on “Ajaxos táblázatfrissítés ASP.NET MVC-ben JavaScript nélkül

  1. kketto

    Egy közbevetés: mi történik, ha történetesen ez egy lapozható táblázat volt (pl. 253 sorból mutatta a 2. 50-et), akkor itt nem csak a törlés van, hanem a következő lapról be kell “úsztatni” az első sort, a látható rész végére.

    1. Balássy György Szerző

      Teljesen igazad van, ez nem egy minden esetben használható, általános megoldás. Nem kezeli sem a lapozást, sem a rendezést, sem a szűrést. Viszont egyszerű esetre egyszerű megoldás🙂

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s