views:

791

answers:

3

Consider the scenario where:

  • an ASP.NET webform page has a DropDownList and a ListView.
  • this DropDownList must set a cookie value on its OnSelectedIndexChanged event.
  • the DropDownList is also set to AutoPostBack="True" to force the ListView to reload using the DropDownList's new value.
  • the page is referencing current JQuery libraries, including the great set of cookie plugins

This code will be used in the assignment of the value of the cookie:

var date = new Date();
date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
$.cookie('cookieName', 'theValue', { path: '/', expires: date });

Question: Can you suggest how to have the DropDownList's value extracted and saved to a cookie using jQuery? Super bonus points for an answer including how to call the post-back method to rebind the ListView! I would definitely love to save a post-back 'flash' for the user.

+1  A: 

Something like the following will save the value to a cookie on the change event:

$("#" + <%=YourDropDownList.ClientID %>).change(function(){
    var date = new Date();
    date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
    $.cookie('cookieName', $(this).val(), { path: '/', expires: date });
});
Jason Berry
+2  A: 

1) For getting value of DropDownList:

var ddlVal = $('#<%= ddList.ClientID %>').val();

2) Loading ListView:

a. For this I will suggest consulting Dave's postings at his site Encosia.

b. Rick Strahl also has great post on is blog regarding using jQuery ajax

c. Muhammad Mosa has post describing Master-Detail scenario with ajax

TheVillageIdiot
Thanks Village. For others, can you perhaps adjust the code to remove the space between the pound and the percent?
p.campbell
+1  A: 
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="TestDropDownList" runat="server">
            <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
            <asp:ListItem Text="FirstText" Value="1"></asp:ListItem>
            <asp:ListItem Text="SecondText" Value="2"></asp:ListItem>
            <asp:ListItem Text="ThirdText" Value="3"></asp:ListItem>
            <asp:ListItem Text="FourthText" Value="4"></asp:ListItem>
        </asp:DropDownList>
    </div>
    </form>
</body>

<script type="text/javascript">
    $(function()
    {
        $('#<%= TestDropDownList.ClientID %>').change(function(e)
        {
            var selectedValue = this.value;
            var date = new Date();
            date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
            $.cookie('cookieName', 'theValue', { path: '/', expires: date });

        });
    });     
</script>
</html>
Raghav Khunger
Thanks Raghav! Nothing was done with `selectedValue` in the `change` function, though :)
p.campbell