Calling javascript function from C# code behind

Question

I am using the geodata API that gives me all countries,states,cities in the world in three different select Lists.

These Lists can not be server side. These Lists take some time to load the options. I wanna set a specific country, state and city from my C# code behind as selected in the select Lists. I tried using clientScript and scriptManager in order to call a Javascript function that will set the country, state and city as selected, yet both methods didn't call the function. below is my code:

The select Lists code:

       <tr>              
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                Country:</td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="countryId" class="countries order-alpha"  name="country">
                    <option value="">Select Country</option>
                </select>
                <asp:HiddenField ID="countryValue" runat="server" />


            </td>
        </tr>
        <tr>

            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                District:</td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="stateId" class="states order-alpha"  name="state">
                    <option value="">Select State</option>
                </select>
                <asp:HiddenField ID="stateValue" runat="server" />
            </td>
        </tr>
        <tr>

            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF; background-color: #000080;">
                City:
            </td>
            <td class="auto-style3" style="border-color: #FFFFFF; color: #FFFFFF;">
                <select id="cityId" class="cities order-alpha"  name="city">
                    <option value="">Select City</option>
                </select>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script src="//geodata.solutions/includes/countrystatecity.js"></script>
                <asp:HiddenField ID="cityValue" runat="server" />
            </td>
        </tr>

The Javascript function:

function fillCities(countryName, districtName, cityName)
{
    var country = document.getElementById("countryId")
    country.value = countryName;

    var district = document.getElementById("stateId")
    district.value = districtName;

    var city = document.getElementById("cityId")
    city.value = cityName;
}
</script>

Akhilesh Singh · Accepted Answer · 2020-03-02T09:15:37.407

Suppose You're assign the value from code behind to Hidden field

countryValue.Value = "India";
stateValue.Value = "Maharashtra";
cityValue.Value = "Mumbai";
ScriptManager.RegisterStartupScript(this, this.GetType(), "com", "CallJavaScriptFun();", true);

and then calling the javascript method...the above code is set from code behind...

 function CallJavaScriptFun() {

            var countryValue = document.getElementById('<% =countryValue.ClientID %>').value;//here you will get the value of hidden field and assign to client side id....in our case it should be "India" as Value
            var country = document.getElementById('countryId');
            country = countryValue;

            var districtName = document.getElementById('<% =stateValue.ClientID %>').value; 
            var district = document.getElementById("stateId")
            district.value = districtName;

            var cityName = document.getElementById('<% =cityValue.ClientID %>').value;
            var city = document.getElementById("cityId")
            city.value = cityName;
        }

All the hidden field countryValue,stateValue,cityValue are stored in respectively variable...

and then assign to client side id....

and Follow this answer also....

How do I programmatically set the value of a select box element using JavaScript?

After Edit-

You have to put this javascript function into head part....check out this image...i have already tested it out...it's working fine...

I tried what you had suggested, but the RegisterStartupScript didnt call the javascript function for some reason. — Erel, Mar 02 '20 at 08:32
@@Erel i have edited my answer..check out....open the image in full screen — Akhilesh Singh, Mar 02 '20 at 09:16
im using a masterpage in this page, maybe that is the problem? i placed a breakpoint at the start of the javascript function, and it never activates — Erel, Mar 02 '20 at 11:04
https://stackoverflow.com/questions/12782928/call-masterpage-function-from-contentpage-in-asp-net — Akhilesh Singh, Mar 02 '20 at 12:44
thanks! apparently the breakpoint i set at the beginning of the javascript function didn't work, even though the function activated. — Erel, Apr 05 '20 at 10:55

Calling javascript function from C# code behind

1 Answers1