CODEWITHSUNDEEP
asp.netajaxpostwebforms
assaf.gov
assaf.gov

Reputation: 527

submit form details using Ajax tp aspx page

i want to send form details by mail, i tried to do it with Json and it worked just fine im trying to it with POST, by sending form details like in GET i wrote this code in the HTML file

     function ContactPageAjax() {

     $.ajax(
{
    type: "POST",
    url: "Process.aspx/SendMailPost",
    data: $("#myForm").serialize(),
    dataType: "POST",

    error: function () {
        alert('Error');
    },
    success: function (res) {
        document.getElementById("thanks").style.visibility = "visible";
        document.getElementById("contactForm").style.visibility = "hidden";
        alert("ok");
    } 
});
 }

and this code in the aspx file:

[WebMethod(EnableSession = false)]
public static void SendMailPost(String formVars)

{//email send code}

i tried to change String to Object and also some other types, it seems the problem is there but im not sure, when i run it the ajax call returns success. but the code of the mail is not running, if i use Json type it works good

what do you think my problem is..

Upvotes: 1

Views: 2832

Answers (1)

Saranya
Saranya

Reputation: 2008

You can post the form data to web method in aspx, by serializing the form data into an array, Stringify it into a json.

In the server side, you will have to create a custom type containing a name value pair and the parameter of the page method will be an array of that custom type. The reason being, the json serialized array should be able to be deserialized into the parameter of the web method for the ajax call to happen.

  function btnclick() {
        var array = $("#form1").serializeArray();
        $.ajax({
            type: "POST",
            url: "PageMethodTest.aspx/TestFormPost",
            data: JSON.stringify({ 'namevaluepair': $("#form1").serializeArray() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: fnsuccesscallback,
            error: fnerrorcallback
        });
    }

    function fnsuccesscallback(data) {
        alert(data.d);

    }
    function fnerrorcallback(result) {
        alert(result.statusText);
    }



    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" runat="server">
    </asp:ScriptManager>
    <div>
        <table runat="server">
            <tr>
                <td>
                    <label id="lblName" runat="server" title="Name">
                        Name</label>
                </td>
                <td>
                    <input type="text" id="txtName" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <label id="lblCompany" runat="server" title="Company">
                        Company</label>
                </td>
                <td>
                    <input type="text" id="txtCompany" runat="server" />
                </td>
            </tr>
        </table>
        <input type="button" style="width: 104px" value="Submit" onclick="btnclick();" />
    </div>
    </form>

Server code:

 [WebMethod, ScriptMethod]
    public static String TestFormPost(NameValue[] namevaluepair)
    {
        StringBuilder builder = new StringBuilder();
        foreach(NameValue nvp in namevaluepair)
        {
            builder.Append(nvp.Name + ": " + nvp.Value + ";"); 
        }
        return builder.ToString();
    }
}

 public class NameValue
{
    public String Name;
    public String Value;
}

Upvotes: 1

Related Questions