Пользовательский Javascript Ajax для ASP.NET - PullRequest
Новая
       1

Пользовательский Javascript Ajax для ASP.NET

7 голосов
/ 24 августа 2010

Я написал несколько основных функций Javascript и хотел бы узнать, как включить асинхронные обратные передачи в проекте C # 4.0 / ASP.net с использованием этого кода JS.

Например, у меня есть скрипт, который увеличивает число при нажатии. При повторном нажатии номер уменьшается. Я в основном загружаю номер из базы данных, затем скрываю один <span> и показываю другой с соответствующим уменьшенным числом при нажатии. Это не сложный JavaScript; это простой пример. Теперь, когда я нажимаю кнопку, я хочу отправить этот обратный вызов на сервер для обновления номера базы данных.

Я понимаю, что могу сделать что-то похожее на этот пример, используя кнопку переключения AJAX Control Toolkit. Однако я хочу знать, как использовать свой СОБСТВЕННЫЙ JavaScript для создания функциональности AJAX.

Как мне сделать это, используя C # и мой собственный код Javascript?

Я не против использования библиотеки ASP.net AJAX, я просто не хочу использовать готовый встроенный элемент управления. Я хочу изучить процесс создания собственной функциональности AJAX. Я бы предположил, что мне придется использовать asp:UpdatePanel, но я не знаю, как вызывать функции C # со стороны клиента.

Мой javascript не является jQuery, фактически я не хочу иметь ничего общего с jQuery, пока не узнаю больше о javascript и этом процессе.

Ответы [ 8 ]

2 голосов
/ 02 сентября 2010

Простой без UpdatePanel:

Сначала добавьте универсальный обработчик в ваш проект (.ashx). Это будет действовать как наша конечная точка Http. Наш javascript будет называть это. Мы могли бы (и, вероятно, должны) использовать конечную точку веб-службы, но это требует обработки ответа и усложняет пример. Обработчик возвращает простой текст. 

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler
{
    // We'll use a static var as our "database".
    // Feel free to add real database calls to the increment
    // and decrement actions below.
    static int TheNumber = 0;

    public void ProcessRequest(HttpContext context)
    {       
        string action = context.Request.QueryString["action"];
        if (!string.IsNullOrEmpty(action))
        {
            if (action == "increment")
                TheNumber++;   //database update and fetch goes here
            else if (action == "decrement")
                TheNumber--;   //database update and fetch goes here           
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write(TheNumber);
    }

    public bool IsReusable { get { return false; } }
}

Затем создайте свою веб-страницу и добавьте асинхронный JavaScript. 

<%@ Page Language="C#"%>
<html>
<head runat="server">    
    <script type="text/javascript">
    // An XMLHttpRequest object is required to make HTTP requests.
    // Try a couple instantiation strategies to handle different
    // browser implementations.
    function createXMLHttpRequest() {
        try { return new XMLHttpRequest(); } catch (e) { }
        try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { }
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
        alert("XMLHttpRequest not supported");
        return null;
    }

    function callHandler(action) {
        var xmlHttpReq = createXMLHttpRequest();
        // We're interested in an asychronous request so we define a 
        // callback function to be called when the request is complete.
        xmlHttpReq.onreadystatechange = function () {
            if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
                document.getElementById("<%= lbl.ClientID%>").innerHTML 
                    = xmlHttpReq.responseText;
        }
        xmlHttpReq.open("GET", "Handler.ashx?action=" + action, true);
        xmlHttpReq.send(null);
    }  
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <div>
    The Number:&nbsp;<Label runat="server" id="lbl">0</Label>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Increment" 
            OnClientClick="callHandler('increment');return false;" />
        &nbsp;
        <asp:Button ID="Button2" runat="server" Text="Decrement" 
            OnClientClick="callHandler('decrement');return false;" />
    </div>
    </form>
</body>
</html>

Конечный поток:

  • Пользователь веб-страницы нажимает кнопку увеличения или уменьшения, которая вызывает наш javascript
  • Наш javascript отправляет запрос с желаемым действием в строке запроса на Handler.ashx
  • Handler.ashx читает строку запроса, увеличивает или уменьшает ее статическую переменную и возвращает значение
  • Наш обратный вызов получает значение и обновляет наш интерфейс.
0 голосов
/ 31 августа 2010

Я знаю, что это не MVC, который вы делаете, но посмотрите на раздел MVC сайта ASP.NET, и вы найдете там много примеров вызовов AJAX - MVC не использует эти ужасные сценарии. создание объектов .NET. Большинство из них, вероятно, будут использовать jQuery - это библиотека javascript с открытым исходным кодом, которая может подключаться к любому веб-приложению и обеспечивает действительно приятную функциональность.

0 голосов
/ 31 августа 2010

Может быть, вы ищете это:

function ajaxscript () { $ .Ajax ({ тип: "POST", url: | url / methodName |, данные: | имя_переменной |, contentType: "application / json; charset = utf-8", dataType: "json", успех: | некоторый JavaScript здесь |, ошибка: | некоторый JavaScript здесь | });

0 голосов
/ 26 августа 2010 
function GetXmlHttpObject(handler) {
var objXMLHttp = null
if (window.XMLHttpRequest) {
    objXMLHttp = new XMLHttpRequest()
}
else if (window.ActiveXObject) {
    objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp;

}

function GetDropDown () {

function stateChanged(StatesUpdated) {


    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        document.getElementById('updateplace').innerHTML = xmlHttp.responseText;
        //"updateplace" is you div id which will hold the new data or new page
        if (navigator.appName != "Microsoft Internet Explorer") {

        }
    }
    else {
        //alert(xmlHttp.status);
    }
}





xmlHttp = GetXmlHttpObject()
if (xmlHttp == null) {
    alert("Browser does not support HTTP Request");
    return;
}



    url = "xyz.aspx" //this might be sent to any post data
    url = url + "&sid=" + Math.random();


    xmlHttp.onreadystatechange = stateChanged;

    xmlHttp.open("GET", url, true);

    xmlHttp.send(null);

}

с помощью приведенного выше кода вы можете отправлять данные в любой файл .cs, где вы можете изменить данные и загрузить их на новую страницу, которая будет загружена в обновление div, и метод должен перенаправить в новый файл ASPX. *

Надеюсь, вы поняли логику:)

если у вас есть какие-либо сомнения, свяжитесь со мной @ sankalpa.sam@gmail.com

0 голосов
/ 24 августа 2010

Если вы создаете свои функции C # как Службы REST WCF или более старые * Службы сценариев , то вы можете легко вызывать методы службы из своего JavaScript с помощью основного XmlHttpRequest (без jQueryили необходимы UpdatePanels).

Вот быстрый jsFiddle, который я собрал: http://jsfiddle.net/ndVeS/

В этом примере два текстовых поля;Вы вводите значение в первом, нажимаете кнопку, и затем это значение передается службе (эхо-службе) и возвращается в обратном вызове.Код JavaScript принимает это значение и заполняет второе текстовое поле им.

Вы можете определить службу C # WCF RESTful, например: 

[ServiceContract]
public class EchoService : IEchoService {
  [WebGet(UriTemplate="EchoMe?val={theValue}, ResponseFormat=WebMessageFormat.Json)]
  public string EchoMe(string theValue) {
    return theValue;
  }
}

Если вы обрабатываете свои вызовы таким образом, вы можетеотделите свою служебную логику от своей презентации (файлы ASPX), и это упрощает тестирование, и вы также можете отделить обязанности от тех, кто создает пользовательский интерфейс, от тех, которые создают деловую функциональность.

Я должен признать, что яКогда дело доходит до этого, я больше похож на jQuery, но я подумал, что это отличное упражнение, чтобы выяснить, как работает XmlHttpRequest.Это заставляет вас ценить то, что предоставляет jQuery (или аналогичный фреймворк).

Вот хороший обзор объекта XmlHttpRequest и как его использовать: http://www.jibbering.com/2002/4/httprequest.html

Надеюсь, это поможет.

0 голосов
/ 24 августа 2010

Вот ссылка на то, как вы можете включить ASP.NET C # в свой пользовательский код Javascript.

http://msdn.microsoft.com/en-us/library/bb386450.aspx

Здесь также содержится пример проекта VS 2010: http://go.microsoft.com/fwlink/?LinkId=185646

Вот в общем, что здесь происходит:

В решении AjaxIScriptControl :

SampleTextBox.cs - обеспечивает отображение элемента управления сценарием на странице; и прикрепление к клиентскому коду JavaScript (файл js)

SampleTextBox.js - заботится о функциональности на стороне клиента и генерирует объект управления Javascript с помощью прототипа

Примечания:

  • В этом примере используются существующие ASP.NET встроенный элемент управления (вы обратите внимание, SampleTextBox наследует Textbox и IScriptControl) но вы можете визуализировать любой тип HTML-элемента управления, если вы наследуете ScriptControl класс вместо этого.

  • Это решение также выбрал для разделения Скрипт управления кодом и сайтом код в двух проектах, но вы можете легко превратить его в один.

  • Вы можете легко использовать другую библиотеку Javascript в своем файле JS

По моему опыту, это один из наиболее элегантных способов объединения кода на стороне сервера с клиентской частью, если вы хотите создать повторно используемые элементы управления для своего веб-сайта. Вы используете возможности на стороне сервера для выполнения начального рендеринга, в то же время предоставляя возможности на стороне клиента через Javascript.

0 голосов
/ 24 августа 2010

Взгляните на этот урок по AJAX http://www.w3schools.com/Ajax/Default.Asp

Это даст вам обзор использования Javascript для получения и отправки данных с использованием AJAX.

Надеюсь, это поможет.

0 голосов
/ 24 августа 2010

, если вы используете UpdatePanel, это очень просто с вызовом JavaScript для __doPostBack. См. здесь, например .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...