RSS

Tutoriaux

Passer plusieurs paramètres d'un Gridview vers une autre page avec ASP.NET et jQuery

Tutoriaux - Javascript

Dans cet article, nous allons voir comment il est simple en utilisant jQuery, de passer plusieurs valeurs en provenance d'un GridView vers une autre page et ce, sans l'utilisation d'un champ hyperlien. Si vous êtes débutant avec jQuery, il serait bien de lire quelques article sur les bases de jQuery avant de lire l'article qui suit.

Script

Comme toujours, nous allons débuter par l'insertion de jQuery entre les 2 balises <head> et </head> de votre page comme ceci :

<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.2.6.js" type="text/javascript"></script>

Default.aspx

Tout d'abord nous allons créer une page de base, contenant une SqlDataSource et un simple Gridview. Donc ajoutons donc notre GridView et notre SqlDataSource à notre page. Par la suite, nous allons peupler le DataSource avec la base de donnée test de SQL ; Northwind.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers]"> </asp:SqlDataSource>

Web.config

<connectionStrings>
    <add name="NorthwindConnectionString" connectionString="Data Source=(local);Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>

GridView

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True">
    <Columns>                         
        <asp:BoundField DataField="CustomerID" HeaderText="ID" ReadOnly="True" SortExpression="CustomerID" />
        <asp:BoundField DataField="CompanyName" HeaderText="Compagnie" SortExpression="CompanyName" />
        <asp:BoundField DataField="ContactName" HeaderText="Contact" SortExpression="ContactName" />
        <asp:BoundField DataField="Address" HeaderText="Adresse" SortExpression="Address" />
        <asp:BoundField DataField="City" HeaderText="Ville" SortExpression="City" />
    </Columns>
</asp:GridView>

Details.aspx

Ajoutons donc une nouvelle page afin de recevoir les valeurs passées en paramètre grâce à jQuery. Les paramètres seront ensuite récupéré lors du chargement de la page (Page_Load).

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim cid As String = Request.QueryString("CID")
    Dim cname As String = Request.QueryString("CName")
    Response.Write("CustomerID= " & cid & " : " & "CompanyName= " & cname)
End Sub

     

jQuery

Retournons alors à notre page Default.aspx afin de lui ajouter la petite touche magique provenant de jQuery.
     

<script type="text/javascript">
    $(document).ready(function() {
        $("tr").click(function(event) {
            var row = jQuery(this)
            var param1 = row.children("td:eq(0)").text();
            var param2 = row.children("td:eq(1)").text();              
            var navUrl = "http://monserveur.com/Details.aspx?cid=" + param2 + "&cname=" + param2;
            top.location = navUrl;
        });
    });
</script>

Le code ci-dessus, gère le clique sur un élément (<tr>) du GridView. Lors du clique, ce dernier extrait la valeur de la colonne 1 et 2 afin de former un URL valide et la transmettre au navigateur. Voyez comment le tout est simple ? À vous de jouer maintenant!


Ajouter cette page à votre réseau social favoris
Digg! Reddit! Del.icio.us! Mixx! Free and Open Source Software News Google! Live! Facebook! Technorati! StumbleUpon! Spurl! Furl! Blogmarks! Yahoo! Mister-Wong! DZone! Free Joomla PHP extensions, software, information and tutorials.

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (0)

Flux RSS pour les commentaires

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy

Publicités

Nos services

Programmation Web

Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.

La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.

Suite ...
Programmation Desktop

Quel que soit votre projet, nous pouvons le réaliser pour vous !

Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.

Suite ...
Autres ...

Quel que soit vos projets ou vos idées, contactez nous!

Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.

Suite ...

Connexion