ASP.Net MVC，使用JQuery.Ajax提交表单。

Question

我希望您能够使用JQuery Ajax提交表单(Html.BeginForm())。根据这个问题，它应该可以工作！我不明白为什么来自SendEmail()操作的参数'email'没有从js中获取值。你能帮我吗？

我的视图：

<% using (Html.BeginForm("SendEmail", null, FormMethod.Post, new { @class = "form", @id = "formSendMail" }))
{ %>
<fieldset>
    <ul>
        <li>
            <label for="MailFrom">
                De...</label>
            <%= Html.TextBox("MailFrom", Session["email"].ToString(), new { @id = "MailFrom", @Name = "MailFrom", @readonly = "readonly" })%>
        </li>
        <li>
            <label for="MailTo">
                A...</label>
            <%= Html.TextBoxFor(m => Model.Agent.Email, new { @id = "MailTo", @Name = "MailTo" })%>
        </li>
        <li>
            <label for="MailSubject">
                Objet :</label>
            <%= Html.TextBoxFor(m => Model.MailSubject, new { @id = "MailSubject", @Name = "MailSubject" })%>
        </li>
        <li>
            <label>&nbsp;</label>
            <%= Html.TextArea("MailBody", Model.MailBody, 5, 10, null)%>
        </li>
    </ul>
</fieldset>
<% } %>

我的控制器:

[HttpPost]
public ActionResult SendEmail(Email email)
{
    if (email != null)
    {
        if (!string.IsNullOrEmpty(email.MailBody) & !string.IsNullOrEmpty(email.Subject) & !string.IsNullOrEmpty(email.To))
        {
            using (IEmailDal emailDal = new EmailDal())
            {
                emailDal.SendEmail(email);
            }

            return Json("Email envoyé", JsonRequestBehavior.AllowGet);
        }
        else
            return Json("Error");
    }
    else
        return Json("Error");
}

我的邮件类:

public class Email
{
    public string From { get; set; }
    public string To { get; set; }
    public string Subject { get; set; }
    public string MailBody { get; set; }
}

为了提交我的表单，我通过jquery.dialog中的按钮模拟提交操作：

$("#mail-form").dialog({
    buttons: {
        "Envoyer le mail": function () {
            $("#formSendMail").submit();
        }
    }
});

我的JavaScript代码如下：

$('#formSendMail').submit(function (e) {
    var myEmail = {
        From: $('#MailFrom').val(),
        To: $('#MailTo').val(),
        Subject: $('#MailSubject').val(),
        MailBody: $('#MailBody').val()
    };

    $.ajax({
        type: "POST",
        url: '<%= Url.Action("SendEmail", "Messages") %>',
        data: JSON.stringify(myEmail),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            alert("Mail envoyé.");
        },
        error: function (result) {
            alert("Echec lors de l'envoi du mail.");
        }
    });

    return false;
});

谢谢！

- Flesym

---

您的表单没有提交按钮。 - Luke

顺便提一下 - 那个答案并不完全正确 - 如果您删除 contentType: "application/json; charset=utf-8",，则无需将数据字符串化。 - user3559349

好的，在Chrome中使用开发者工具（F12）时，会提交哪些信息？ - Luke

@Stephen：它可以工作了！！非常感谢！！我删除了contentType和stringify，现在没问题了！！但我不明白为什么！！ - Flesym

@Flesym，请将您的代码放在问题中，而不是在评论中。 - user3559349

Answer 1

这里是答案（感谢Stephen Muecke）：

我只需要移除 contentType: "application/json; charset=utf-8",，然后不需要将数据转换为字符串：

$.ajax({
    type: "POST",
    url: '<%= Url.Action("SendEmail", "Messages") %>',
    data: myEmail,
    dataType: "json",
    success: function (result) {
        alert("Mail envoyé.");
    },
    error: function (result) {
        alert("Echec lors de l'envoi du mail.");
    }
});

现在，为什么一开始它没能工作，我不知道！

- Flesym

Answer 2

如果操作方法运行正确，则您的问题是URL路径错误。这是正确的URL。

 url: '@Url.Action("SendEmail", "SampleController")',

第一个参数名为SendEmail是你的操作方法，第二个参数名为SampleControl包含SendEmail方法。

- Yasemin çidem

Answer 3

如果这是弹出窗口按钮，为什么要处理提交事件呢？直接通过Ajax进行发布，如果您正在使用JSON.Stringify，则在操作级别上像这样处理：

[HttpPost]
public ActionResult SendEmail(string email)
{
    Email formData = new JavaScriptSerializer().Deserialize<Email>(email);
    //Now you have the object handle it how you want
}

- Varun Vasishtha

Answer 4

请将电子邮件类属性的名称更改为与您的文本框字段名称相同，然后您就可以在控制器中获取这些值。

public class Email
{
    public string MailFrom { get; set; }
    public string MailTo { get; set; }
    public string MailSubject { get; set; }
    public string MailBody { get; set; }
}

- Parveen Kumar