Question

我正在尝试为我的MVC应用创建一个简单的联系表单。到目前为止，一切正常，但我现在更进一步，尝试使用ajax回发表单数据。问题是我的[HttpPost]方法需要我的ContactViewModel但是如何将它从jQuery发送回方法？

这是我的前端代码：

@model  MSExport.Models.ContactViewModel
@{
    ViewBag.Title = "Contact";
}
@section HeaderScripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $.post("/Contact/Index", { ... }, function (data) {
                // Do whatever
            });
        });        
    </script>
}

<h1>Contact</h1>
@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
        <legend>Contact Us</legend> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Name) 
        </div> 
        <div class="editor-field"> 
            @Html.TextBoxFor(model => model.Name) 
            @Html.ValidationMessageFor(model => model.Name) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Email) 
        </div> 
        <div class="editor-field"> 
            @Html.TextBoxFor(model => model.Email) 
            @Html.ValidationMessageFor(model => model.Email) 
        </div> 
        <div class="editor-label"> 
            @Html.LabelFor(model => model.Message) 
        </div> 
        <div class="editor-field"> 
            @Html.TextBoxFor(model => model.Message) 
            @Html.ValidationMessageFor(model => model.Message) 
        </div> 
        <p> 
            <input type="submit" value="Submit" /> 
        </p> 
    </fieldset> 
}

这是我的后端代码：

public class ContactController : Controller
    {
        //
        // GET: /Contact/

        public ActionResult Index()
        {
            return View(new ContactViewModel());
        }

        [HttpPost]
        public ActionResult Index(ContactViewModel contactVM)
        {
            if (!ModelState.IsValid)
            {
                return View(contactVM);
            }

            var contact = new Contact
            {
                Name = contactVM.Name,
                Email = contactVM.Email,
                Message = contactVM.Message
            };

            // Do whatever with new contact class

            return RedirectToAction("Thankyou");
        }

        public ActionResult Thankyou()
        {
            return View();
        }
    }

public class ContactViewModel
    {
        [Required]
        public string Name { get; set; }

        [Required]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }

        [Required]
        public string Message { get; set; }     
    }

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

上面的'...'是我定义要发送回方法的数据的地方，但我不确定我放在这里的是什么？我是否在这里使用JSON重新创建自定义类？

Answer 1

从您的HttpPost Index操作返回Json，就像这样

return Json(new { name = contact.Name});

和jquery

<script type="text/javascript">
        $(document).ready(function () {
            $.post("/Contact/Index", { ... }, function (data) {
                alert(data.name);
            });
        });        
    </script>

Answer 2

您可以使用匹配的成员在Javascript中定义一个类（使用function语法），或者只是传递一个字典（例如{ Name: 'John', Email: 'john@example.com', ...}。模型绑定器应该（在大多数情况下）能够在POST到控制器方法时，将其映射到具体的视图模型。

如何使用jquery发布自定义类？

2 个答案: