.NET Простая форма отправки через AJAX и JQUERY - PullRequest
1 голос
/ 13 июня 2011

У меня все работает, благодаря balexandre и rtiq. Мой файл .ashx вызывается, поэтому я знаю, что часть кода работает и предупреждает меня об ошибке. Когда я отслеживаю .NET, переменные, извлекаемые через context.Request ["email"] и context.Request ["optin"], имеют значение NULL.

Я знаю, что что-то не так, но не вижу этого. Я отредактировал этот пост, чтобы получить последний код.

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>

CodeBehind в .ashx

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 ]

1 голос
/ 13 июня 2011
 $("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.
1 голос
/ 13 июня 2011
  • создайте в корневом каталоге вашего сайта новую папку с именем asynchronous
  • создайте новую aspx страницу с именем addEmail.aspx и удалите весь HTML, кроме 1-й строки
  • внутричто 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 (универсальный обработчик), которая не содержит какого-либо цикла страниц 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'});

вот и все.

0 голосов
/ 13 июня 2011

В вашем html-коде нет формы, и вы не можете использовать submit.Используйте вместо этого щелчок, как написал rciq.

0 голосов
/ 13 июня 2011

Попробуйте изменить это:

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

К этому:

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

Также вы должны помнить, что идентификатор серверного элемента управления ASP.NET отличается от идентификатора элемента управления DOM. Это может быть причиной того, что ваше оповещение не срабатывает. Если вы пишете клиентский скрипт на той же странице, что и серверный элемент управления, вы можете «визуализировать» ClientID внутри тега скрипта следующим образом:

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

Другое дело. Если вы используете выборки jQuery в сценариях HEAD, возможно, они запускаются слишком рано, чтобы найти элементы управления. Вы должны запустить их после создания элементов управления DOM. Для этого нужно использовать событие ready:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...