Posting a form using jquery ajax library in Asp.NET 2.0

Hello guys and thanks for your help as always.

I am stuck on Asp.NET 2.0 and I am trying to perform a form submit using jquery library.

So far I got the non refresh effect using jquery post method like this:

<script type="text/javascript">

    $(document).ready(function() 
    {


        $("#btnGuardar").click(function()    
        {   
            //post
            $.post("contacto.aspx", {   txtRaz: $("#txtRaz").val(), 
                                        txtDir: $(开发者_JS百科"#txtDir").val(), 
                                        txtEmail: $("#txtEmail").val(), 
                                        txtTel: $("#txtTel").val(), 
                                        txtConsulta: $("#txtConsulta").val() },                                         
                                        function (response) {
                                        r=response+'';                                         
                                        var f=$('#pEnvioCorreo'); 
                                        if (r == '0'){
                        f.css("display",'block');
                    } 
                                        else if (r == '1'){
                        f.css("display",'block');
                                            f.innerHTML='Error en el envio';
                    }
                                        else { 
                        f.innerHTML='Verifique los campos obligatorios';
                    }                                        
       });
           return false;
           //post 

        })//click    


    });//ready

</script>

When the submit is performed I then catch the form fields on the Load event (No IsPostback veryfing) of the page and write an output accordingly to the response, I end it and then I catch the value to let one thing or other happen on the client.

My attempt to use the ajax method goes like this:

     //metodo 2
     $.ajax({
            type: "POST",
            url: "contacto.aspx",             
            contentType: "application/json; charset=utf-8",
            data:  {   
            txtRaz: $("#txtRaz").val(), 
            txtDir: $("#txtDir").val(), 
            txtEmail: $("#txtEmail").val(), 
            txtTel: $("#txtTel").val(), 
            txtConsulta: $("#txtConsulta").val() 
    },               
            dataType: "json",
            success: function(response) {
            r=response+'';                                         
                                        var f=$('#pEnvioCorreo'); 
                                        if (r == '0'){
                        f.css("display",'block');
                    } 
                                        else if (r == '1'){
                        f.css("display",'block');
                                            f.innerHTML='Error en el envio';
                    }
                                        else { 
                        f.innerHTML='Verifique los campos obligatorios';
                    }        
            }
        });
  //fin metodo 2

This is not working as I am getting my form submited refreshing the whole page which is not what I want.

Could you please give me an insight on this? and/or Is there a better way to do this?.

Thanks for your help.

I made it work and I post this for future reference:

The $.post method works as I explained above.

The $.ajax method wasn't working for me because I had the data parameter malformed.

Two ways to do it correctly:

1) Setting a correct syntax for the data parameter, please note the following format for data

data:"{'hdT': '" + $("#hdT").val() + "','txtRaz': '" + $("#txtRaz").val() + "','txtEmail': '" + $("#txtEmail").val() + "','txtTel': '" + $("#txtTel").val() + "','txtConsulta': '" + $("#txtConsulta").val() + "'}"

2) Using the JSON plugin to convert the data: parameter information into JSON format:

var thing={hdT: $("#hdT").val(),txtRaz: $("#txtRaz").val(),txtEmail: $("#txtEmail").val(),txtTel: $("#txtTel").val(),txtConsulta: $("#txtConsulta").val()};

And the data information should be passed for the parameter like this:

data: $.toJSON(thing)

Once this is done a PageMethod should be set on the codebehind and no ScriptManager reference is needed because jquery handles all the process.

To pass the information comming from the data object to the PageMethod each property must be a parameter of the Method.

<WebMethod()> _
Public Shared Function ProcesaEnvio(ByVal txtRaz As String) As String

        Return "Returns:" & txtRaz

End Function

Once there the needed process can be achieved.

You need to make a webmethod in your code behind and then call it with the jquery ajax. and use the jquery json plugin to make sure your json is nicely formed.

This is a very good tutorial to how to make webmethods to process ajax form data:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Also have a look at JSON plugin for jQuery, which provides simple ways to convert to JSON and back again.

Hope this helps.