Ako na mazanie položiek GridView s efektným JavaScriptovým potvrdením

15. februára 2010 · Igor Kulman

Ak používate v komponente GridView na mazanie položiek štandardnú funkcionalitu,isto vás už napadlo, pridať na tlačidlo Zmazať nejaký potvrdzovací dialóg, aby nedochádzalo k nechceným zmazaniam položiek.

Najjednoduchším riešením je využiť základné možnosti JavaScriptu.

<asp:GridView ID="GridView1" runat="server" DataKeyNames="id" DataSourceID="InvoicesDS" OnRowDataBound="GridView1_RowDataBound">
<Columns>
 ...
 <asp:TemplateField ShowHeader="False">
 <ItemTemplate>
 <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Delete"
 OnClientClick='return confirm("Naozaj chcete zmazať túto položku?");'
 Text="Zmazať" />
 </ItemTemplate>
 </asp:TemplateField>
</Columns>
</asp:GridView>

Takýto štandardný potvrdzovací dialóg však nevyzerá vôbec dobre, nie je možné upraviť jeho vzhľad, titulok okna a ani názvy tlačidiel. Oveľa lepší výsledok je možné dosiahnuť pomocou jQuery Impormtu, je to však trochu komplikovanejšie.

Najprv je potrebné do hlavičky vložiť odkaz na css a js od jQuery Impromptu

<script src="/Scripts/jquery-impromptu.2.6.min.js" type="text/javascript"></script> 
<link href="/css/impromptu.css" rel="stylesheet" type="text/css" />

a pomocnú funkciu

function confirmDeleteResult(v, m, f) {
 if (v) 
 $('#' + f.hidID).click();
}

V definícií GridView zameníme štandardné tlačidlo na zmazanie záznamu na skryté tlačidlo,ktoré vykoná skutočné zmazanie a odkaz,ktorý sa bude zobrazovať

<asp:GridView ID="GridView1" runat="server" DataKeyNames="id" DataSourceID="InvoicesDS" OnRowDataBound="GridView1_RowDataBound">
<Columns>
 ...
 <asp:TemplateField>
 <ItemTemplate>
 <a id="linkDelete" runat="server" href="#" title="<%$ Resources: Default, Delete %>"><asp:Image ID="Imagecasas1" runat="server" AlternateText="<%$ Resources: Default, Delete %>" ImageUrl="~/img/delete.png" /></a>
 <asp:Button runat="server" CommandName="Delete" ID="btnDelete" Style="display: none;" />
 </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Najdôležitejšia časť sa deje v Code Behind, priradenie dialógu na odkaz

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
   HtmlAnchor linkDelete = (HtmlAnchor)e.Row.FindControl("linkDelete");
   Button btnDelete = (Button)e.Row.FindControl("btnDelete");
   
    string prompt = "$.prompt('Naozaj chcete danú položku zmazať?"
   + "<input type=\"hidden\" value=\"{0}\" name=\"hidID\" />'"
   + ", {{buttons: {{ Áno: true, Nie: false }}, callback: confirmDeleteResult}} ); return false; ";
   linkDelete.Attributes["onclick"] = string.Format(prompt, btnDelete.ClientID);
 }
}

Pre dosiahnutie lepšieho efektu odporúčam (v mojom prípade do ObjectDataSource) pridať zobrazenie hlásenia o úspešnom vymazaní položky

protected void invoicesDS_Deleted(object sender, ObjectDataSourceStatusEventArgs e)
{
 string prompt = "<script>$(document).ready(function(){{$.prompt('{0}!');}});</script>";
 string message = string.Format(prompt, "Položka úspešne zmazaná");
 ClientScript.RegisterStartupScript(typeof(Page), "alert", message);
}