asp.net case à cocher convertie en case à cocher à trois états, sans toucher au gestionnaire d'événement d'origine

Question

J'ai un contrôle utilisateur avec une case à cocher asp.net. J'essaie d'écrire un script jquery pour convertir cette case à cocher normale en une case à trois états. Les états sont "cochés", "non cochés" et "intermédiaires". Cliquer sur un état intermédiaire devrait changer l'état à cocher, cliquer sur un état non coché devrait changer l'état à cocher, et cliquer sur l'état vérifié devrait changer l'état à non coché.

Mon idée était de pouvoir insérer une case à cocher normale asp.net dans la page, puis d'appeler la fonction jquery pour la rendre à trois états.

Voilà ma fonction jquery, qui est rude mais travail:

function SetTriStateCheckBox(checkboxfinder, initialval, originalCkbxUniqueID) { 
    var i = 0; 
    var chks = $(checkboxfinder); 
    if (initialval){ chks.val(initialval); } 
    chks.hide().each(function() { 
     var img = $('<img class="tristate_image" src="../Images/tristateimages/' + $(this).val() + '.gif" />'); 
     $(this).attr("checked", ($(this).val()=="unchecked"?"false":"true")); 
     $(this).attr("name", "input" + i + "image" + i); 
     img.attr("name", "" + i + "image" + i); 
     i++; 
     $(this).before(img); 
    }); 


    $(".tristate_image").click(function() { 
     t = $("[name='input" + $(this).attr("name") + "']"); 
     var tval = t.val(); 
     $(this).attr("src", "../Images/tristateimages/" + (tval=="checked" ? "unchecked" : "checked") + ".gif"); 
     switch (tval) { 
      case "unchecked": 
       t.val("checked").attr("checked", "true"); 
       break; 
      case "intermediate": 
       t.val("checked").attr("checked", "true"); 
       break; 
      case "checked": 
       t.val("unchecked").removeAttr("checked"); 
     } 
     setTimeout('__doPostBack(\'' + originalCkbxUniqueID + '\',\'\')', 0); 
    }); 
} 

Voici une version simplifiée de mon gestionnaire d'événements OnPreRender qui enregistre un script de démarrage:

protected override void OnPreRender(EventArgs e) 
{ 
    string tristatescript = " SetTriStateCheckBox('input[id$=\"ckbx1\"]', 'intermediate','" 
     + ckbx1.UniqueID + "'); "; 
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ckbx1_tristate", tristatescript, true); 
    base.OnPreRender(e); 
} 

Tout semble fonctionner correctement, sauf que je ne frappe pas le gestionnaire d'événements de la case d'origine lorsque je publie, après avoir cliqué sur ma nouvelle image insérée. Il frappe Page_Load.

Si je supprime la partie .hide() de la jquery et que vous cliquez sur la case d'origine, Request.Params['__EVENTTARGET'] est la même que lorsque vous cliquez sur la nouvelle image insérée.

Je ne sais pas où aller à partir d'ici. Aucune suggestion?

Answer 1

J'ai décidé d'aller différemment avec ça. Il s'avère qu'il est beaucoup plus facile d'utiliser un bouton de lien, avec une image, pour simuler une case à trois états. Il a ses propres événements de postback et tout ce que vous avez à faire est de changer l'imageurl.

:-)