Як слід передавати дані між клієнтом Javascript та кодом C # за додатком ASP.NET?

Я шукаю найбільш ефективний / стандартний спосіб передачі даних між кодом JavaScript на стороні клієнта та кодом C # за програмою ASP.NET. Я використовую наступні методи, щоб досягти цього, але всі вони відчувають трохи неприємності.

Передавати дані з JavaScript у код C # - це шляхом встановлення прихованих змінних ASP та запуску післязавантаження:

<asp:HiddenField ID="RandomList" runat="server" />

function SetDataField(data) {
      document.getElementById('<%=RandomList.ClientID%>').value = data;
}

Потім у коді C # я збираю список:

protected void GetData(object sender, EventArgs e)
{
      var _list = RandomList.value;
}

Повертаючись назад, я часто використовую або ScriptManager для реєстрації функції та передачі її даних під час Page_Load:

ScriptManager.RegisterStartupScript(this.GetType(), "Set","get("Test();",true);

або я додаю атрибути до елементів керування перед публікацією назад або під час етапів ініціалізації чи попереднього надання:

Btn.Attributes.Add("onclick", "DisplayMessage("Hello");");

Ці методи мені добре служили і виконують роботу, але вони просто не відчувають себе повною. Чи існує більш стандартний спосіб передачі даних між стороною клієнта JavaScript та зворотним кодом C #?

Я бачив деякі повідомлення , як цей , які описують HTMLElement класу; це щось, на що я повинен звернути увагу?

Ви можете просто та легко викликати метод статичної сторінки з JavaScript, як у цьому прикладі . Якщо вам потрібно зателефонувати за допомогою методу з декількох сторінок, ви можете налаштувати веб-сервіс і викликати його з Javascript таким же чином. Приклад також включений нижче.

.aspx код

<asp:ScriptManager ID="ScriptManager1" 
EnablePageMethods="true" 
EnablePartialRendering="true" runat="server" />

Кодекс позаду коду

using System.Web.Services;

[WebMethod]
public static string MyMethod(string name)
{
    return "Hello " + name;
}

Код Javascript

function test() {
    alert(PageMethods.MyMethod("Paul Hayman"));
}

ПРИМІТКА. Методи сторінки повинні бути статичними. Це може бути проблематично для вас, залежно від того, що програма намагається зробити. Однак якщо інформація взагалі базується на сеансі, а ви використовуєте якусь вбудовану автентифікацію, ви можете помістити атрибут EnableSession на декоратор WebMethod, і це дозволить вам потрапити в HttpContext.Current.User, Сесія тощо.

Рекомендую переглянути jQuery. JQuery можна використовувати для здійснення зворотних дзвінків AJAX на сервер, який може передавати дані в будь-якому форматі, який вам потрібен - хорошим форматом може бути JSON, оскільки він може використовуватися безпосередньо в JavaScript.

Щоб перетягнути дані з сервера вниз на javascript за допомогою jQuery , наступний вибор робить асинхронний запит на http://youserver.com/my/uri та отримує дані від сервера у наданій функції.

$.get("my/uri", 
    function(data) { 
       // client side logic using the data from the server
    })

Надсилання даних з javascript на сервер працює аналогічно:

$.post("my/uri", { aValue : "put any data for the server here" }
    function(data) { 
       // client side logic using the data returned from the server
    })

Корпорація Майкрософт впорядкувала UpdatePanelконтроль робити ajax, так що, мабуть, це "стандартний" спосіб. Я б особисто не рекомендував використовувати його, хоча він ніде не має ряду набору функцій та контролю, який ви маєте при використанні JavaScript безпосередньо.

Ось як я це особисто роблю:

Створіть приховані поля для будь-яких значень на стороні клієнта, які ви хочете використовувати в стандартній поштовій обробці сторінки (наприклад, при надходженні звернень користувачів)

<asp:HiddenField ID="selectedProduct" runat="server" />

У коді за списком зареєструйте елементи керування, які ви хочете використовувати на стороні клієнта.

    /* Register the controls we want to use client side */

    string js = "var productBox = document.getElementById('" + selectedProduct.ClientID + "'); ";
    js += "var macCodeBoxBE = document.getElementById('" + beMacCode.ClientID + "'); ";


    ClientScript.RegisterStartupScript(this.GetType(), "prodBox", js, true);

Використовуйте бібліотеку javascript *, щоб виконати публікацію / отримати ajax, а потім використовуйте JavaScript для оновлення сторінки на основі відповіді

$.get("../ajax/BTBookAppointment.aspx?dsl=" + telNumberBox.value + "&date=" + requiredDate.value + "&timeslot=" + ddTimeslot.value, function (response, status, xhr) {

    if (response.indexOf("not available") > -1) {
        loaderImage.src = "../images/cross.png"
        output.innerHTML = response;
    } });

Напишіть окрему сторінку "ajax", яка переосмислює метод візуалізації для виконання роботи.

protected override void Render(HtmlTextWriter writer)
{
    if (string.IsNullOrEmpty(Request["mac"])) { return; }
    if (string.IsNullOrEmpty(Request["dsl"])) { return; }
    DataLayer.Checkers.BTmacCheckResponse rsp = DataLayer.Checkers.Foo.CheckMAC(Request["dsl"], Request["mac"]);

    writer.Write(rsp.Valid.ToString());
}

* Бібліотеки є на вибір, можна навіть прокрутити власну. Я б рекомендував jQuery , його стабільний і має широкий набір функцій.

JSON - найкращий спосіб виконання завдання. Не дивіться на проблему як проходження між "C # та JavaScript". Такий спосіб мислення призводить до кодових диваків, таких як те, що у вас в початковій публікації.

Загалом, це просто передача об'єктів між клієнтом і сервером у мовному агностиці. JSON чудово підходить для виконання завдання, оскільки він широко підтримується та легко читається.

Щоб встановити вхідний тег, який не потребує підключення до сервера, ви можете використовувати: (або <% #%> для прив'язки даних форм)

html:

<input type="hidden" value='<%= RandomValues %>' name="RANDOM_VALUES" />

контроль осики:

<asp:HiddenField ID="RandomList" runat="server" />

щоб отримати значення після зворотного зв'язку

Request.Form["RANDOM_VALUES"]

Якщо його, Asp управління прихований вхід, ви можете використовувати

Request.Form[RandomList.UniqueID]

Акуратна частина про Request.Form - якщо у вас є кілька тегів з однаковим атрибутом "name", вона поверне результат у CSV.