добавление новых выпадающих списков в asp без перезагрузки страницы

#javascript #asp.net #visual-studio #drop-down-menu

#javascript #asp.net #visual-studio #выпадающее меню

Вопрос:

Я хотел бы иметь страницу, которая содержала бы: гиперлик «Добавить новую страну». После нажатия пользователем на эту ссылку должен появиться выпадающий список с названиями стран. Однако эта гиперссылка должна оставаться на этой странице. Когда пользователь нажимает на эту гиперссылку еще раз, должен появиться второй выпадающий список с точно такими же именами. Это должно повторяться до тех пор, пока пользователь нажимает на гиперссылку. Важно, чтобы эта страница не перезагружалась. У кого-нибудь есть идеи, как это можно сделать?

1. пожалуйста, покажите, что вы уже сделали. Очевидно, это можно сделать, но я хотел бы посмотреть, как у вас продвигаются дела.

2. трудно сказать, что я сделал. Я хотел использовать javascript DOM, например: функция AddPlaceFrom() { var d = document.getElementById(«parentFromPlace»); d.innerHTML = «lala»; d.innerHTML = «<br/>»; }, но на месте «lala» должен быть код выпадающего списка. Но это не так просто. Мне нужно заполнить выпадающий список данными в коде C #, и я понятия не имею. Может быть, мне следует заполнить эти данные с помощью Ajax?

3. Я думаю, @hunter намеревался, чтобы вы добавили это code к исходному сообщению…

Ответ №1:

Типичный способ добиться этого — заставить вашу ссылку Добавить новую страну инициировать вызов ajax на созданную вами страницу, которая предоставит данные для вашего списка.

Предпочтительный метод в наши дни, похоже, заключается в том, что вызываемая вами страница создает ответ JSON, затем ваш обратный вызов метода ajax, которым вы его вызвали, может заполнить эти данные в раскрывающемся списке.

Страница, которую вы вызываете из AJAX, может быть чем-то простым вроде этого:

 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";
}

Используйте этот jQuery на своей главной странице:

 <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>

Протестировано и работает. (в упрощенном примере) Мне пришлось преобразовать словарь в список для сериализатора json, чтобы преобразовать его в массив по желанию. Смотрите обновленный вызов Serialize . Существует также некоторая проверка, например, вернул ли вызов ajax реальные данные?, которые необходимо было бы добавить в реальную реализацию.

Ответ №2:

Похоже, вы делаете это хотя бы приблизительно правильно.

в HTML, если у вас есть какой-либо тег, который окружает область, в которую вы хотите поместить выпадающий список, тогда это просто.

например:

в HTML:

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

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

в javascript:

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