Question

问题背景：

我的MVC应用中有一个页面，允许用户提交问题，如下所示：

enter image description here

按下发送按钮后，会显示带有微调器的模态弹出窗口以显示正在发送的消息，然后一旦成功发送，则将更改模态内容以反映此消息。

潜在的设计问题：

目前我正在使用AJAX将文本框值发布到名为Contact的控制器，该控制器有一个名为SendMail的方法

AJAX POST功能：

<script>
$("#SendMessage").click(function (e) {

    $("#SendingModal").modal('show');

    $.ajax({
        url: '@Url.Action("SendMail")',
        type: 'POST',
        data: {
            "name": $('#name').val(),
            "email": $('#email').val(),
            "subject": $('#subject').val(),
            "message": $('#message').val()
        },
        success: function () {
            $('#contactForm').html('<div class="row">' +
                '<div class="col-lg-12 col-md-12 col-sm-12">' +
                '<div class="jumbotron jumbotronPadding">' +
                '<h2>Message sent</h2>' +
                '<p><h3>Thank your for your enquiry, we will reply as soon as possible.</h3></p>' +
                '</div>' +
                '</div>' +
                '</div>');

            $('#SendingModal').modal('hide');
        }
    });
});

通过AJAX POST请求获取从Contact页面发送的参数的SendMail方法：

     public void SendMail(string name, string email, string subject, string message)
    {
        var mailMessage = new EmailContactHandler();

        mailMessage.SendMail(name, email, subject, message);
    }

我应该使用Html Form代替当前的AJAX调用吗？目前，我将每个单独的文本框值发布到SendMail方法的相关参数值，即名称，电子邮件，主题，消息。表单允许我通过ViewModel发送这些表单。我目前的实施是否正常？如果不是更好的方法（理想情况下使用某种模型）

更新

在阅读了Mackans的回答之后，我重构了代码以映射到一个名为Contact的模型，该模型在AJAX请求中设置数据属性。

AJAX请求：

<script>
$("#SendMessage").click(function (e) {

    $("#dialog-example").modal('show');

    $.ajax({
        url: '@Url.Action("SendMail")',
        type: 'POST',
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            subject: $('#subject').val(),
            message: $('#message').val()
        },
        success: function (message) {
            if (message.messageStatus === "success") {
                $('#contactForm').html('<div class="row">' +
                    '<div class="col-lg-12 col-md-12 col-sm-12">' +
                    '<div class="jumbotron jumbotronPadding">' +
                    '<h2>Message sent</h2>' +
                    '<p><h3>Thank your for your enquiry, we will reply as soon as possible.</h3></p>' +
                    '</div>' +
                    '</div>' +
                    '</div>');
            }

            $('#dialog-example').modal('hide');
        }
    });
});

联系模式：

public class Contact
{
    public string Name { set; get; }
    public string Email { set; get; }
    public string Subject { set; get; }
    public string Message { set; get; }
}

控制器上的SendMail方法现在采用名为Contact的模型实例。

 public ActionResult SendMail(Contact emailMessage)
        {
            var mailMessage = new EmailContactHandler();

            mailMessage.SendMail(emailMessage);

            return Json(new { messageStatus = "success"});
        }

Answer 1

您的设计有效，但正如您所说，您错过了 MVC 中的 M 。幸运的是，您无需在Ajax和模型之间进行选择。

唯一的问题是有很多选项可供选择，在所有选项上编写详细的演练都不适合这种格式。简单地说：

您可以将模型和Html.BeginForm()或类似内容添加到当前解决方案中，并在当前代码中处理它。该模型通常在控制器中没有问题绑定..

 e.preventDefault(); //to prevent normal submit
 $.ajax({
    url: '@Url.Action("SendMail")',
    type: 'POST',
    data: $('#myform').serialize(),
    ...

控制器：

[HttpPost]
public void SendMail(MyModel model)

您也可以使用Microsofts Ajax扩展：

@using (Ajax.BeginForm("MyAction", "MyController", new AjaxOptions
   {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "myTargetElementId"
   }))

有很多good options available。但是只使用jQuery无法做到这一点。这只是一个偏好问题，它们可以混合搭配。

有关这些方法及其他方法的详细信息，请搜索SO或Google。周围有很多很好的指南。

另外，既然你在询问潜在的问题。我会从SendMail方法返回某种形式的成功或失败。 Ajax的成功只能告诉你方法是否被成功调用，而不是结果是什么。

MVC AJAX POST设计受到关注

1 个答案: