Вступление
Использование jQuery в ASP.NET не так сложно. Просто следуйте этим шагам, и вы должны достичь нашей главной цели здесь. Используйте HTML-код ниже, чтобы включить jQuery.
Или вы можете использовать серверный код ASP.NET следующим образом:
Чтобы выполнить любую функцию при загрузке страницы, ASP.NET имеет встроенный метод для регистрации сценария запуска. Приведенный ниже код будет запускать функцию JavaScript «helloWorld» при загрузке страницы, которая добавляет текст «Hello World!» В div с идентификатором «divSample».
C # Server-код:
protected override void Render(HtmlTextWriter writer) { this.Page.ClientScript.RegisterClientScriptInclude("jQuery", "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"); base.Render(writer); }
jQuery with asp.net examples - HelloWorld with jQuery function helloWorld() { $("#divSample").append("Hello World!!"); }
Теперь у вас есть идея, как разместить jQuery внутри страницы ASP.NET и запустить скрипт при загрузке страницы.
Мы увидим, как передавать данные на сервер и получать от них динамический ответ, используя jQuery.
Селекторы jQuery
Это самая полезная функция в jQuery. Это помогает выбирать элементы в документе HTML.
У jQuey есть много опций для селекторов, вы можете выбрать элемент или массив элементов по его идентификатору, имени тега, имени класса, с определенными атрибутами.
Полезные примеры селекторов:
protected override void Render(HtmlTextWriter writer)
{
this.Page.ClientScript.RegisterClientScriptInclude("jQuery",
"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js");
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(),
"startup", "helloWorld();");
base.Render(writer);
}
jQuery Chainability
Отличная идея в jQuery - сделать код коротким и простым. В каждом методе jQuery он возвращает сам объект запроса, поэтому он позволяет выполнять над ним функцию и поддерживать цепочку.
Пример:
$("#selectDiv") //will return an array containing element which has id = selectDiv
$("div") //will return an array containing all "div" elements.
$(".header") //will return an array containing elements which has class name = header
$("input[name='emailaddress']") //will return an array containing "input" elements which has name = emailaddress
Средства доступа к объектам jQuery
Это можно использовать для возвращаемого объекта из любого селектора jQuery.
Пример:
$("div").addClass("sample").html("html changed").show();
События jQuery
Пример:
$(". removeItem").each{function()
{
$(this).bind("click",
return confirm("Are you sure you wish to delete this item?"));
}
Ajax с использованием jQuery и ASP.NET
Ajax с JQuery не так сложно достичь. Есть несколько вариантов получения асинхронного ответа от сервера с помощью jQuery Ajax.
Метод «load» - самая простая форма jQuery Ajax.
Пример:
$("p").bind("click", function()
{
$(this).append("clicked");
});
function clickMe()
{
$("#debugDiv").append("clicked!");
}
$("p").bind("click",clickMe); // Will bind clickMe function on click event of paragraphs
$("p").unbind("click",clickMe); // Will unbind clickMe function on click event of paragraphs
$(document).ready(function()
{
$("p").append("This text appended on DOM ready");
});
JQuery Ajax с данными JSON
Нотация объектов Javascript или JSON - отличная форма данных для передачи в вызове Ajax.
$("#serverResponse").load("AjaxCall.aspx"); // Response from page AjaxCall.aspx will get loaded in // Div "serverResponse" Send data to the server using jQuery Ajax Example: $.get("AjaxCall.aspx" // Call page AjaxCall.aspx ,{name: $("#txtName").val()} //Pass querystring "name" with value of text box "txtName" ,function(data) // On successfully retrival of response { $("#serverResponseSendData").html(data); // Apply recevied html response to html of div "serverResponseSendData" });
«; для (var i = 0; i«; // Построить сетку из полученных данных в текущем элементе } htmlGrid + = ""; $ ( "# DivJSONGrid") HTML (htmlGrid). // применить созданную сетку HTML к div "divJSONGrid" } }); Эффекты с помощью jQuery
У jQuery есть встроенные эффекты, такие как show, hide, slideDown и тому подобное. Метод эффекта имеет параметр длительности и функцию обратного вызова. Это будет вызвано после завершения анимационного эффекта.
Пример:public static string datatableToJSON(DataTable dt) { StringBuilder jsonStringBuilder = new StringBuilder(); StringWriter jsonStringWriter = new StringWriter(jsonStringBuilder); JsonWriter jsonWriter = new JsonTextWriter(jsonStringWriter); if (dt != null && dt.Rows.Count > 0) { jsonWriter.Formatting = Formatting.None; jsonWriter.WriteStartArray(); for (int i = 0; i < dt.Rows.Count; i++) { jsonWriter.WriteStartObject(); for (int j = 0; j < dt.Columns.Count; j++) { jsonWriter.WritePropertyName(dt.Columns[j].ColumnName.ToString().ToLower()); jsonWriter.WriteValue(dt.Rows[i][j].ToString()); } jsonWriter.WriteEndObject(); } jsonWriter.WriteEndArray(); return jsonStringBuilder.ToString(); } else { return null; } } [/js] Now we’ll try to parse this JSON data and we’ll build a grid out of its data at client side. [js] $.ajax({type:"POST", // jQuery ajax with POST method url: "JSONCall.aspx", // Call page JSONCall.aspx success:function(serverResponseData) // On success call function { dtItems = eval("(" + serverResponseData + ")"); // evaluate retrived data to javascript object var htmlGrid = ""; htmlGrid += ""; for(var i=0;i"; // Build grid from retrived data in current item } htmlGrid += ""; $("#divJSONGrid").html(htmlGrid); // apply created grid HTML to a div "divJSONGrid" } });Effects with jQueryjQuery has its built it effects such as show, hide, slideDown and stuffs like that. Effect method has parameter for duration and callback function. This will get called after finishing an animation effect. Example:$('#divSample').hide(1000); // will hide the div "divSample", and it will animate for 1000 miliseconds $('#divSample').show(1000); // will show the div "divSample" $('#divSample').toggle (1000); // will toggle display of the div "divSample" $("#divSample3").animate( // will animate the div "divSample" // to height 200px, width 400px and opacity of .5, for 1000 milisecond {height:200, width:400, opacity: .5}, 1000, function() { alert("Animation complete!"); // call method on completion of animation });Sam DeeringSam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia. New books out now!?♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *Can I learn Python?? Ok. When did a code editor from Microsoft become kinda cool!?Strange but true!Popular BooksVisual Studio Code: End-to-End Editing and Debugging Tools for Web DevelopersForm Design PatternsThe Art of Working RemotelyStuff we doPremiumForumsCorporate membershipsBecome an affiliateRemote JobsAboutOur storyContactContact usFAQPublish your book with usWrite an article for usAdvertiseLegalsTerms of usePrivacy policyConnect© 2000 – 2020 SitePoint Pty. Ltd.IndexItem CodePrice"+dtItems[i].index+""+dtItems[i].itemcode+""+dtItems[i].price+" /*<![CDATA[*/window.pagePath="/jquery-asp-net/";/*]]>*//*<![CDATA[*/window.___chunkMapping={"app":["/app-9502e564c29fd98b5967.js"],"component---src-pages-404-js":["/component---src-pages-404-js-b7cab190eed483e56be4.js"],"component---src-pages-about-us-js":["/component---src-pages-about-us-js-2fe386ff092780f2c328.js"],"component---src-pages-advertise-js":["/component---src-pages-advertise-js-154f7cb5253d7d7e9a0a.js"],"component---src-pages-contact-us-js":["/component---src-pages-contact-us-js-edcb20cb7a0eb174845a.js"],"component---src-pages-index-js":["/component---src-pages-index-js-a7d289a9bfede5a80c9a.js"],"component---src-pages-legals-js":["/component---src-pages-legals-js-f15058e17f5d6c871664.js"],"component---src-pages-privacy-policy-js":["/component---src-pages-privacy-policy-js-a73abde632bb8112d8f8.js"],"component---src-templates-author-index-js":["/component---src-templates-author-index-js-6a4a01d1cd81ca65944d.js"],"component---src-templates-post-list-index-js":["/component---src-templates-post-list-index-js-b7acbf9e843a7eae489e.js"],"component---src-templates-post-post-js":["/component---src-templates-post-post-js-e884fb8877e6af28a59e.js"]};/*]]>*/
Показатель | Код товара | Цена |
---|---|---|
"+ DtItems [я] .index +" | "+ DtItems [я] .itemcode +" | "+ DtItems [я] .price +" |