.NET Simple Form通过AJAX和JQUERY提交

时间:2011-06-13 12:26:08

标签: jquery .net sql ajax

由于balexandre和rtiq,我得到了流量。我的.ashx文件被调用,所以我知道一部分代码正在运行,它提醒我一个错误。当我跟踪.NET时,通过context.Request [“email”]和context.Request [“optin”]引入的变量为NULL。

我知道有些不对劲但我看不到它。我已经重新编辑了这篇文章以获得最新的代码。

HEAD中的jQuery

<script type="text/javascript">
    $(document).ready(function () {
        $(".submitConnectButton").click(function (evt) {
            evt.preventDefault();
            alert("hello click");

            alert($(".emailConnectTextBox").val());

            $.ajax({
                type: "POST",
                url: "/asynchronous/insertEmail.ashx",
                data: "{email: '" + $(".emailConnectTextBox").val() + "',optin: '" + $(".connectCheckbox").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) { alert(msg.d); },
                error: function (msg) { alert('Error:' + msg); }
            });
        });
    });
</script>

HTML

<div class="emailConnect">
    <asp:TextBox runat="server" ID="TextBox1" CssClass="emailConnectTextBox" BorderStyle="Solid"></asp:TextBox>
              <asp:ImageButton id="connectButton" CssClass="submitConnectButton" runat="server" ImageUrl="~/Images/submit_btn.png" /><br />
    <asp:CheckBox Checked="true" id="checkbox1" runat="server" CssClass="connectCheckbox" />
</div>

.ashx中的CodeBehind

public class insertEmail : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string strConnection = System.Configuration.ConfigurationManager.AppSettings["SQLConnectString"].ToString();

        string email = context.Request["email"],
               optin = context.Request["optin"];

        string strSQL = "INSERT INTO Emails (emailAddress,optIn) VALUES('" + email.ToString() + "','" + optin.ToString() + "')";
        SqlConnection Conn = new SqlConnection(strConnection); 
        SqlCommand Command = new SqlCommand(strSQL, Conn);
        Conn.Open();
        Command.ExecuteNonQuery(); 
        Conn.Close(); 
        context.Response.ContentType = "text/plain"; 
        context.Response.Write("email inserted");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

表格和元素正常运作。我们只是获取此NULL值而无法插入。 ajax正在正确调用.ashx文件并且文件正在编译,请求的变量为空。之前的帮助太棒了,如果有人能帮我解决这个问题,你会得到一个金星! :)


在一些书籍离线搜索之后,这最终与balexandres .aspx方法的结合起了作用:

$.post("/asynchronous/addEmail.aspx", {email: $(".emailConnectTextBox").val(),optin: $(".connectCheckbox").is(':checked')}, function(data) { alert('Successful Submission');});

4 个答案:

答案 0 :(得分:1)

  • 在您的网站根目录中创建一个名为asynchronous
  • 的新文件夹
  • 创建一个名为aspx的新addEmail.aspx页面并删除除第一行以外的所有HTML
  • addEmail.aspx内置代码,例如:

public void Page_Load(...) 
{
    insertEmail();
}

public void inserEmail() {

    string email = Request["email"],
           optin = Request["optin"];

    string strSQL = "INSERT INTO Emails (emailAddress,optIn) VALUES('" + email.ToString() + "', optin)";
    SqlConnection Conn = new SqlConnection(strConnection);
    SqlCommand Command = new SqlCommand(strSQL, Conn);
    Conn.Open();
    Command.ExecuteNonQuery();
    Conn.Close();

    // Output
    Response.Write("email inserted");
}
    主页中
  • .ajax()次调用将url属性更改为

    url: "/asynchronous/insertEmail.aspx",

您的msg success: function (msg) {}字符串email inserted

这是我一直以来所做的,不是创建一个ASPX页面,而是使用ASHX(Generic Handler)页面,它不包含任何ASP.NET页面循环(加载速度更快),而且它是一个简单的页面。


如果您想使用Generic Handler,请在asynchronous文件夹内创建一个名为inserEmail.ashx的文件,完整代码为:

public class insertEmail : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string email = context.Request["email"],
               optin = context.Request["optin"];

        string strSQL = "INSERT INTO Emails (emailAddress,optIn) VALUES('" + email.ToString() + "', optin)";
        SqlConnection Conn = new SqlConnection(strConnection);
        SqlCommand Command = new SqlCommand(strSQL, Conn);
        Conn.Open();
        Command.ExecuteNonQuery();
        Conn.Close();

        context.Response.ContentType = "text/plain";
        context.Response.Write("email inserted");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

并且,请务必将url属性更改为url: "/asynchronous/insertEmail.ashx",


从您的评论中我意识到您的data属性也不正确。

正确的是:

data: { 
        "email" : $(".emailConnectTextBox").val(), 
        "optin" : $(".connectCheckbox").val() },

你的完整ajax调用应该是:

$.ajax({
    type: "POST",
    url: "/asynchronous/insertEmail.ashx",
    data: { 
        "email" : $(".emailConnectTextBox").val(), 
        "optin" : $(".connectCheckbox").val() 
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) { 
        alert(msg.d); 
    },
    error: function (msg) { 
        alert('Error:' + msg.d); 
    }
});

并且通用处理程序中的Response.Write也应传递JSON字符串

所以,将tgis context.Response.Write("email inserted");更改为context.Response.Write("{d:'email inserted'});

就是这样。

答案 1 :(得分:1)

 $("button").click(function(){
 var content = new Object();
 content.email = $("#email").val();
 content.option = $("#checkbox").val();
 content = JSON.stringify(content);


 $.ajax({
        async: false,
        type: "POST",
        url: aspxPage + "/" + function, //make sure root is set proper.
        contentType: "application/json;",
        data: content,
        dataType: "json",
        success: successFunction,
        error: errorFunction
    });
    });


    //Make sure the form is posted ..which is needed for ajax to submit.
    //the data part in code behind seems ok.

答案 2 :(得分:0)

尝试更改此内容:

$("#connectButton").submit(function () {
    alert("hello click");
    (...)

对此:

$("#connectButton").click(function (evt) {
    evt.preventDefault();
    alert("hello click");
    (...)

此外,您必须记住ASP.NET服务器控件的ID与呈现的DOM控件ID不同。这可能是您的警报无法触发的原因。如果您在与服务器控件相同的页面上编写客户端脚本,则可以通过以下方式在脚本标记内“呈现”ClientID:

$("<%= connectButton.ClientID %>").click( ...

另一件事。如果在HEAD脚本中使用jQuery选择,则可能会过早地找到控件。您应该在创建DOM控件后运行它们。要完成的一件事是使用'ready'事件:

http://api.jquery.com/ready/

答案 3 :(得分:0)

您的html代码中没有表单,因为您可能不使用提交。 使用click代替rciq写道。