Populate countries and cities dropdownlist with javascript in asp.net

I have a register form in a fancybox as an inline content and can access to it in all the site as the link is in the master page.

On the register form I have two dropdownlists one for country and the other for city. When the user changes the country the dropdownlist of cities refresh as the country selected previously. All the data from countries and cities i got it from a script https://bdhacker.wordpress.com/tag/all-countries-of-the-world/

The problem is that when the user submits the form an error in firefox appears saying

Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.ArgumentException: Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

As the error point out i have to put enableeventvalidation=false. The problem is that i would have to do it on every page, as the fancybox is in the whole site, and i read it is not the best security practice. Other option would be to use, as the exception throws, to register every option with the clientscriptmanager of both dropdowns which would be tiresome because there are more than 200 countries and 10.000 cities!!!

Any ideas what can i do??

Here is some of the code

<%@ Master Language="C#" AutoEventWireup="True" CodeBehind="Site.master.cs" Inherits="VozDirecta.SiteMaster" %>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $("#RegistroLightbox").fancybox({

        });
    });

</script>

<body id="page1">
<form id="Form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<a class="labelsTipolinks"  id="RegistroLightbox" href="#LightBoxRegistroDiv">Registro</a>

 <div style="display: none">
    <div id="LightBoxRegistroDiv">
        <asp:DropDownList ValidationGroup="grupoValidacionRegistroUsuario" runat="server"
                    ID="drpDownPais" CssClass="textoLightbox" AutoPostBack="false" CausesValidation="false">
                </asp:DropDownList>
         <asp:DropDownList ValidationGroup="grupoValidacionRegistroUsuario" runat="server"
                    ID="drpDownCiudad" CssClass="textoLightbox" AutoPostBack="false" CausesValidation="false">
                </asp:DropDownList>
    </div>
</div>

I consider other option as to get the data from database and the bind to the dropdownlist but i’d rather stay with the javascript

Answer

I ended up using the pure html select control and save both values in two hiddenFields. With this i can preserve the enableeventvalidation with the default value that is true 🙂

Here some of the code:

<select CssClass="textoLightbox" id="selectPais" onchange="cambiarCiudad()"></select>
<asp:HiddenField runat="server" ID="hdnPaisSeleccionado" />

<select CssClass="textoLightbox" id="selectCiudad" onchange="guardarCiudad()"></select>
<asp:HiddenField runat="server" ID="hdnCiudadSeleccionada" />


<script language="javascript" type="text/javascript">
$(document).ready(function () {
    ImprimirPais("selectPais");
    var dropPais = document.getElementById("selectPais");
    var dropCiudad = document.getElementById("selectCiudad");
    dropPais.value = "USA";
    print_state('selectCiudad', dropPais.selectedIndex)
    dropCiudad.value = "California";
    document.getElementById("<%=hdnPaisSeleccionado.ClientID%>").value = "USA";
    document.getElementById("<%=hdnCiudadSeleccionada.ClientID%>").value = "California";

});

//Repopula el combo de las ciudades cuando es cambiado el pais.
function cambiarCiudad() {
    var dropPais = document.getElementById("selectPais");
    //Vacia ciudad
    document.getElementById('selectCiudad').options.length = 0;
    //Repopula ciudad de acuerdo al pais
    print_state('selectCiudad', dropPais.selectedIndex);
    //Guarda Pais
    document.getElementById("<%=hdnPaisSeleccionado.ClientID%>").value = dropPais.value;
    //Guarda Ciudad
    guardarCiudad();
}

function guardarCiudad() {
    var dropCiudad = document.getElementById("selectCiudad");
    document.getElementById("<%=hdnCiudadSeleccionada.ClientID%>").value = dropCiudad.value;
}

Advertisement

Answer