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: ,,
Advertisements

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.

    Reply
    1. Balássy György Post author

      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 🙂

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s