Вызов функции ASP.NET из JavaScript?
Я пишу веб-страницу в ASP.NET. У меня есть некоторый код JavaScript, и у меня есть кнопка отправки с событием щелчка.
Можно ли вызвать метод, который я создал в ASP, с помощью события click в JavaScript?
20 ответов
Ну, если вы не хотите делать это с помощью Ajax или любым другим способом и просто хотите, чтобы произошла обычная обратная передача ASP.NET, вот как вы это делаете (без использования каких-либо других библиотек):
Это немного сложно, хотя...:)
я. В вашем файле кода (при условии, что вы используете 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 в качестве аргумента String, который вы передали из JavaScript. Теперь вы можете назвать любое другое событие, которое вам нравится.
PS: Это 'underscore-underscore-doPostBack' ... И в этой последовательности не должно быть пробелов... Каким-то образом ОМУ не позволяет мне писать в подчеркиваниях, за которыми следует символ!
__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. После установки и ссылки вы просто добавляете строку в страницу загрузки или инициализации:
Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))
Тогда вы можете делать такие вещи, как:
<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
Return 5
End Function
Затем вы можете назвать его на своей странице как:
PageClassName.Get5(javascriptCallbackFunction);
Последний параметр вашего вызова функции должен быть функцией обратного вызова javascript, которая будет выполняться при возврате запроса AJAX.
Я думаю, что пост в блоге Как получить и показать данные базы данных SQL Server на странице ASP.NET с помощью Ajax (jQuery) поможет вам.
Код JavaScript
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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-запросы, например, в RESTful API. Веб-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, предоставляя пользователям, посещающим ваш сайт, общее удобство работы. Не жертвуя ничем, вы получаете лучшее из обоих миров.
Рекомендации
Библиотека Microsoft AJAX выполнит это. Вы также можете создать собственное решение, которое использует AJAX для вызова собственных файлов сценариев aspx (как в основном) для запуска функций.NET.
Это библиотека под названием AjaxPro, которая была написана MVP по имени Майкл Шварц. Эта библиотека не была написана Microsoft.
Я широко использовал AjaxPro, и это очень хорошая библиотека, которую я бы порекомендовал для простых обратных вызовов на сервер. Это работает хорошо с версией Microsoft Ajax без проблем. Тем не менее, я хотел бы заметить, с тем, как легко Microsoft сделала Ajax, я бы использовал его только в случае крайней необходимости. Для выполнения действительно сложной функциональности, которую вы получаете от Microsoft, требуется много JavaScript, просто поместив его в панель обновлений.
Если функция __doPostBack не сгенерирована на странице, вам нужно вставить элемент управления, чтобы принудительно вызвать его следующим образом:
<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />
Я пытаюсь реализовать это, но это не работает правильно. Страница отправляется обратно, но мой код не выполняется. Когда я отлаживаю страницу, RaisePostBackEvent никогда не запускается. Одна вещь, которую я сделал по-другому, я делаю это в пользовательском элементе управления вместо страницы ASPX.
Если кто-то похож на Мерк и у меня возникли проблемы с этим, у меня есть решение:
Когда у вас есть пользовательский элемент управления, кажется, что вы также должны создать PostBackEventHandler на родительской странице. И затем вы можете вызвать PostBackEventHandler пользовательского элемента управления, вызвав его напрямую. Увидеть ниже:
public void RaisePostBackEvent(string _arg)
{
UserControlID.RaisePostBackEvent(_arg);
}
Где UserControlID - это идентификатор, который вы дали пользовательскому элементу управления на родительской странице, когда вложили его в разметку.
Примечание: Вы также можете просто просто вызвать методы, принадлежащие этому пользовательскому элементу управления напрямую (в этом случае вам понадобится только обработчик RaisePostBackEvent на родительской странице):
public void RaisePostBackEvent(string _arg)
{
UserControlID.method1();
UserControlID.method2();
}
Для обоих сценариев так легко (то есть синхронно / асинхронно) легко запустить обработчик событий на стороне сервера, например, событие нажатия кнопки.
Для запуска обработчика события элемента управления: Если вы уже добавили ScriptManager на свою страницу, пропустите шаг 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(); } } //]]>Напишите вам обработчик событий на стороне сервера для вашего контроля
protected void btnSayHello_Click(отправитель объекта, EventArgs e) { Label1.Text = "Hello World..."; }
Добавьте клиентскую функцию для вызова обработчика событий на стороне сервера
function SayHello() { __doPostBack("btnSayHello", ""); }
Замените "btnSayHello" в приведенном выше коде на идентификатор клиента вашего элемента управления.
При этом, если ваш элемент управления находится внутри панели обновления, страница не будет обновляться. Это так просто.
Еще одна вещь, которую нужно сказать: будьте осторожны с идентификатором клиента, потому что это зависит от вашей политики генерации идентификаторов, определенной свойством ClientIDMode.
Что касается:
var button = document.getElementById(/* Button client id */);
button.click();
Это должно быть как:
var button = document.getElementById('<%=formID.ClientID%>');
Где formID - это идентификатор элемента управления ASP.NET в файле.aspx.
Возможно, вы захотите создать веб-сервис для ваших общих методов.
Просто добавьте атрибут WebMethodAttribute поверх функций, которые вы хотите вызвать, и это все.
Наличие веб-службы со всеми вашими общими вещами также облегчает обслуживание системы.
Пожалуйста, попробуйте это:
<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;
ddlVoucherType - это элемент управления, который будет вызывать выбранное изменение индекса... И вы можете поместить любую функцию в выбранное изменение индекса этого элемента управления.
Самый простой и лучший способ добиться этого - использовать onmouseup() JavaScript событие, а не onclick()
Таким образом, вы будете запускать JavaScript после нажатия, и он не будет мешать ASP OnClick() событие.
Добавьте эту строку к загрузке страницы, если вы получаете объект ожидаемой ошибки.
ClientScript.GetPostBackEventReference(this, "");
Я пробую это, и поэтому я мог запустить метод Asp.Net при использовании jQuery.
Переадресация страницы в вашем коде jQuery
window.location = "Page.aspx?key=1";Затем используйте строку запроса в загрузке страницы
protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["key"] != null) { string key= Request.QueryString["key"]; if (key=="1") { // Some code } } }
Так что нет необходимости запускать дополнительный код
Вы также можете получить его, просто добавив эту строку в свой код JavaScript:
document.getElementById('<%=btnName.ClientID%>').click()
Я думаю, что это очень легко!
Ты можешь использовать 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...
Этот ответ работает как ветер для меня благодаря кросс-браузер:
Метод __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();
Blockquote