Daily Archives: 2011.10.29. 4:00

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