如何使用jquery ajax将数据从表单传递给webmethod?

时间:2013-02-26 09:45:05

标签: jquery

我在这样的asp.net webform中有一个联系表单

<div id="sample" style="display:none"> 
            <h2>Sample Data</h2> 
            <p>Your email was successful!!</p> 
            <p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p> 
        </div> 
    <form id="contactForm" runat="server">
        <div align="center">
            <table>
                <tr>
                    <td>
                        <b>CONTACT</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        Name:
                    </td>
                    <td>
                        <asp:TextBox ID="Txtname" runat="server" Width="220px" placeholder="Name" ClientIDMode="Static"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvname" runat="server" ErrorMessage="Please enter your name"
                            Style="color: Red;" Display="Dynamic" ControlToValidate="Txtname"></asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="revname" ControlToValidate="Txtname" ValidationExpression="^[a-zA-Z]+$"
                            Style="color: Red;" Display="Dynamic" runat="server" ErrorMessage="Enter Alphabets only"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        E-Mail:
                    </td>
                    <td>
                        <asp:TextBox ID="Txtemail" runat="server" Width="220px" placeholder="Email" ClientIDMode="Static"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvEmail" runat="server" ErrorMessage="Please enter your E-mail"
                            Style="color: Red;" ControlToValidate="Txtemail" Display="Dynamic"></asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="revEmail" ControlToValidate="Txtemail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                            Style="color: Red;" Display="Dynamic" runat="server" ErrorMessage="Please Enter valid mailId(ex:asm@gmail.com)"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Company:
                    </td>
                    <td>
                        <asp:TextBox ID="Txtcompany" runat="server" Width="220px" placeholder="Company" ClientIDMode="Static"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvcompany" runat="server" ErrorMessage="Please enter your company name"
                            Style="color: Red;" Display="Dynamic" ControlToValidate="Txtcompany"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Phone:
                    </td>
                    <td>
                        <asp:TextBox ID="Txtphone" name="Phone" runat="server" Width="220px" placeholder="Phone"
                            ClientIDMode="Static"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvphone" runat="server" ErrorMessage="Please enter your phone number"
                            Style="color: Red;" Display="Dynamic" ControlToValidate="Txtphone"></asp:RequiredFieldValidator>
                        <asp:RegularExpressionValidator ID="revphone" runat="server" Display="Dynamic" ErrorMessage="Enter digits only"
                            Style="color: Red;" ValidationExpression="^[0-9]+$" ControlToValidate="Txtphone"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        Message:
                    </td>
                    <td>
                        <asp:TextBox ID="Txtmessage" name="Message" runat="server" TextMode="MultiLine" Rows="4"
                            Width="220px" ClientIDMode="Static"> </asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvmsg" runat="server" Display="Dynamic" ErrorMessage="Please enter your message."
                            Style="color: Red;" ControlToValidate="Txtmessage"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Btnsend" runat="server" Text="SEND ENQUIRY" />
                    </td>
                </tr>
            </table>
        </div>
        </form>

通过使用以下脚本,Iam将数据传递给webmethod,就像这样

<script type="text/javascript">
        $(document).ready(function () {            
            $('#Btnsend').click(function () {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/SendMail",
                    data: "{'name': '" + $('#Txtname').val() + "', 'email': '" + $('#Txtemail').val() + "','company':' " + $('#Txtcompany').val() + "','phone':' " + $('#Txtphone').val() + "','message':' " + $('#Txtmessage').val() + "'}",                    
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {

                        $("#sample").modal({
                            opacity: 80,
                            overlayCss: { backgroundColor: "#fff" }
                        });

                    },
                    error: function (data) {
                        //alert(data.d);
                        alert("error");
                    }
            });
        });

    });
</script>

这是Default.aspx.cs页面,我的WebMethod就是这样的

[WebMethod]
public static string SendMail(string name, string email, string company, string phone, string message)
    {       
       System.Net.Mail.MailMessage mailer = new System.Net.Mail.MailMessage();
       mailer.IsBodyHtml = true;
       mailer.From = new MailAddress("XXXXXX", name, Encoding.UTF8);
       mailer.To.Add(new MailAddress("XXXX-----"));
       mailer.Body = "Company:" + company + ",";
       mailer.Body += "Message:" + message + ",";
       mailer.Body += "Phone:" + phone + "/ " + email;
       SmtpClient smtp = new SmtpClient();
       smtp.Host = "smtpauth.com";
       smtp.Port = 25;
       smtp.UseDefaultCredentials = false;
       smtp.Credentials = new System.Net.NetworkCredential("XXXXXX", "XXXXXXXXXX");
       try
       {
           smtp.Send(mailer);          
           return "ok";

       }
       catch (Exception ex)
       {
           return "error";

       }    

现在我的问题是当我点击按钮jquery ajax函数不能正常工作时,当我调试Jquery ajax函数时,它正在工作可能是什么问题?并且在成功时我需要显示一个modalpopUp,它在我的代码中不起作用。 谁能帮帮我...

1 个答案:

答案 0 :(得分:0)

我有类似的东西,我使用对话框和asp控件将信息传递回后面的代码,你的按钮看起来类似于我试图使用的

<td>
    <asp:Button ID="Btnsend" runat="server" Text="SEND ENQUIRY" />
 </td>



<td>
   <asp:Button ID="Btnsend" runat="server" Text="SEND ENQUIRY" OnClick="calltheCodeBehindfunc" UseSubmitBehavior="false" />
 </td>

将它放在允许从jQuery对话框中调用代码的按钮中。