Inicio > Programación Web > Invocar un método C# usando jQuery desde el lado del cliente

Invocar un método C# usando jQuery desde el lado del cliente

domingo, 6 de octubre de 2024 Dejar un comentario Ir a comentarios

Este código te ayudara cuando es necesario definir un método code-behind y deseas invocar a ese método desde el lado del cliente. jQuery me ha hecho simple la vida y existe una manera muy fácil de hacer esto.

Antes, sabíamos que una manera era añadir nuestro método como un WebMethod, si queriamos invocar a un método code-behind desde el lado del cliente. Usando esta nueva manera, podemos hacerlo sin invocar a nuestro método en un WebMethod.

En este ejemplo, estoy escribiendo un método para eliminar un usuario en particular cuando se presiona la tecla Supr. No quiero un postback, así que quiero que el evento se ejecute en el lado del cliente. Escribi el método Delete en el lado del servidor dentro del archivo CS y lo invoco desde el lado del cliente usando jQuery. El nombre de mi página es Test.aspx.


Este es mi método en el archivo CS con el nombre DeleteRec().

private void DeleteRec()
{
    int ID= Request.Form["ID"].ToString().ToInteger(); 
    //parameter send from client side
    int UserID = Request.Form["UserID "].ToString().ToInteger();
    //parameter send from client side
    UserBO lObjUserBO = new UserBO ();
    lObjUserBO .DeleteUser(ID, UserID );
}

Así es como se invoca al método en el evento Page_Load:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        #region Ajax methods
        if (Request.Form["MethodName"] == "DeleteR")
        // same Method Name that we are specifying on client side(DeleteR)
        {
            DeleteRec();// Method defined on the page to delete the record
            return;
        }
        #endregion
    }
}

Esto es lo que tenemos que añadir en el lado del cliente (Test.aspx).

<a id="adelete" href="java<!-- no -->script:void(0);">Delete</a>

Ahora utiliza el siguiente script para invocar al método del lado del servidor cuando se hace clic en el enlace:

$('#adelete').click(function()
{
    var dataToSend={ID:ID,MethodName:'DeleteR',UserID :UserID };
 
    var options =
    {
        url: '<%=ResolveUrl("~/Test.aspx") %>?x=' + new Date().getTime(),
        data: dataToSend,
        dataType: 'JSON',
        type: 'POST',
        success: function (response) {
        window.location.href='<%=ResolveUrl("~/Test1.aspx")%>/'+ID;
        //after success will redirect to new page
    }
}
$.ajax(options);
});

Esperamos que le sea útil, cuando se trata de llamar a un método en el servidor del cliente.

ALTERNATIVA

Crear un servicio web llamado WebMethod.SVC, en el archivo CS agregar el método:

[OperationContract]
        [WebInvoke(Method = "POST")]
        public void DeleteRec(string ID)
        {
            DelUser(Convert.ToInt32(ID));
        }

En el lado del cliente indicar la ruta en invocar al método:

function DeleteMessage() {            
            var ID = $('[id$="hdnUserId"]').val();
            var url = '<%=ResolveUrl("~/WebMethods.svc/DeleteRec")%&  gt;';            
            $.ajax({
                type: "POST",
                url: url,
                contentType: "application/json; charset=utf-8",
                data: '{"ID":"' + ID + '"}',
                dataType: "json",
                success: function (response) {
                    document.location.href = '<%= ResolveUrl("~/Test1.aspx")%>';
                },
                error: function (xhr, ajaxOptions, thrownError) {
                }
            });
        }

Comparte y diviertete:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • BlinkList
  • Blogosphere
  • Live
  • Meneame
  • MSN Reporter
  • MySpace
  • RSS
  • Suggest to Techmeme via Twitter
  • Technorati
  • LinkedIn
  • email
  • FriendFeed
  • PDF
  • Reddit
  • Wikio IT
  • Add to favorites
  • blogmarks
Top Footer