在 asp 中添加新的下拉列表而不重新加载页面答案

【问题标题】：adding new dropdown lists in asp without reloading the page在 asp 中添加新的下拉列表而不重新加载页面
【发布时间】：2023-03-25 20:47:01
【问题描述】：

我想要一个包含以下内容的页面：超级“添加新国家”。用户单击此链接后，应出现带有国家名称的下拉列表。但是，此超链接应保留在此页面上。当用户再次单击此超链接时，应出现第二个名称完全相同的下拉列表。只要用户单击超链接，就应该重复此操作。重要的是不要重新加载此页面。有谁知道如何制作它？

【问题讨论】：

请展示您到目前为止所做的工作。显然，这是可以做到的，但我想看看你的进展如何。
很难说我做了什么。我想使用 javascript + DOM，例如： function AddPlaceFrom() { var d = document.getElementById("parentFromPlace"); d.innerHTML += "拉拉"; d.innerHTML += "
"; }，但“lala”应该是下拉列表的代码。但这并不容易。我必须用 C# 代码中的数据填充下拉列表，但我不知道。也许我应该用 Ajax 填充这些数据？
我认为@hunter 打算让您将此code 添加到原始帖子中...

标签： javascript asp.net visual-studio drop-down-menu

【解决方案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 序列化程序从 Dictionary 转换为 List 以使其成为所需的数组。请参阅更新的序列化调用。还有一些验证，例如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";
}

【讨论】：

我认为document.dropdownarea 与document.getElementById("dropdownarea") 相同
是的，但他的问题是让 html 填充元素。他需要服务器端的东西。