mercredi 21 janvier 2009

Executer le code d'un Bouton en pressant la touche Entrer

Petit exemple simple:

<div id="divTest" runat="server">
<
asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
<
asp:Button ID="cmdGo" runat="server" Text="Go" OnClick="cmdGo_Click" />
</
div>

code du boutton: renvoie le texte tapé par l'utilisateur:

protected void cmdGo_Click(object sender, EventArgs e)
{
Response.Write(txtTest.Text);
}

Pour exécuter le code du bouton en pressant entrer, j'ai utilisé un Div à qui j'ai ajouté un id dans la page aspx. Dans Page_Load, ajouter un attribut à ce div: sur l'evenement onkeydown verifier le code de la touche pressée et lancer l'evenement click du boutton s'il s'agit de la touche entrer dont le code est 13 :

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
this.divTest.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which==13) || (event.keyCode==13)) {document.getElementById('" + cmdGo.UniqueID + "').click();return false;}} else {return true};");

}


Resultat :

image



Le div peut etre replacé par un table aussi. Il est preferable que le div ou table soit dans le niveau le plus haut possible de la page afin que son contenu "reconnaisse" que le boutton est lancé lorsque la touche Entrer est préssée.

Div avec ScrollBar (ascenseur)

Le bon vieux Div est toujours utile, mais peut l'être particulièrement lorsqu'on a par exemple un contrôle relié aux données qui peut s'étaler sur une bonne partie de la page.

Voici un exemple avec un contrôle CheckBoxList relié aux données, que je place dans un Div avec ascenseur afin de limiter l'espace occupé dans la page.

La propriété overflow permet de doter Div d'un ascenceur. Ici je lui affecte la valeur auto qui ajoute un ascenceur seulement si c'est necessaire:

<div style="width:150px; height: 200px; overflow: auto;">
<
asp:CheckBoxList ID="CheckBoxListFruits" runat="server" DataSourceID="SqlDataSourceFruits"
DataTextField="NomFrancais" DataValueField="IDFruit" Font-Names="Tahoma"
Font-Size="9pt" ForeColor="#000099">
</
asp:CheckBoxList>
</
div>

Le resultat est le suivant : image

jeudi 8 janvier 2009

Ajax UpdatePanel et l'Upload de fichiers

Le saviez-vous ? Certains contrôles ne sont pas compatibles avec UpdatePanel:

- TreeView et les contrôles Menu;
- Les contrôles Web Parts;
- FileUpload s'ils sont utilisés pour faire un upload de fichiers avec un PostBack asynchrone;
- GridView et DetailsView lorsque la propriété EnableSortingAndPagingCallbacks est true;
- Login, PasswordRecovery, ChangePassword et CreateUserWizard dont le Content n'a pas été converti en modèles éditables;
- Le contrôle Substitution;
- Les contrôles de validation.

En tout cas, je ne le savais pas avant de passer des heures à me tirer les cheveux pour comprendre ce qui n'allait pas dans ma page :) J'ai un WebForm avec des zones de saisie et un espace pour Upload de photos, tout marchait bien, mais dès que j'ai utilisé UpdatePanel j'ai obtenu l'erreur suivante:

Sys.WebForms.PageRequestManagerServerErrorException: Object reference not set to an instance of an object

erreur upload et updatepanel

La solution est la suivante: ajouter un PostBackTrigger sur le boutton qui déclenche l'Upload afin que ce boutton provoque un PostBack

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<
ContentTemplate>
<
asp:FileUpload ID="fileUpload" runat="server" />
<
br />
<
asp:Button ID="cmdUpload" runat="server" Height="25px" OnClick="cmdUpload_Click" Text="Upload"
Width="128px" />
</
ContentTemplate>

<
Triggers>
<
asp:PostBackTrigger ControlID
="cmdUpload" />
</
Triggers
>
</
asp:UpdatePanel>



L'Upload ensuite fonctionne correctement:

fileUpload.PostedFile.SaveAs(@"c:\test\" + System.IO.Path.GetFileName(fileUpload.PostedFile.FileName));


Response.Write n'est pas non plus compatible avec UpdatePanel, j'en parlerai dans un prochain post.


vendredi 26 décembre 2008

Redirection: Ouvrir une page dans une nouvelle fenêtre

Un des moyens de rediriger l'utilisateur vers une 2ème page en ouvrant celle ci dans une nouvelle fenêtre consiste à utiliser JavaScript comme suit:

string url = "http://msdn.microsoft.com";
Response.Write("<script>window.open('" + url + "');</script>");

ListBox: Sélectionner plusieurs lignes (Items) à partir du code behind

Voici une petite astuce que je viens de rechercher et que je voudrais partager avant de retourner à mes occupations :)

J'ai un contrôle ListBox relié avec une table de la BD. Voici comment sélectionner la 1ere et 2ème ligne du ListBox:

ListBox1.Items[0].Selected = true;
ListBox1.Items[1].Selected = true;


Le résultat dans la page :

image

samedi 29 novembre 2008

Fixing sys.InvalidOperationException: InitializeError #2104 in Silverlight 2 Beta 2

I've been working constantly on Silverlight (at a somewhat crazy pace :)) during the past few months. The site www.silverlight.net helped me a lot. I learned almost everything I know about Silverlight on this site.

I ran into this error quite frequently :
sys.InvalidOperationException: InitializeError #2104
The silverlight control won't load, and page shows blanc, even though the plugin is well installed. In fact, this error is due to the fact that the file with the extension  ".xap"  does not get saved as mime type in IIS.

To save this file correctly, Follow these steps before:
The screens are in french, but the placement of buttons and options is identical


 image

 image 

In the two textboxes, enter the following :
  - Extension : .xap
  - Mime Type : application/x-silverlight-2-b2
That should do it ! :)

Here is the french version of this post.

vendredi 28 novembre 2008

Remplir un DropDownList à partir d'un DataTable

Dans cet exemple, j'interroge la base de données (SQL Server 2005) et je recupere les données dans un DataTable comme suit:

public DataTable getAllClients()
{

DatabaseHelper db = new DatabaseHelper();
DataTable dt = new DataTable();
try
{
dt = db.ExecuteDataSet("spGetAllClients", CommandType.StoredProcedure).Tables[0];
}
catch (Exception ex)
{
}
return (dt);

}



La procédure stockée retourne l'id du client et la raison sociale.



Pour remplir un controle DropDownList, je met les données recupérées depuis la base dans un DataTable dt. Il est possible de relier dt avec le DropDownList, mais j'ai besoin de modifier la présentation des données. Pour celà, j'utilise un 2ème DataTable dtTmp:



DAClient da = new DAClient();

DataTable dt = da.getAllClients();

if (dt.Rows.Count != 0)
{

DataTable dtTmp = new DataTable(); //creation du dattatable dtTmp

dtTmp.Columns.Add("idclient", typeof(Int32)); //datacolumn 0 : "id"
dtTmp.Columns.Add("raisonsociale", typeof(string)); //datacolumn 1: contiendra le texte "id - raisonsociale"

DataRow tmpRow;

tmpRow = dtTmp.NewRow();
tmpRow["idclient"] = "0";
tmpRow["raisonsociale"] = "Sélectionnez un client";
dtTmp.Rows.Add(tmpRow); //ajoute la ligne "0", "Sélectionnez un client" au DataTable

for (int i = 0; i < dt.Rows.Count; i++)
{
tmpRow = dtTmp.NewRow();

tmpRow["idclient"] = dt.Rows[i]["idclient"];

tmpRow["raisonsociale"] = dt.Rows[i]["idclient"] + " - " + dt.Rows[i]["raisonsociale"];


dtTmp.Rows.Add(tmpRow);

}

ddlClients.DataTextField = "raisonsociale";
ddlClients.DataValueField = "idclient";


ddlClients.Items.Clear();

ddlClients.DataSource = dtTmp;

ddlClients.DataBind();
}



Le résultat:



image



En ce moment je travaille sur un projet qui, vu sa nature un peu particulière, les nouvelles techniques et méthodes de développement ne sont pas forcement la bonne solution. J'essaierai autant que je peux de poster du code "the old fashioned way" qui je pense peut toujours être utile pour certains....