ASP.net setting javascript within code

Question

Hey all i am trying to figure out what i am doing incorrectly here. FYI i am new to ASP.net and its ways :o):

<asp:ListBox ID="df_dd_ccyear" name="df_dd_ccyear" style="z-index: 1000;" runat="server" ClientIDMode="Static">
      <script type="text/javascript">
         var d = new Date();
         var curr_year = d.getFullYear();
         var i = 1;

         while (i < 20) {
             if (i == 1) {
                 document.write('<asp:ListItem Text=\"' + (curr_year + i) + '\" value=\"' + (curr_year + i) + '\" Selected=\"True\"></asp:ListItem>');
             } else {
                 document.write('<asp:ListItem Text=\"' + (curr_year + i) + '\" value=\"' + (curr_year + i) + '\"></asp:ListItem>');
             }
             i++;
         }
      </script>
</asp:ListBox>

When running the page i receive this error:

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: System.Web.UI.WebControls.ListItemCollection must have items of type 'System.Web.UI.WebControls.ListItem'. 'script' is of type 'System.Web.UI.HtmlControls.HtmlGenericControl'.

Source Error: 


Line 200:                    <div id="df-ccyear" style="z-index: 1000;">
Line 201:                        <asp:ListBox ID="df_dd_ccyear" name="df_dd_ccyear" style="z-index: 1000;" runat="server" ClientIDMode="Static">
**Line 202:                            <script type="text/javascript">**
Line 203:                                var d = new Date();
Line 204:                                var curr_year = d.getFullYear();

Source File: /chattclub/default.aspx    Line: 202

adripanico · Accepted Answer · 2012-10-08 13:33:07Z

2

I suggest using Code behind always you can (as in this case). This way you can do the same like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim currentYear As Integer = Date.Now.Year
    For i As Integer = 0 To 19
        Dim newItem As New ListItem
        newItem.Text = currentYear + i
        newItem.Value = currentYear + i
        newItem.Selected = False
        If i = 0 Then
            newItem.Selected = True
        End If
        df_dd_ccyear.Items.Add(newItem)
    Next
End Sub

In the markup file (the .ASPX file), you just have to declare the ListBox like:

<asp:ListBox ID="df_dd_ccyear" style="z-index: 1000;" runat="server" />

edited Oct 8, 2012 at 13:33

answered Oct 8, 2012 at 13:26

adripanico

1,05814 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

StealthRT Over a year ago

Code above produces values of only 2031.

adripanico Over a year ago

Try again. I've changed and tested it. The error was declaring the ListItem variable before the For statement.

Darin Dimitrov · Accepted Answer · 2012-10-08 13:24:21Z

You cannot mix javascript and server side code this way. Javascript runs on the client, whereas ASP.NET runs on the server.

So your first possibility is to build it on the server:

<asp:ListBox 
    ID="df_dd_ccyear" 
    name="df_dd_ccyear" 
    style="z-index: 1000;" 
    runat="server" 
    ClientIDMode="Static" 
/>

and in your code behind:

protected void Page_Load(object sender, EventArgs e)
{
    var currentYear = DateTime.Now.Year;
    var years = Enumerable.Range(currentYear, 20);
    df_dd_ccyear.DataSource = years;
    df_dd_ccyear.SelectedIndex = 0;
    df_dd_ccyear.DataBind();
}

or if you want a pure javascript solution to add items to the listbox:

<%@ Page 
    Language="C#" 
    AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication1.Default" 
%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ListBox 
            ID="df_dd_ccyear" 
            name="df_dd_ccyear" 
            style="z-index: 1000;" 
            runat="server" 
            ClientIDMode="Static" 
        />

        <script type="text/javascript">
            var years = document.getElementById('df_dd_ccyear');
            var d = new Date();
            var curr_year = d.getFullYear();

            for(var i = 0; i < 20; i++) {
                if (i == 0) {
                    years.innerHTML += '<option value="' + curr_year + '" selected="selected">' + curr_year + '</option>';
                } else {
                    years.innerHTML += '<option value="' + (curr_year + i) + '">' + (curr_year + i) + '</option>';
                }
            }
        </script>
    </form>
</body>
</html>

Ryan McDonough · Accepted Answer · 2012-10-08 13:25:42Z

2

You can't write the list items in as html, they need to be rendered by asp.net into html as select options.

In your code you should do something along the lines of:

    For i = 0 to 20
       df_dd_ccyear.items.add(currYear);
    End For

More details on adding listitems are available: http://forums.asp.net/t/1142484.aspx/1

answered Oct 8, 2012 at 13:25

Ryan McDonough

10k3 gold badges60 silver badges81 bronze badges

Comments

Daniel A. White · Accepted Answer · 2012-10-08 13:20:15Z

0

You can't do this. The ASP tags run on the server. JavaScript runs on the client side. You have to dynamically add/remove items from the javascript elsewhere.

By looking at the code, it might make the most sense to write this in C#/VB in your codebehind.

answered Oct 8, 2012 at 13:20

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Collectives™ on Stack Overflow

ASP.net setting javascript within code

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related