Как заполнить поле выбора HTML (выпадающий список), используя jQuery из кода C # позади

Question

Я пытаюсь заполнить раскрывающийся список внешнего интерфейса HTML и кода C # позади пустой страницы ASPX, используемой в качестве локального сервера с использованием jQuery / AJAX. Я новичок в этом, поэтому, пожалуйста, имейте это в виду.

Я пробовал несколько разных подходов, но пока ни один из них не был успешным. Вот код, который у меня есть:

Оператор 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" />

C #код позади URL-адреса ASPX в приведенном выше операторе jQuery:

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

Я ожидаю, что окончательным результатом будет выпадающий список тестов, заполненный 1, 2, 3 из кода C #, но не былуспешно во всем, что я пытался до сих пор. Еще раз спасибо за любую помощь вы можете предоставить.

Answer 1

Это должен быть плохой код: http://localhost:60970/ItemProc.aspxproducts

Так что это одна вещь, которая не так.

Следующая более фундаментальная проблема - использование жизненного цикла страницы веб-форм ASP.NETперехват / событие для обработки данных, и вы думаете, что это открытая конечная точка, которую ваш Jquery может вызывать через AJAX и / или вызывать из AJAX на стороне клиента Javascript. Это не так.

Событие Page_Load запускается на стороне сервера на сервере Windows, на котором запущены приложения IIS и ASP.NET Web Forms. Ваша реализация Page_Load будет делать такие вещи, как печально известная и довольно ненавистная (если вы сделали что-то более новое, чем веб-формы ASP.NET за 15 лет):

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

Ваш ответ в вашем Page_Load куда идет? Кто / Что получает это? Никто и ничто не получает это, по крайней мере, ни в каком значимом или правильном порядке.

Теперь вернемся к вашему неверному Ури. Первая очевидная причина, по которой он неверен, заключается в следующем формате: http://localhost:60970/ItemProc.aspxproducts Нет никакого способа, которым это допустимый ресурс: ItemProc.aspxproducts. Я не буду подробно останавливаться на этом здесь, надеюсь, это начнет иметь смысл.

Теперь, что вы пытаетесь сделать, это вызвать конечную точку и получить ответ на данные. Вы используете jQuery для выполнения AJAXвызов конечной точки, что более важно, вы делаете AJAX-вызов от клиента. Этот клиент может быть мобильным приложением, веб-приложением, веб-страницей, каким-либо киоск-устройством, чем угодно.

ASP.NET может обслуживать данные для клиентских запросов, это то, что делает ASP.NET и работает на сервере для обслуживания запрошенных ресурсов. И вы даже можете отправлять данные из кода ресурса .aspx веб-формы в ответ на клиентский AJAX-запрос. Существует атрибут, который вы можете использовать для предоставления метода кода веб-формы в качестве конечной точки на сервере Windows, чтобы его можно было назвать клиентской ...

Но не делайте этого, используйте. Код aspx Web Form отстает с единственной целью, код, предназначенный для работы с этой .aspx Web Form. Вот откуда взялась эта ужасная поговорка «код позади», код для конкретной веб-формы .aspx.

Используйте «обработчик (и)» для вызовов AJAX. Это ресурс, который вы можете создать в Visual Studio, добавить новый => обработчик, расширение .ashx. Вы можете создавать конечные точки, которые вы можете вызывать с помощью URL и возвращать данные. Таким образом, не будет путаницы между кодом, привязанным к веб-форме, и кодом, который предназначен для обслуживания вызовов AJAX.

Вот отличный простой пример для подражания.

Кстати, я знаю, что, возможно, за эту часть моего ответа меня проголосуют, но все же стоит поделиться с вами: не используйте веб-формы ASP.NET илиASP.NET MVC для вашего интерфейса пользователя / веб-потребностей. Хорошо использовать ASP.NET для среднего уровня, но использование Web Forms для рендеринга / связывания компонентов пользовательского интерфейса или ASP.NET MVC Razor, в этом отношении, в жизненном пути разработки программного обеспечения - плохое направление. Веб-формы ASP.NET были плохими с самого начала: хрупкими, сложными, не позволяющими понять, как работают HTTP, HTML, CSS и Javascript. Он был создан, чтобы позволить разработчикам Windows Forms легче переходить на разработку веб-приложений. ASP.NET MVC был улучшением, но, в конце концов, то же самое: это тесно связано с тем, как веб-приложение работает и работает на клиентах, таких как веб-браузеры, которые читают только HTML / CSS и Javascript. В наше время любой современный интерфейс, несмотря на его вес, представляет собой полностью независимый слой, не связанный между собой, вызывающий API. Современный внешний интерфейс строится независимо, часто может быть подвергнут тщательному тестированию независимо и является очень естественным модульным модулем со многими одноразовыми компонентами пользовательского интерфейса многократного использования. Используйте обработчики или контроллеры ASP.NET для использования в качестве API-интерфейсов. Конечно, желательно использовать ASP.NET Core, работающий на Linux в контейнерах, если вы собираетесь использовать ASP.NET вообще. Но ни в коем случае не используйте ASP.NET WebForms <% WTF%> или @ Html.TextBoxFor (я в основном то же самое, что веб-формы в более привлекательном синтаксисе), и вы поблагодарите меня за это позже. PS вы можете легко интегрировать React.js в приложение ASP.NET Web Forms или ASP.NET MVC для новых функций, поэтому устаревший существующий код не является оправданием.

Answer 2

В коде ниже могут быть некоторые изменения в отношении вашего кода и вашей логики. Пожалуйста, используйте приведенный ниже код для постановки проблемы. Вам будет проще создать его динамический HTML, а затем назначить для выбора по идентификатору.

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

            });
        });
});