Databases
StackOverflow2013
Postsdbo
POPosting a form using jquery ajax library in Asp.NET 2.0
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPosting a form using jquery ajax library in Asp.NET 2.0
    text
    copied!<p>Hello guys and thanks for your help as always.</p> <p>I am stuck on Asp.NET 2.0 and I am trying to perform a form submit using jquery library.</p> <p>So far I got the non refresh effect using jquery post method like this:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $("#btnGuardar").click(function() { //post $.post("contacto.aspx", { txtRaz: $("#txtRaz").val(), txtDir: $("#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 &lt;/script&gt; </code></pre> <p>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. </p> <p>My attempt to use the ajax method goes like this:</p> <pre><code> //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 </code></pre> <p>This is not working as I am getting my form submited refreshing the whole page which is not what I want.</p> <p>Could you please give me an insight on this? and/or Is there a better way to do this?.</p> <p>Thanks for your help.</p> <hr> <p>I made it work and I post this for future reference:</p> <p>The $.post method works as I explained above.</p> <p>The $.ajax method wasn't working for me because I had the data parameter malformed.</p> <p>Two ways to do it correctly:</p> <p>1) Setting a correct syntax for the data parameter, please note the following format for data</p> <pre><code>data:"{'hdT': '" + $("#hdT").val() + "','txtRaz': '" + $("#txtRaz").val() + "','txtEmail': '" + $("#txtEmail").val() + "','txtTel': '" + $("#txtTel").val() + "','txtConsulta': '" + $("#txtConsulta").val() + "'}" </code></pre> <p>2) Using the JSON plugin to convert the data: parameter information into JSON format:</p> <pre><code>var thing={hdT: $("#hdT").val(),txtRaz: $("#txtRaz").val(),txtEmail: $("#txtEmail").val(),txtTel: $("#txtTel").val(),txtConsulta: $("#txtConsulta").val()}; </code></pre> <p>And the data information should be passed for the parameter like this:</p> <pre><code>data: $.toJSON(thing) </code></pre> <p>Once this is done a PageMethod should be set on the codebehind and no ScriptManager reference is needed because jquery handles all the process.</p> <p>To pass the information comming from the data object to the PageMethod each property must be a parameter of the Method. </p> <pre><code>&lt;WebMethod()&gt; _ Public Shared Function ProcesaEnvio(ByVal txtRaz As String) As String Return "Returns:" &amp; txtRaz End Function </code></pre> <p>Once there the needed process can be achieved.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload