Personnalisé Javascript Ajax pour ASP.NET

Question

J'ai écrit quelques fonctions Javascript basiques et je voudrais apprendre comment activer les publications asynchrones dans un projet C# 4.0/ASP.net en utilisant ce code JS. Par exemple, j'ai un script qui incrémente un nombre lorsque l'on clique dessus.

Lorsque vous cliquez à nouveau, le nombre est décrémenté. Je charge essentiellement le numéro à partir d'une base de données, puis cache un <span> et en montre un autre avec le nombre décrémenté correspondant au clic. Ce n'est pas compliqué javascript; C'est un exemple simple. Maintenant, lorsque je clique sur le bouton, je veux envoyer cet appel incrément/décrément au serveur pour mettre à jour le numéro de la base de données.

Je me rends compte que je peux accomplir quelque chose de semblable à cet exemple en utilisant le bouton à bascule AJAX Control Toolkit. Cependant, je veux savoir comment utiliser mon propre javascript pour créer des fonctionnalités AJAX.

Comment réaliser ceci en utilisant C# et mon code Javascript personnalisé?

Je ne suis pas opposé à l'utilisation de la bibliothèque ASP.net AJAX, je ne veux tout simplement pas utiliser un contrôle déjà construit. Je veux apprendre le processus de création de ma propre fonctionnalité AJAX. Je suppose que je vais devoir utiliser un asp:UpdatePanel, mais je ne sais pas comment appeler les fonctions C# du côté client.

Mon javascript n'est pas jQuery, en fait je ne veux rien avoir à faire avec jQuery jusqu'à ce que j'en apprenne plus sur javascript et ce processus.

Answer 1

si vous utilisez un UpdatePanel c'est très simple avec un appel JavaScript à __doPostBack. Voir here for example.

Answer 2

Jetez un oeil à ce tutoriel autour AJAX http://www.w3schools.com/Ajax/Default.Asp

Il vous donnera un aperçu de l'utilisation de Javascript pour GET et POST données en utilisant AJAX.

Espérons que cela aide.

Answer 3

Voici un lien sur la façon dont vous pouvez incorporer ASP.NET C# avec votre code Javascript personnalisé.

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

Il contient également un échantillon VS 2010 projet ici: http://go.microsoft.com/fwlink/?LinkId=185646

est ici généralement ce qui se passe ici:

Dans la solution AjaxIScriptControl:

SampleTextBox. cs - s'occupe du rendu du script suite roule sur la page; et l'attachement au client code javascript (le fichier js)

de SampleTextBox.js - prend en charge les fonctionnalités côté client et génère objet JavaScript de contrôle via prototype

Notes:

• Cet exemple tire parti de l'existant ASP .contrôle intégré de NET (vous avis SampleTextBox et hérite Textbox IScriptControl) mais vous pouvez rendre tout type de contrôle HTML si vous héritez ScriptControl classe à la place.

• Cette solution a également choisi de séparer le code de script et le site Web code dans deux projets mais vous pouvez faire facilement en un seul.

• Vous pouvez facilement exploiter une autre bibliothèque Javascript dans votre fichier JS

Dans mon expérience jusqu'à présent, c'est celui de la façon plus élégante d'intégrer le code côté serveur avec côté client si vous êtes à créer des contrôles réutilisables pour votre site Web. Vous profitez de l'alimentation côté serveur pour effectuer le rendu initial tout en fournissant des fonctionnalités côté client via Javascript.

Answer 4

Si vous créez vos fonctions C# comme WCF REST Services ou plus de style Script Services, vous pouvez facilement appeler vos méthodes de service de votre JavaScript en utilisant un XmlHttpRequest de base (pas jQuery ou UpdatePanels nécessaire).

Voici un rapide jsFiddle je mets ensemble: http://jsfiddle.net/ndVeS/

Cet échantillon a deux zones de texte; vous entrez une valeur dans le premier, cliquez sur le bouton, puis cette valeur est transmise à un service (un service d'écho) et renvoyée dans le rappel. Le code JavaScript prend cette valeur et remplit la seconde zone de texte avec.

Vous pouvez définir un C# service WCF RESTful comme ceci:

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

Si vous gérez vos appels cette façon, vous pouvez séparer votre logique de service de votre présentation (fichiers ASPX), et cela permet de faciliter test et vous pouvez également séparer les responsabilités de ceux qui créent l'interface utilisateur de ceux qui développent les fonctionnalités métier.

Je dois admettre que je suis plus d'une personne jQuery quand il s'agit de cela, mais je pensais que c'est un excellent exercice pour comprendre comment le XmlHttpRequest fonctionne sous le capot. Cela vous fait apprécier ce que jQuery (ou un framework similaire) fournit.

Voici un bel aperçu de l'objet XMLHttpRequest et comment l'utiliser: http://www.jibbering.com/2002/4/httprequest.html

J'espère que cela aide.

Answer 5

function GetXmlHttpObject(handler) { 
var objXMLHttp = null 
if (window.XMLHttpRequest) { 
    objXMLHttp = new XMLHttpRequest() 
} 
else if (window.ActiveXObject) { 
    objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP") 
} 
return objXMLHttp; 

}

fonction 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); 

}

avec le code ci-dessus, vous pouvez envoyer des données à tout .cs également déposer où vous pouvez modifier les données et chargez-le dans une nouvelle page qui va charger dans la div de mise à jour et la méthode devrait rediriger vers le nouveau fichier aspx.

J'espère que vous avez la logique :)

si vous avez des doutes me parviennent @ sankalpa.sam@gmail.com

Answer 6

Je sais que ce n'est pas MVC que vous faites, mais un coup d'oeil à la section MVC du site ASP.NET et vous y trouverez beaucoup d'exemples d'appels AJAX - MVC n'utilise pas ces horribles scripts .NET créant des objets .NET. La plupart utiliseront probablement jQuery - c'est une bibliothèque javascript open-source qui peut se brancher sur n'importe quelle application web et qui fournit de très bonnes fonctionnalités.

Answer 7

Peut-être ur la recherche de ce:

{ .ajax $ ({type ajaxscript() Fonction

: "POST", url: | url/methodName |, données: | variable_name |, contentType : "application/json; charset = utf-8", dataType: "json", succès: | certains javascript ici |, erreur: | certains javascript ici | });

Answer 8

Simple sans UpdatePanel:

Tout d'abord, ajouter un gestionnaire générique à votre projet (.ashx). Cela agira comme notre point de terminaison Http. Notre javascript l'appellera. Nous pourrions (et probablement devrions) utiliser un point de terminaison de service Web, mais cela nécessite de traiter la réponse et complique l'exemple. Un gestionnaire renvoie un texte brut.

<%@ 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; } } 
} 

Ensuite, créez votre page Web et ajoutez le javascript asynchrone.

<%@ 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> 

Le flux final est:

• Un utilisateur de la page Web clique sur le bouton Incrémenter ou Décrémenter qui appelle notre javascript
• Notre javascript envoie une requête avec l'action souhaitée dans le querystring au gestionnaire. Handler.ashx lit la chaîne de requête, incrémente ou décrémente sa variable statique et renvoie la valeur
• Notre callback reçoit la valeur et met à jour notre UI.