none
Utilisation de Javascript avec Asp.Net .. RRS feed

  • Question

  •  

    Et Rebonjour Guillaume,

     

    voilà mon post pour cette foisci concerne l'utilisation de Javascript en parallèle avec un Formulaire développé en ASP.NET, j'ai trouvé des exemples concernant les formulaires classiques en HTML mais là, pas moyen.

     

    certes pas mal de Scripts doivent être déclarés au niveau de la partie <Head></Head> mais leur intégration pour appel au niveau des controles (DropDownList, TextBox,...) m'échape.

     

    Est-ce que tu peux me donner des exemple d'interaction, exemple :

     

    griser les TextBox (Box1) et (Box2) si l'index 0 de la DropDownlIst (List1) est seléctionné ??

     

    obliger l'utilisateur à saisir des donner sur  les TextBox (Box1) et (Box2) si l'index 1 de la DropDownlIst (List1) est seléctionné ??

     

    merci à toi

     

    Alexy...

    lundi 25 février 2008 12:35

Réponses

  • Bonjour,

    N'ayant pas beaucoup de temps, je vous donne quelques pistes le temps de pouvoir faire un exemple :

    • Si votre javascript est dans une page, vous pouvez le mettre dans le fichier .aspx car vous êtes sur que celui ci ne sera pas dupliqué (présent 2 fois dans la page).
    • Si votre javascript est pour un usercontrol ou un customcontrol, il faudra l'externaliser et le charger dynamiquement une fois par page (facilement fait via Page.ClientScript.RegisterClientScriptInclude).
    • Dans votre javascript, si vous avez besoin d'accéder aux objets HTML, comme ASP.Net génère automatiquement les ID des éléments, vous devrez utiliser la syntaxe : document.getElementById("<%= tbNom.ClientID %>");
      La propriété ClientID d'un webcontrol renvoi l'id qui sera associé à l'élément HTML.
    • Si vous voulez forcer certain champs avant un postback, il faut regarder du coté des XXXValidator (RequiredFieldValidator, CustomValidator, ...). Le CustomValidator vous permettant d'écrire vous même la fonction de validation.

    Guillaume

    lundi 25 février 2008 16:23
  • Salut Guillaume,

     

    merci pour ton retour, j'attendrai tes exemples et principalement ceux touchant le point 3 et 4 de ton post là-dessus.

     

    merci

     

    Alexy ..

    lundi 25 février 2008 19:48
  • Bonjour,

    Voila l'exemple complet, il s'agit d'un UserControl contenant une dropdownlist, deux textbox, un bouton et un validateur.

     

    Code Snippet

    TestJs.ascx

     

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestJs.ascx.cs" Inherits="TestJs" %>

    <asp:DropDownList ID="ddlType" runat="server">

    <asp:ListItem Value="0">Accept&#233;</asp:ListItem>

    <asp:ListItem Value="1">Refus&#233;</asp:ListItem>

    </asp:DropDownList>

    <asp:TextBox ID="tbNom" runat="server"/>

    <asp:TextBox ID="tbTel" runat="server"/>

    <asp:Button ID="btnOk" runat="server" Text="Button" OnClick="btnOk_Click" />

    <asp:CustomValidator ID="cvValidator" runat="server" ClientValidationFunction="TestJsCustomValidate"

    ErrorMessage="Nom et Tel doivent être remplie" OnServerValidate="cvValidator_ServerValidate"/>

     

    TestJs.ascx.cs

     

    public partial class TestJs : System.Web.UI.UserControl

    {

    protected override void OnPreRender(EventArgs e)

    {

    base.OnPreRender(e);

     

    // affecte le handler javascript

    this.ddlType.Attributes["onchange"] = "TestJsToggleFields(this, '" + this.tbNom.ClientID + "', '" + this.tbTel.ClientID + "');";

     

    // inclu le javascript (ne sera fait qu'une fois pour le type et la clé donnés)

    this.Page.ClientScript.RegisterClientScriptInclude(

    typeof(TestJs)

    , "TestJs"

    , this.ResolveClientUrl("~/TestJs.js")

    );

     

    // appel le javascript pour initialiser le status des textbox

    // (cela évite de dupliquer la logique dans le code .net)

    // on utilise l'id du control comme clé car ce script doit être présent pour

    // toutes les instances du control !

    this.Page.ClientScript.RegisterStartupScript(

    typeof(TestJs)

    , this.ClientID + "Toggle"

    , String.Format(

    "TestJsToggleFields(document.getElementById('{0}'), '{1}', '{2}');"

    , this.ddlType.ClientID

    , this.tbNom.ClientID

    , this.tbTel.ClientID

    )

    , true

    );

     

    // inclu du javascript initialisant les données pour la validation

    this.Page.ClientScript.RegisterStartupScript(

    typeof(TestJs)

    , this.ClientID + "Validate"

    , String.Format(

    "TestJsCustomValidateData['{0}'] = {{ddl: document.getElementById('{1}'), tbNom: document.getElementById('{2}'), tbTel: document.getElementById('{3}')}};"

    , this.cvValidator.ClientID

    , this.ddlType.ClientID

    , this.tbNom.ClientID

    , this.tbTel.ClientID

    )

    , true

    );

    }

     

    // Validation coté serveur.

    protected void cvValidator_ServerValidate(object sender, ServerValidateEventArgs e)

    {

    if (0 == this.ddlType.SelectedIndex)

    {

    e.IsValid = true;

    }

    else

    {

    e.IsValid = (0 != this.tbNom.Text.Length && 0 != this.tbTel.Text.Length);

    }

    }

     

    protected void btnOk_Click(object sender, EventArgs e)

    {

    // ne rien faire si la page n'est pas valide

    if (!this.Page.IsValid)

    {

    return;

    }

    }

    }

     

    TestJs.js

     

    // Met à jour le status des textbox en fonction de l'index s‚lectionn‚ dans la listbox.

    function TestJsToggleFields(ddl, tbNomId, tbTelId)

    {

    // r‚cupŠre et valide les objets HTML

    if (!ddl) return;

     

    var tbNom = document.getElementById(tbNomId);

    if (!tbNom) return;

     

    var tbTel = document.getElementById(tbTelId);

    if (!tbTel) return;

     

    // met à jour le status enable/disable

    var disabled = (0 == ddl.selectedIndex);

    tbNom.disabled = disabled;

    tbTel.disabled = disabled;

    }

     

    // Liste des donn‚es pour la validation par instance du controle.

    TestJsCustomValidateData = [];

     

    // Valide le controle.

    function TestJsCustomValidate(sender, e)

    {

    // récupère et valide les donn‚es

    if (!sender) return;

     

    var data = TestJsCustomValidateData[sender.id];

    if (!data) return;

     

    // valide

    if (0 == data.ddl.selectedIndex)

    {

    // l'index 0 est s‚lectionn‚ => valide

    e.IsValid = true;

    }

    else

    {

    // un autre index que 0 est s‚lectionn‚, valide les textbox

    e.IsValid = (0 != data.tbNom.value.length && 0 != data.tbTel.value.length);

    }

    }

     

     

    Voila, vous n'avez plus qu'à mettre une ou plusieurs instance de ce UserControl dans une page pour tester.

     

    Guillaume

    mardi 26 février 2008 09:16
  • Salut Guillaume,

     

    Merci pour ton retour seulement ça parrait un peu compliquer pour moi tout ça le fait d'utiliser un usercontrole avec appel du fichier JS en externe.

     

    Est-ce que tu peux me donner un autre exemple beaucoup plus simple utilisant les même controles (dropdownlist, deux textbox, un bouton ) en introduisant le code JS directement dans la page .aspx sans utiliser le CustomValidator.  

     

    PS: juste un truc , sur ton exemple j'ai remarqué que le script JS ne s'active que lorsque le bouton est cliqué, hors ce que je cherche moi c'est une execution instantanné telleque celle du RequieredFieldValidator par exemple. 

     

    merci à toi

     

    Alexy...

    mercredi 27 février 2008 14:33
  • Bonjour,

    Voila un exemple plus simple en mettant tout le code dans une page :

     

    ASPX

    Code Snippet

     

    <form id="form1" runat="server">

    <div>

    <asp:DropDownList ID="ddlType" runat="server" onchange="TestJsToggleFields();">

    <asp:ListItem Value="0">Accepté</< FONT>asp:ListItem>

    <asp:ListItem Value="1">Refusé</< FONT>asp:ListItem>

    </< FONT>asp:DropDownList>

    <asp:TextBox ID="tbNom" runat="server"/>

    <asp:TextBox ID="tbTel" runat="server"/>

    <asp:Button ID="btnOk" runat="server" Text="Button" OnClick="btnOk_Click" />

    <asp:CustomValidator ID="cvValidator" runat="server" ClientValidationFunction="TestJsCustomValidate"

    ErrorMessage="Nom et Tel doivent être remplie" OnServerValidate="cvValidator_ServerValidate"/>

    </< FONT>div>

    <script type="text/javascript">

    // Met à jour le status des textbox en fonction de l'index sélectionné dans la listbox.

    function TestJsToggleFields()

    {

    // récupère et valide les objets HTML

    var ddl = document.getElementById("");

    if (!ddl) return;

     

    var tbNom = document.getElementById("");

    if (!tbNom) return;

     

    var tbTel = document.getElementById("");

    if (!tbTel) return;

     

    // met à jour le status enable/disable

    var disabled = (0 == ddl.selectedIndex);

    tbNom.disabled = disabled;

    tbTel.disabled = disabled;

    }

     

    // Valide le controle.

    function TestJsCustomValidate(sender, e)

    {

    // récupère et valide les objets HTML

    var ddl = document.getElementById("");

    if (!ddl) return;

     

    var tbNom = document.getElementById("");

    if (!tbNom) return;

     

    var tbTel = document.getElementById("");

    if (!tbTel) return;

     

    // valide

    if (0 == ddl.selectedIndex)

    {

    // l'index 0 est sélectionné => valide

    e.IsValid = true;

    }

    else

    {

    // un autre index que 0 est sélectionné, valide les textbox

    e.IsValid = (0 != tbNom.value.length && 0 != tbTel.value.length);

    }

    }

    // initialisation

    TestJsToggleFields();

    </< FONT><script>

    </< FONT><form>

     

     

     

    CS

     

    Code Snippet

    protected void cvValidator_ServerValidate(object sender, ServerValidateEventArgs e)

    {

    if (0 == this.ddlType.SelectedIndex)

    {

    e.IsValid = true;

    }

    else

    {

    e.IsValid = (0 != this.tbNom.Text.Length && 0 != this.tbTel.Text.Length);

    }

    }

     

    protected void btnOk_Click(object sender, EventArgs e)

    {

    // ne rien faire si la page n'est pas valide

    if (!this.Page.IsValid)

    {

    return;

    }

    }

     

     

    Guillaume
    jeudi 28 février 2008 08:41
  • Bonjour,

    Si vous voulez lier l'execution du script de validation au changement de valeur des TextBox, il faut pour cela lier le CustomValidator au control via la propriété ControlToValidate. Le problème dans votre cas est que vous devez le lier à 2 controle, ce qui n'est pas faisable.

    La solution si vous voulez vraiment l'affichage sur le changement de valeur est de créer 2 CustomValidator, un pour chaque controle avec un message d'erreur spécifique ("Nom obligatoire" et "Tel obligatoire" par exemple) et une fonction de validation spécifique.

     

    Guillaume

    jeudi 28 février 2008 08:47
  • Merci Guillaume,

     

    je vais essayer tout cela, je te reviens après.

     

    merci

     

    Alexy..

     

    jeudi 28 février 2008 16:52

Toutes les réponses

  • Bonjour,

    N'ayant pas beaucoup de temps, je vous donne quelques pistes le temps de pouvoir faire un exemple :

    • Si votre javascript est dans une page, vous pouvez le mettre dans le fichier .aspx car vous êtes sur que celui ci ne sera pas dupliqué (présent 2 fois dans la page).
    • Si votre javascript est pour un usercontrol ou un customcontrol, il faudra l'externaliser et le charger dynamiquement une fois par page (facilement fait via Page.ClientScript.RegisterClientScriptInclude).
    • Dans votre javascript, si vous avez besoin d'accéder aux objets HTML, comme ASP.Net génère automatiquement les ID des éléments, vous devrez utiliser la syntaxe : document.getElementById("<%= tbNom.ClientID %>");
      La propriété ClientID d'un webcontrol renvoi l'id qui sera associé à l'élément HTML.
    • Si vous voulez forcer certain champs avant un postback, il faut regarder du coté des XXXValidator (RequiredFieldValidator, CustomValidator, ...). Le CustomValidator vous permettant d'écrire vous même la fonction de validation.

    Guillaume

    lundi 25 février 2008 16:23
  • Salut Guillaume,

     

    merci pour ton retour, j'attendrai tes exemples et principalement ceux touchant le point 3 et 4 de ton post là-dessus.

     

    merci

     

    Alexy ..

    lundi 25 février 2008 19:48
  • Bonjour,

    Voila l'exemple complet, il s'agit d'un UserControl contenant une dropdownlist, deux textbox, un bouton et un validateur.

     

    Code Snippet

    TestJs.ascx

     

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestJs.ascx.cs" Inherits="TestJs" %>

    <asp:DropDownList ID="ddlType" runat="server">

    <asp:ListItem Value="0">Accept&#233;</asp:ListItem>

    <asp:ListItem Value="1">Refus&#233;</asp:ListItem>

    </asp:DropDownList>

    <asp:TextBox ID="tbNom" runat="server"/>

    <asp:TextBox ID="tbTel" runat="server"/>

    <asp:Button ID="btnOk" runat="server" Text="Button" OnClick="btnOk_Click" />

    <asp:CustomValidator ID="cvValidator" runat="server" ClientValidationFunction="TestJsCustomValidate"

    ErrorMessage="Nom et Tel doivent être remplie" OnServerValidate="cvValidator_ServerValidate"/>

     

    TestJs.ascx.cs

     

    public partial class TestJs : System.Web.UI.UserControl

    {

    protected override void OnPreRender(EventArgs e)

    {

    base.OnPreRender(e);

     

    // affecte le handler javascript

    this.ddlType.Attributes["onchange"] = "TestJsToggleFields(this, '" + this.tbNom.ClientID + "', '" + this.tbTel.ClientID + "');";

     

    // inclu le javascript (ne sera fait qu'une fois pour le type et la clé donnés)

    this.Page.ClientScript.RegisterClientScriptInclude(

    typeof(TestJs)

    , "TestJs"

    , this.ResolveClientUrl("~/TestJs.js")

    );

     

    // appel le javascript pour initialiser le status des textbox

    // (cela évite de dupliquer la logique dans le code .net)

    // on utilise l'id du control comme clé car ce script doit être présent pour

    // toutes les instances du control !

    this.Page.ClientScript.RegisterStartupScript(

    typeof(TestJs)

    , this.ClientID + "Toggle"

    , String.Format(

    "TestJsToggleFields(document.getElementById('{0}'), '{1}', '{2}');"

    , this.ddlType.ClientID

    , this.tbNom.ClientID

    , this.tbTel.ClientID

    )

    , true

    );

     

    // inclu du javascript initialisant les données pour la validation

    this.Page.ClientScript.RegisterStartupScript(

    typeof(TestJs)

    , this.ClientID + "Validate"

    , String.Format(

    "TestJsCustomValidateData['{0}'] = {{ddl: document.getElementById('{1}'), tbNom: document.getElementById('{2}'), tbTel: document.getElementById('{3}')}};"

    , this.cvValidator.ClientID

    , this.ddlType.ClientID

    , this.tbNom.ClientID

    , this.tbTel.ClientID

    )

    , true

    );

    }

     

    // Validation coté serveur.

    protected void cvValidator_ServerValidate(object sender, ServerValidateEventArgs e)

    {

    if (0 == this.ddlType.SelectedIndex)

    {

    e.IsValid = true;

    }

    else

    {

    e.IsValid = (0 != this.tbNom.Text.Length && 0 != this.tbTel.Text.Length);

    }

    }

     

    protected void btnOk_Click(object sender, EventArgs e)

    {

    // ne rien faire si la page n'est pas valide

    if (!this.Page.IsValid)

    {

    return;

    }

    }

    }

     

    TestJs.js

     

    // Met à jour le status des textbox en fonction de l'index s‚lectionn‚ dans la listbox.

    function TestJsToggleFields(ddl, tbNomId, tbTelId)

    {

    // r‚cupŠre et valide les objets HTML

    if (!ddl) return;

     

    var tbNom = document.getElementById(tbNomId);

    if (!tbNom) return;

     

    var tbTel = document.getElementById(tbTelId);

    if (!tbTel) return;

     

    // met à jour le status enable/disable

    var disabled = (0 == ddl.selectedIndex);

    tbNom.disabled = disabled;

    tbTel.disabled = disabled;

    }

     

    // Liste des donn‚es pour la validation par instance du controle.

    TestJsCustomValidateData = [];

     

    // Valide le controle.

    function TestJsCustomValidate(sender, e)

    {

    // récupère et valide les donn‚es

    if (!sender) return;

     

    var data = TestJsCustomValidateData[sender.id];

    if (!data) return;

     

    // valide

    if (0 == data.ddl.selectedIndex)

    {

    // l'index 0 est s‚lectionn‚ => valide

    e.IsValid = true;

    }

    else

    {

    // un autre index que 0 est s‚lectionn‚, valide les textbox

    e.IsValid = (0 != data.tbNom.value.length && 0 != data.tbTel.value.length);

    }

    }

     

     

    Voila, vous n'avez plus qu'à mettre une ou plusieurs instance de ce UserControl dans une page pour tester.

     

    Guillaume

    mardi 26 février 2008 09:16
  • Salut Guillaume,

     

    Merci pour ton retour seulement ça parrait un peu compliquer pour moi tout ça le fait d'utiliser un usercontrole avec appel du fichier JS en externe.

     

    Est-ce que tu peux me donner un autre exemple beaucoup plus simple utilisant les même controles (dropdownlist, deux textbox, un bouton ) en introduisant le code JS directement dans la page .aspx sans utiliser le CustomValidator.  

     

    PS: juste un truc , sur ton exemple j'ai remarqué que le script JS ne s'active que lorsque le bouton est cliqué, hors ce que je cherche moi c'est une execution instantanné telleque celle du RequieredFieldValidator par exemple. 

     

    merci à toi

     

    Alexy...

    mercredi 27 février 2008 14:33
  • Bonjour,

    Voila un exemple plus simple en mettant tout le code dans une page :

     

    ASPX

    Code Snippet

     

    <form id="form1" runat="server">

    <div>

    <asp:DropDownList ID="ddlType" runat="server" onchange="TestJsToggleFields();">

    <asp:ListItem Value="0">Accepté</< FONT>asp:ListItem>

    <asp:ListItem Value="1">Refusé</< FONT>asp:ListItem>

    </< FONT>asp:DropDownList>

    <asp:TextBox ID="tbNom" runat="server"/>

    <asp:TextBox ID="tbTel" runat="server"/>

    <asp:Button ID="btnOk" runat="server" Text="Button" OnClick="btnOk_Click" />

    <asp:CustomValidator ID="cvValidator" runat="server" ClientValidationFunction="TestJsCustomValidate"

    ErrorMessage="Nom et Tel doivent être remplie" OnServerValidate="cvValidator_ServerValidate"/>

    </< FONT>div>

    <script type="text/javascript">

    // Met à jour le status des textbox en fonction de l'index sélectionné dans la listbox.

    function TestJsToggleFields()

    {

    // récupère et valide les objets HTML

    var ddl = document.getElementById("");

    if (!ddl) return;

     

    var tbNom = document.getElementById("");

    if (!tbNom) return;

     

    var tbTel = document.getElementById("");

    if (!tbTel) return;

     

    // met à jour le status enable/disable

    var disabled = (0 == ddl.selectedIndex);

    tbNom.disabled = disabled;

    tbTel.disabled = disabled;

    }

     

    // Valide le controle.

    function TestJsCustomValidate(sender, e)

    {

    // récupère et valide les objets HTML

    var ddl = document.getElementById("");

    if (!ddl) return;

     

    var tbNom = document.getElementById("");

    if (!tbNom) return;

     

    var tbTel = document.getElementById("");

    if (!tbTel) return;

     

    // valide

    if (0 == ddl.selectedIndex)

    {

    // l'index 0 est sélectionné => valide

    e.IsValid = true;

    }

    else

    {

    // un autre index que 0 est sélectionné, valide les textbox

    e.IsValid = (0 != tbNom.value.length && 0 != tbTel.value.length);

    }

    }

    // initialisation

    TestJsToggleFields();

    </< FONT><script>

    </< FONT><form>

     

     

     

    CS

     

    Code Snippet

    protected void cvValidator_ServerValidate(object sender, ServerValidateEventArgs e)

    {

    if (0 == this.ddlType.SelectedIndex)

    {

    e.IsValid = true;

    }

    else

    {

    e.IsValid = (0 != this.tbNom.Text.Length && 0 != this.tbTel.Text.Length);

    }

    }

     

    protected void btnOk_Click(object sender, EventArgs e)

    {

    // ne rien faire si la page n'est pas valide

    if (!this.Page.IsValid)

    {

    return;

    }

    }

     

     

    Guillaume
    jeudi 28 février 2008 08:41
  • Bonjour,

    Si vous voulez lier l'execution du script de validation au changement de valeur des TextBox, il faut pour cela lier le CustomValidator au control via la propriété ControlToValidate. Le problème dans votre cas est que vous devez le lier à 2 controle, ce qui n'est pas faisable.

    La solution si vous voulez vraiment l'affichage sur le changement de valeur est de créer 2 CustomValidator, un pour chaque controle avec un message d'erreur spécifique ("Nom obligatoire" et "Tel obligatoire" par exemple) et une fonction de validation spécifique.

     

    Guillaume

    jeudi 28 février 2008 08:47
  • Merci Guillaume,

     

    je vais essayer tout cela, je te reviens après.

     

    merci

     

    Alexy..

     

    jeudi 28 février 2008 16:52
  •  

    Bonjour Guillaume,

     

    c'est un peu compliquer mais ça marche

     

    merci pour tes lumières

     

    Alexy..

    jeudi 6 mars 2008 10:28