adding new dropdown lists in asp without reloading the page

I would like to have a page that would contain: hyperlik "Add new country". After clicking this link by user, dropdown list with names of countries should appear. However this hyperlink should stay on this page. When user click this hyperlink once again, second dropdown list with exactly the same names should appear. This should be repeat as long as user clicks hyperlink.开发者_开发知识库 It is important that this page shouldn't be reloaded. Does anyone has any idea how can it be made?

The typical way to achieve this is to have your Add new country link trigger an ajax call out to a page you create which will provide the data for your list.

The preferred method these days seems to be having that page you call build up a JSON response, then your callback on the ajax method where you called it can populate that data into a drop down.

The page you call from AJAX could be something simple like this:

protected override void  Render(HtmlTextWriter writer)
{
    Dictionary<string, int> myStuff = new Dictionary<string, int>();
    myStuff.Add("country1", 1);
    myStuff.Add("country1", 2);

    JavaScriptSerializer jss = new JavaScriptSerializer();
    Response.Write(jss.Serialize(myStuff.ToList()));
    Response.ContentType = "application/json";
}

Use this jQuery on your main page:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            getCountries();
        });
    });
    function getCountries() {
        $.ajax({
            url: "ApiPage.aspx",
            dataType: "json",
            success: function (data) {
                for (var i in data) {
                    $("#myDropDown").append($('<option></option>').val(data[i].Value).html(data[i].Key));
                }
            }

        });
    }
</script>

Tested and working. (in a simplified example) I did have to convert from Dictionary to List for the json serializer to make it an array as desired. See the updated Serialize call. There is also some validation, e.g. did the ajax call return real data?, that would need added to a real life implementation.

It looks like you are doing it a least approximately right.

in the HTML if you have some tag that surrounds the area you want the drop down box to then it is simple.

for example:

in HTML:

<a href="javascript:addDD()">Add new country</a>

<div id="dropdownarea"></div>

in javascript:

function addDD(){
document.dropdownarea.innerHTML += "HTML code for the drop down that you want";
}