Виклик функції ASP.NET з JavaScript?

Я пишу веб-сторінку в ASP.NET. У мене є код JavaScript, і у мене є кнопка надсилання з подією натискання.

Чи можна викликати метод, створений у ASP, за допомогою події клацання JavaScript?

Ну а якщо ви не хочете робити це за допомогою Ajax чи будь-яким іншим способом, а просто хочете, щоб відбувся звичайний Aback.NET післязавантаження, ось як це зробити (без використання інших бібліотек):

Це трохи хитро, хоча ... :)

i. У своєму файлі коду (якщо ви використовуєте C # та .NET 2.0 або новішої версії) додайте наступний інтерфейс до класу Page, щоб він виглядав як

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

ii. Це має додати (використовуючи Tab- Tab) цю функцію до вашого кодового файлу:

public void RaisePostBackEvent(string eventArgument) { }

iii. У своєму події onclick в JavaScript напишіть такий код:

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

Це призведе до виклику методу "RaisePostBackEvent" у вашому кодовому файлі з "eventArgument" як "argumentString", який ви передали з JavaScript. Тепер ви можете зателефонувати на будь-яку іншу подію, яка вам подобається.

PS: Це "підкреслюючи-підкреслюючи-doPostBack" ... І в цій послідовності не повинно бути місця ... Чомусь WMD не дозволяє мені писати підкреслення, за якими слідує символ!

__doPostBack()Метод добре працює.

Ще одне рішення (дуже хакітське) - просто додати невидиму кнопку ASP у свою розмітку і натиснути її методом JavaScript.

<div style="display: none;">
   <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

У своєму JavaScript виберіть посилання на кнопку за допомогою свого ClientID, а потім зателефонуйте на неї .click () .

var button = document.getElementById(/* button client id */);

button.click();

Це зробить бібліотека Microsoft AJAX . Ви також можете створити своє власне рішення, яке передбачає використання AJAX для виклику власних файлів сценаріїв aspx (як в основному) для запуску .NET-функцій.

Я пропоную бібліотеку Microsoft AJAX. Після встановлення та посилання ви просто додасте рядок у завантаженні сторінки чи init:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Тоді ви можете робити такі речі, як:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

Потім ви можете назвати це на своїй сторінці як:

PageClassName.Get5(javascriptCallbackFunction);

Останнім параметром вашого функціонального виклику має бути функція зворотного дзвінка javascript, яка буде виконуватися при поверненні запиту AJAX.

Ви можете це зробити асинхронно, використовуючи .NET Ajax PageMethods. Дивіться тут або тут .

Я думаю, що повідомлення в блозі Як отримати та показати дані бази даних SQL Server на сторінці ASP.NET за допомогою Ajax (jQuery) , вам допоможе.

JavaScript-код

<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">

    function GetCompanies() {
        $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCompanies",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }

    function OnSuccess(data) {
        var TableContent = "<table border='0'>" +
                                "<tr>" +
                                    "<td>Rank</td>" +
                                    "<td>Company Name</td>" +
                                    "<td>Revenue</td>" +
                                    "<td>Industry</td>" +
                                "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                                    "<td>"+ data.d[i].Rank +"</td>" +
                                    "<td>"+data.d[i].CompanyName+"</td>" +
                                    "<td>"+data.d[i].Revenue+"</td>" +
                                    "<td>"+data.d[i].Industry+"</td>" +
                                "</tr>";
        }
        TableContent += "</table>";

        $("#UpdatePanel").html(TableContent);
    }

    function OnError(data) {

    }
</script>

Функція сервера ASP.NET

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
    System.Threading.Thread.Sleep(5000);
    List<TopCompany> allCompany = new List<TopCompany>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompany = dc.TopCompanies.ToList();
    }
    return allCompany;
}

Статичне, сильно типізоване програмування мені завжди було дуже природно, тому спочатку я протистояв вивченню JavaScript (не кажучи вже про HTML та CSS), коли мені доводилося будувати веб-інтерфейси для своїх додатків. Я б зробив усе, щоб подолати це, як перенаправлення на сторінку просто для того, щоб виконувати та діяти на події OnLoad, доки я можу кодувати чистий C #.

Однак ви побачите, що якщо ви будете працювати з веб-сайтами, ви повинні мати роздуму і починати думати більш орієнтованими на веб-сторінках (тобто не намагайтеся робити речі на стороні клієнта на сервері і навпаки) . Я люблю веб-форми ASP.NET і все ще використовую її (як і MVC ), але скажу, що намагаючись зробити речі простішими і приховати поділ клієнта та сервера, це може збити з пантелику новачків і в рази ускладнити справи. .

Моя порада - вивчити деякі основні JavaScript (як реєструвати події, отримувати DOM-об’єкти, маніпулювати CSS тощо), і ви знайдете веб-програмування набагато приємніше (не кажучи про простіше). Дуже багато людей згадували різні бібліотеки Ajax, але я не бачив реальних прикладів Ajax, так що тут все йдеться. (Якщо ви не знайомі з Ajax, все, що це, - це зробити асинхронний запит HTTP, щоб оновити вміст (або, можливо, виконати дії на стороні сервера у вашому сценарії), не перезавантажуючи всю сторінку або не виконуючи повне поштове повідомлення.

Сторона клієнта:

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

Це воно. Хоча ім'я може вводити в оману, результат може бути простим текстом або JSON, але ви не обмежуєтесь XML. jQuery забезпечує ще простіший інтерфейс для здійснення дзвінків Ajax (серед спрощення інших завдань JavaScript).

Запит може бути HTTP-POST або HTTP-GET і не повинен бути веб-сторінкою, але ви можете розміщувати повідомлення в будь-якій службі, яка слухає HTTP-запити, такі як API RESTful . Веб-API ASP.NET MVC 4 дозволяє налаштувати веб-сервер на стороні сервера, щоб обробляти запит також вітерцем. Але багато людей не знають, що ви можете також додати контролери API до проекту веб-форм і використовувати їх для обробки Ajax-дзвінків, як це.

На стороні сервера:

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

Global.asax

Потім просто зареєструйте маршрут HTTP у вашому файлі Global.asax, щоб ASP.NET дізнався, як направити запит.

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

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

Список літератури

• Аякс ,
• jQuery Ajax ,
• Контролер у веб-формах

Це зробить бібліотека Microsoft AJAX. Ви також можете створити своє власне рішення, яке передбачає використання AJAX для виклику власних файлів сценаріїв aspx (як в основному) для запуску .NET-функцій.

Це бібліотека під назвою AjaxPro, яка була написана MVP на ім'я Майкл Шварц . Ця бібліотека не була написана Microsoft.

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

Це так просто для обох сценаріїв (тобто синхронного / асинхронного), якщо ви хочете запустити обробник подій на стороні сервера, наприклад, подія натискання кнопки.

Для запуску обробника подій управління: Якщо ви вже додали ScriptManager на свою сторінку, тоді пропустіть крок 1.

1. Додайте наступне у розділ сценарію клієнтської сторінки

   //<![CDATA[
   var theForm = document.forms['form1'];
   if (!theForm) {
       theForm = document.form1;
   }
   function __doPostBack(eventTarget, eventArgument) {
       if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
           theForm.__EVENTTARGET.value = eventTarget;
           theForm.__EVENTARGUMENT.value = eventArgument;
           theForm.submit();
       }
   }
   //]]>

   2. Напишіть вам обробник подій на стороні сервера для контролю

      захищена void btnSayHello_Click (відправник об'єкта, EventArgs e) {Label1.Text = "Привіт, світ ..."; }

   3. Додайте функцію клієнта для виклику обробника подій на стороні сервера

      функція SayHello () {__doPostBack ("btnSayHello", ""); }

Замініть "btnSayHello" у наведеному вище коді на ідентифікатор клієнта вашого керування.

Тим самим, якщо ваш контроль знаходиться на панелі оновлення, сторінка не буде оновлена. Це так просто.

Ще одне, що слід сказати, це: будьте обережні з ідентифікатором клієнта, оскільки це залежить від вашої політики генерації ідентифікаторів, визначеної властивістю ClientIDMode.

Я намагаюся реалізувати це, але це не працює правильно. Сторінка публікується назад, але мій код не виконується. Коли я налагоджую сторінку, RaisePostBackEvent ніколи не звільняється. Одне, що я зробив інакше - це я роблю в керуванні користувача замість сторінки aspx.

Якщо хтось подібний до Мерка, і у вас є проблеми з цим, я маю рішення:

Якщо у вас є контроль користувача, вам здається, що ви також повинні створити PostBackEventHandler на батьківській сторінці. І тоді ви можете викликати PostBackEventHandler управління користувача, зателефонувавши йому безпосередньо. Дивись нижче:

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

Якщо UserControlID - це ідентифікатор, який ви надали користувачеві на батьківській сторінці, коли ви вклали його у позначку.

Примітка. Ви також можете просто просто викликати методи, що належать до управління цим користувачем, безпосередньо (у цьому випадку вам знадобиться лише обробник RaisePostBackEvent на батьківській сторінці):

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

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

Якщо функція __doPostBack не генерується на сторінці, вам потрібно вставити елемент керування, щоб змусити його так:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

Щодо:

var button = document.getElementById(/* Button client id */);

button.click();

Він повинен бути таким:

var button = document.getElementById('<%=formID.ClientID%>');

Де formID - ідентифікатор управління ASP.NET у файлі .aspx.

Додайте цей рядок до завантаження сторінки, якщо ви отримуєте очікувану помилку об’єкта.

ClientScript.GetPostBackEventReference(this, "");

Ви можете використовувати PageMethods.Your C# method Nameдля доступу до методів C # або методів VB.NET в JavaScript.

Спробуйте це:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

Або це

Response.Write("<script>alert('Hello World');</script>");

Використовуйте властивість кнопки OnClientClick для виклику функцій JavaScript ...

Ви також можете отримати його, просто додавши цей рядок у свій код JavaScript:

document.getElementById('<%=btnName.ClientID%>').click()

Я думаю, що це дуже просто!

Спробуйте:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

ddlVoucherType - це управління, яке буде викликано вибраною зміною індексу ... І ви можете поставити будь-яку функцію на вибрану зміну індексу цього елемента управління.

Найпростіший і найкращий спосіб досягти цього - onmouseup()скоріше використовувати події JavaScriptonclick()

Таким чином ви запустите JavaScript після натискання, і він не заважатиме OnClick()події ASP .

Я намагаюся це зробити, щоб я міг запустити метод Asp.Net під час використання jQuery.

1. Зробіть переспрямування сторінки в коді jQuery

   window.location = "Page.aspx?key=1";

2. Потім використовуйте рядок запиту при завантаженні сторінки

   protected void Page_Load(object sender, EventArgs e)
   {
       if (Request.QueryString["key"] != null)
       {
           string key= Request.QueryString["key"];
           if (key=="1")
           {
               // Some code
           }
       }
   }

Тому не потрібно запускати додатковий код

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

Метод __doPostBack () працює добре.

Ще одне рішення (дуже хакітське) - просто додати невидиму кнопку ASP у свою розмітку і натиснути її методом JavaScript.

<div style="display: none;"> 
    <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" /> 
</div> 

У своєму JavaScript виберіть посилання на кнопку за допомогою свого ClientID, а потім зателефонуйте на неї .Click ():

var button = document.getElementByID(/* button client id */); 

button.Click(); 

Блок-котирування