ASP.NET - 如何使用jQuery AJAX来调用控制器的操作

时间:2016-11-12 14:17:05

标签: jquery asp.net ajax asp.net-mvc-4

我在从View调用jQuery AJAX调用Controller的操作时遇到问题。我的实验是验证来自2个文本框的电子邮件地址:“电子邮件地址”和“电子邮件密码”。我想将结果更新为2个文本框下的“div”。请参阅下面的代码了解更多信息:

我的控制器:

[HttpPost]
[ValidateAntiForgeryToken]
public string verifyEmail(string emailAddress,string emailPassword)
{
    ImapClient ic;
    string result;
    try
    {
        ic = new ImapClient("imap.gmail.com", emailAddress, emailPassword, AuthMethods.Login, 993, true, false);

        //if the email address is verified
        result = "OK";
    }
    catch
    {
        //else
        result = "Failed";
    }

    //the result will be inserted into a HTML <div>
    return result;
}

我的观点:

    <div class="form-group">
        @Html.LabelFor(model => model.emailAddress, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.emailAddress, new { htmlAttributes = new { @class = "form-control", @id = "email-address-textbox" } })
            @Html.ValidationMessageFor(model => model.emailAddress, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.emailPassword, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.PasswordFor(model => model.emailPassword, new { @class = "form-control", @id = "email-password-textbox" })
            @Html.ValidationMessageFor(model => model.emailPassword, "", new { @class = "text-danger" })
        </div>
    </div>

//click on this link to verify the email
            @Html.ActionLink("Verify",null,null, htmlAttributes: new { @id = "email-verify" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            <div id="email-verification-status">
                //the result will be updated here
            </div>
        </div>
    </div>

我的jQuery AJAX:

$(document).ready(function () {
                    function verify()
                    {
                        $.ajax({
                            url: "/Ultility/verifyEmail",
                            type: "POST",

                            //get 2 values from the 2 text boxes
                            data: { emailAddress: $('#email-address-textbox').val(), emailPassword: $('#email-password-textbox').val() },
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                //don't know what to insert here
                            }
                        });
                    }

                    //call the AJAX function whenever the link is clicked
                    $('#email-verify').on('click', verify);
                });   

一切正常,我可以调用动作,但我不知道如何用返回的结果更新div标签。任何帮助都会受到欢迎!

1 个答案:

答案 0 :(得分:1)

你试过这个吗?

$(“#email-verification-status”)。text(data);