2009-04-20 9 views
1

J'ai un peu de JavaScript dans l'une de mes pages qui évite le problème des utilisateurs boutons double-cliquant sur une forme et provoquant doubles présentations lors de postbacks asynchrones:id élément null pour DataGrid ButtonColumns

var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest);

var btn; 

function InitializeRequest(sender, args) { 
    document.body.style.cursor = "wait"; 
    var btnId = args._postBackElement.id; 
    btn = document.getElementById(btnId); 
    if (btn != null && (btn.type == "button" || btn.type == "submit")) 
    btn.disabled = true; 
} 

function EndRequest(sender, args) { 
    document.body.style.cursor = "default"; 
    if (btn != null) btn.disabled = false; 
} 

Cela ne fonctionne pas avec DataGrid ButtonColumns. document.getElementById (btnId) renvoie null pour ceux-ci.

Si j'utilise un TemplateColumn et que je place un contrôle Button à l'intérieur, cela fonctionne correctement.

En regardant le code HTML qui obtient rendu pour la DataGrid, je peux voir que ASP.NET n'est pas fournir en sortie un onclick pour le ButtonColumn, où il ne fait donc un bouton à l'intérieur d'un TemplateColumn:

ButtonColumn :

 
<input type="submit" 
    name="ctl00$placeholderContent$dgCommittees$ctl03$ctl00" 
    value="Edit" /> 

Button dans TemplateColumn:

 
<input type="submit" 
    name="ctl00$placeholderContent$dgCommittees$ctl03$cmdDelete" 
    value="Delete" 
    onclick="return confirm('Are you sure you wish to delete this committee?'); 
    WebForm_DoPostBackWithOptions(
    new WebForm_PostBackOptions("ctl00$placeholderContent$dgCommittees$ctl03$cmdDelete", "", true, "", "", false, false))" 
    id="ctl00_placeholderContent_dgCommittees_ctl03_cmdDelete" /> 

Évidemment la réponse à "comment puis-je faire ce travail?" est de simplement remplacer tous mes ButtonColumns avec des boutons dans TemplateColumns. Je suis curieux si quelqu'un sait pourquoi ASP.NET rend ButtonColumns de cette façon, et s'il y a un moyen de le rendre le même que les boutons.

Répondre

2

MS a une implémentation standard de champs liés, qui ne définit pas d'ID ou d'attributs pour les boutons créés par ButtonColumn.

Pour être un peu plus précis, chaque fois qu'une grille crée des cellules et des boutons sous-séquence, il appelle InitializeCell:

public override void InitializeCell(TableCell cell, int columnIndex, ListItemType itemType) 
{ 
    base.InitializeCell(cell, columnIndex, itemType); 
    if ((itemType != ListItemType.Header) && (itemType != ListItemType.Footer)) 
    { 
     WebControl child = null; 
     if (this.ButtonType == ButtonColumnType.LinkButton) 
      ... 
     else 
     { 
      child = new Button { 
       Text = this.Text, 
       CommandName = this.CommandName, 
       CausesValidation = this.CausesValidation, 
       ValidationGroup = this.ValidationGroup 
      }; 
     } 
     ... 
     cell.Controls.Add(child); 
    } 
} 

Comme vous pouvez le voir, c'est tout ce qu'il ya à un bouton.

Si vous voulez qu'il ait ID et « onclick » attributs, vous pouvez utiliser quelque chose comme ceci:

protected void grid_RowCreated(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     //assuming that a first cell is a ButtonField 
     //note that in edit mode a button may be at some other index that 0 
     Button btn = e.Row.Cells[0].Controls[0] as Button; 
     if (btn != null) 
     { 
      btn.OnClientClick = "return confirm('are you sure?')"; 
      btn.ID = "myButtonX"; 
     } 
    } 
} 
1

Je vous recommande d'utiliser JQuery pour ajouter des gestionnaires d'événements sur vos boutons. Voici un exemple:


function onclick() { 
    alert("1"); 
} 
$(function() { 
    $("input[type='submit']").click(onclick); 
}); 

Ce code Attachera la fonction onclick à l'événement onclick pour tous input éléments de type submit lorsque le DOM est prêt.

La technique unobtrusive JavaScript peut vous intéresser.

Je tiens à mentionner que Microsoft prend en charge JQuery, et ils le prendront en charge dans les prochaines versions de Visual Studio. Pour plus d'informations s'il vous plaît visitez http://live.visitmix.com/.

Questions connexes