如何使用 jQuery 从 C# 代码中填充 HTML 选择框（下拉列表）

Question

我正在尝试使用 jQuery/AJAX 从用作本地服务器的空白 ASPX 页面填充 HTML 前端的下拉列表和 C# 代码。我是新手，所以请记住这一点。

我尝试了多种不同的方法，但到目前为止都没有成功。这是我到目前为止的代码：

jQuery 语句：

var uri = 'http://localhost:60970/ItemProc.aspxproducts';

    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON(uri)
            .done(function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, item) {
                    // Add a list item for the product.
                    $('<option>', { text: item }).appendTo($('#test'));
                });
            });
    });

我要填充的 HTML 下拉列表：

<h2>All Products</h2>
<select id="test" />

上述 jQuery 语句中 ASPX url 背后的 C# 代码：

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            String outstr = "";
            outstr += "1";
            outstr += "2";
            outstr += "3";
            Response.Write(outstr);
        }
        catch (Exception ex)
        {
            Response.Write(ex.Message);
        }
    }
 }

我希望最终结果是测试下拉列表，其中包含来自后面的 C# 代码的 1、2、3，但到目前为止我尝试过的任何事情都没有成功。再次感谢您提供的任何帮助。

Answer 1

这一定是个坏 uri：http://localhost:60970/ItemProc.aspxproducts

所以这是错误的一件事。

下一个更根本的问题是您使用 ASP.NET Web 表单页面生命周期挂钩/事件来提供数据，并且您认为这是一个暴露的端点，您的 Jquery 可以通过 AJAX 调用和/或可以通过 Javascript 客户端 AJAX 调用。事实并非如此。

Page_Load 事件在服务器端触发，在运行 IIS 和 ASP.NET Web 窗体应用程序的 Windows Server 上。您的 Page_Load 实现会做一些臭名昭著且令人厌恶的事情（如果您在 15 年内做过比 ASP.NET Web 窗体更新的事情）：

if(!IsPostBack) {
//init some data from SQL and bind to a WebForms DataGrid or something like that for example
}

您在Page_Load 中的回复去了哪里？谁/什么接收它？没有人接受它，至少没有以任何有意义或适当的方式接收它。

现在，回到您不正确的 uri。它不正确的第一个明显原因是格式：http://localhost:60970/ItemProc.aspxproducts 这不可能是有效资源：ItemProc.aspxproducts。我不会在这里详细说明这一点，希望这将开始有意义。

现在，您要做的是调用端点并获取数据响应。您正在使用 jQuery 对端点执行 AJAX 调用，更重要的是，您正在从客户端进行 AJAX 调用。这个客户端可以是一个移动应用程序、一个网络应用程序、一个网页、一些信息亭设备，等等。

ASP.NET 可以为客户端请求提供数据，这就是 ASP.NET 所做的，它在服务器上运行以提供请求的资源。您甚至可以将来自 Web 表单 .aspx 资源代码的数据提供给客户端 AJAX 请求。您可以使用一个属性将 Web 窗体的代码隐藏方法公开为 Windows 服务器上的端点，以便可以将其称为客户端...

但不要那样做，以单一用途的方式使用 .aspx Web 表单的代码，后面的代码可以与 .aspx Web 表单一起使用。这就是“代码背后”这个可怕的说法的来源，它是特定 .aspx Web 表单的代码。

为您的 AJAX 调用使用“处理程序”。这是您可以在 Visual Studio 中创建的资源，Add New => Handler，扩展名为 .ashx。您可以创建可以使用 url 调用并返回数据的端点。这样一来，与 Web 窗体相关的代码和用于提供 AJAX 调用的代码之间就不会混淆。

Here is a great simple example to follow.

顺便说一句，我知道我的这部分答案可能会被否决，但仍然值得与您分享：不要使用 ASP.NET Web Forms 或 ASP.NET MVC前端用户界面/网络需求。使用 ASP.NET 作为中间层很好，但使用 Web 窗体来呈现/绑定 UI 组件或 ASP.NET MVC Razor，就此而言，在软件工程生命路径中是一个糟糕的方向。 ASP.NET Web 表单从一开始就很糟糕：脆弱、复杂、模糊了 HTTP、HTML、CSS 和 Javascript 的工作方式。它旨在允许 Windows 窗体开发人员更轻松地迁移以开发 Web 应用程序。 ASP.NET MVC 是一种改进，但最终还是一样的：这种紧密耦合的混淆了 Web 应用程序如何在仅读取 HTML/CSS 和 Javascript 的客户端（如 Web 浏览器）上工作和运行。 在这个时代，任何当代前端，值得它的重量，都是一个高度独立的层，解耦，调用 API。现代前端是独立构建的，通常可以独立进行大量测试，并且非常自然地模块化，具有许多单一用途、可重用的构建块 UI 组件。使用 ASP.NET 处理程序或控制器作为 API，当然，如果您打算使用 ASP.NET，最好使用在容器中运行在 Linux 上的 ASP.NET Core。但决不能再次使用 ASP.NET WebForms 或 @Html.TextBoxFor（我基本上与 Web 窗体的语法相同），稍后您会感谢我的。附言您可以轻松地将 React.js 集成到 ASP.NET Web 窗体或 ASP.NET MVC 应用程序中以获得新功能，因此遗留的现有代码并不是一个借口。

Answer 2

下面的代码可能会根据您的代码和逻辑进行一些更改。请使用以下代码作为您的问题陈述。 您可以更轻松地创建其动态 HTML，然后按 ID 分配给选择。

 var uri = 'http://localhost:60970/ItemProc.aspxproducts';

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(uri)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                 var opt ='';
                  for(var i=0;i<item.length;i++) // you can use length of items
                   {
                    opt +='<option>'+ item.text;
                    opt +='</option';
                   }    
                   $('#test').append(opt);

            });
        });
});