Ajax

=$.ajax=


 * llamada a un web service ASP.NET desde jQuery

code format="html4strict" $(document).ready(function {

$("#cmdAjax").click(function {            var id = $("#lst1").val;            var name = $("#txt1").val;            $.ajax({ type: "POST", dataType: "json", contentType: "application/json", url: "services/test.asmx/update", data: "{'id':'" + id + "','name':'" + name + "'}", success: function (data) { alert("Resultado: " + data.d); },               error: function  { alert("Error calling the web service."); }           });        });

});

name: 

id:  -select- uno dos  

code


 * se asocia la función Ajax al botón
 * en las variables se recojen los parámetros
 * también es posible hacer una llamada a un web method de la página sin hacer público el web service

Parámetros
 * type: POST
 * contentType, dataType: como se desea se envíe la información de servidor a cliente (JSON)
 * url: webservice/nombremetodo
 * data: parámetros
 * success: método javascript **function(data)**que se llamará si la operación ajax tiene éxito
 * el resultado se devuelve en //data//
 * un string se obtiene con **data.d**
 * una propiedad como **data.PropertyName**
 * error: si hay error
 * **error: function (XMLHttpRequest, textStatus, errorThrown) {**
 * jqXHR es el objeto XMLhttpRequest
 * textStatus es un string:"success", "notmodified", "error", "timeout", "abort", or "parsererror"
 * ejemplos
 * no existe el web service o el método: error/Internal Server Error
 * =====complete(jqXHR, textStatus)=====
 * se puede llamar esta función después de 'success' o 'error'

=Ejemplo de Formulario jQuery Dialog con llamada Ajax= > (@http://jqueryui.com/demos/dialog/)
 * se trata de un formulario en un dialog que al pulsar aceptar se envía los datos del formulario via ajax
 * en este ejemplo solo hay validación en el servidor, pero se puede añadir validación en cliente
 * En este ejemplo hay también la llamada ajax para rellenar un combo a partir de la selección del combo anterior



code format="html4strict" <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestUc.ascx.cs" Inherits="UC_TestUc" %> TEST
 * Página UI**

var pageUrl = '<%=ResolveUrl("~/services/test.asmx") %>';

// at the load of the page there are initializations // - the div 'dialog-form' is converted in a dialog popup // - 'open' button click: clean all input fields, open dialog form and focus at the first input // - 'cancel' button click: function to close de dialog // - 'ajax' button click: associate to Ajax call that posts input fields to web service method 'Update'

$(document).ready(function {        $("#dialog-form").dialog({ autoOpen: false, height: 420, width: 350, modal: true }).parent.appendTo("form");       jQuery("#cmdCancelar").click(function  { jQuery('#dialog-form').dialog("close"); });        jQuery("#cmdOpen")            .button            .click(function  { $("#txt1").val(""); $("#txt2").val(""); $("#lst1").get(0).selectedIndex = 0; $("#lst2").get(0).selectedIndex = 0; $("#dialog-form").dialog("open"); $("#txt2").focus; $("#validateTips").text(""); });       $("#cmdAjax").click(function  { var txt1 = $("#txt1").val; var lst1 = $("#lst1").val; var lst2 = $("#lst2").val; var txt2 = $("#txt2").text; $.ajax({               type: "POST",                dataType: "json",                contentType: "application/json",                url: pageUrl + '/update',                data: "{'lst1':'" + jQuery("#<%=lst1.ClientID %>").val +                  "','lst2':'" + jQuery("#<%=lst2.ClientID %>").val +                  "','txt1':'" + jQuery("#txt1").val +                  "','txt2':'" + jQuery("#txt2").val +                  "','chk1':'" + jQuery("#chk1").is(':checked') + "'}",                complete: function  {                    //jQuery('#dialog-form').dialog("close");                },                success: function (data) {                    if (data.d == "") {                        $("#validateTips").text("faltan datos");                    }                    else {                        alert("Resultado: " + data.d);                        jQuery('#dialog-form').dialog("close"); }               },                error: function (XMLHttpRequest, textStatus, errorThrown) { var err = XMLHttpRequest.responseText.toString; $("#lblError").html(err); alert('Error calling the web service cmdAjax: ' + textStatus + '/' + errorThrown);

}           });        });    });

// this function is triggered on change of lst1, in order to fill lst2 // Ajax call posted with lst1 selected item to web service method 'GetItems' to return list of lst2 items function BindLst2 { var lst1Id = jQuery('#<%=lst1.ClientID %>').val; if (jQuery("#<%=lst1.ClientID %>").val == "0") { jQuery('#<%=lst2.ClientID %>').empty.append('' + '[seleccionar]' + ' '); }       else { jQuery.ajax({               type: "POST",                contentType: "application/json; charset=utf-8",                url: pageUrl + '/GetItems',                cache: false,                dataType: "json",                data: "{'id':'" + lst1Id + "'}",                success: function (response) {                    FillLst2(response);                },                error: function (XMLHttpRequest, textStatus, errorThrown) {                    jQuery('#<%=lst2.ClientID %>').empty.append('Not Available ');                    alert('nook ' + textStatus + " " + errorThrown); //TODO check                }            }); }   }

// this function is triggered when the ajax call from Bindlst2 returns all items to fill lst2 function FillLst2(response) { var control = jQuery("#<%=lst2.ClientID %>"); var data = response.d;       if (data.length > 0) { control.empty.append('' + '[seleccionar]' + ' '); jQuery.each(data, function {                control.append(jQuery("  ").attr('value', this['ObjectId']).text(this['ObjectName']));            }); }       else { control.empty.append('' + 'sin items' + ' '); }   }



name: <asp:TextBox ID="txt1" runat="server" ></asp:TextBox>

id1: <asp:DropDownList ID="lst1" runat="server" onchange="BindLst2;"> -select-</asp:ListItem> uno</asp:ListItem> dos</asp:ListItem> </asp:DropDownList>

id2: <asp:DropDownList ID="lst2" runat="server" DataValueField="ObjectId" DataTextField="ObjectName" > -select-</asp:ListItem> </asp:DropDownList>

<asp:TextBox ID="txt2" runat="server" TextMode="MultiLine" Rows="4" ></asp:TextBox>

chk1: <asp:CheckBox ID="chk1" runat="server" Text="" />

<input type="button" id="cmdCancelar" value="Cancelar" /> <input type="button" id="cmdAjax" value="Ajax" />

<asp:Label ID="lblError" runat="server" Text=""></asp:Label>

<input type="button" id="cmdOpen" value="Open" /> <asp:Label ID="lblResult" runat="server"></asp:Label>

code

code format="csharp" public class ddlObject {   public int ObjectId { get; set; } public string ObjectName { get; set; } }
 * Clase con los items del combo a rellenar**

public static class Objects {

public static List<ddlObject> ddlObjects1 = new List<ddlObject> {       new ddlObject {ObjectId = 1, ObjectName = "AAA" }, new ddlObject {ObjectId = 2, ObjectName = "BBB" } };   public static List<ddlObject> ddlObjects2 = new List<ddlObject> {       new ddlObject {ObjectId = 3, ObjectName = "CCC" }, new ddlObject {ObjectId = 4, ObjectName = "DDD" } }; } code

code format="csharp" using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services;
 * Servicio Web**

/// /// Summary description for test /// [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class test : System.Web.Services.WebService {

public test {

//Uncomment the following line if using designed components //InitializeComponent; }

[WebMethod(Description = "updates database")] public string Update(string txt1, int lst1, int lst2, string txt2, bool chk1) { if (string.IsNullOrEmpty(txt1) || lst1 == 0 || lst2 == 0 || string.IsNullOrEmpty(txt2)) return string.Empty; else return "Updated " + txt1 + " (" + lst1.ToString + "/" + lst2.ToString + ") " + txt2 + " (" + chk1.ToString + ")"; }

[WebMethod(Description = "get ddlItems")] public List<ddlObject> GetItems(int id) {       if (id == 1) {           return Objects.ddlObjects1; }       else if (id == 2) {           return Objects.ddlObjects2; }       else return null; } code