javascript - 如何将 Jquery/Ajax 与 asp.net MVC 4 结合使用，并使用部分 View 和模型操作

Question

我对 ASP.NET MVC 和 JQuery 都很陌生，所以要温柔一点。

我正在尝试使用 HTTP Post 来更新我的联系表单，该表单用于使用 AJAX 发送电子邮件。我看过很多帖子，但我想要的似乎很具体，而且我似乎找不到任何相关的内容。

底层:我有一个布局页面，其中包含标题、呈现正文和页脚。我的页脚包含我要提交的表单。我想提交此表单而不刷新整个页面。布局页面:

    <div id="footer">

        @{Html.RenderAction("Footer", "Basic");}

    </div>

<p id="p"></p>

我有一个用于发送电子邮件的表单模型。

namespace SimpleMemberShip.Models
{
    public class EmailModel
    {


        [Required, Display(Name = "Your name")]
        public string FromName { get; set; }
        [Required, Display(Name = "Your email"), EmailAddress]
        [StringLength(100, ErrorMessage = "The email address entered is not valid")]
        public string FromEmail { get; set; }
        [Required]
        public string Message { get; set; }

}

页脚:

 <h2> footer yo !</h2>

@Html.ValidationSummary()

<fieldset>
        <legend>Contact Me!</legend>

        <ol>
            <li>
                @Html.LabelFor(m => m.FromEmail)
                @Html.TextBoxFor(m => m.FromEmail)
            </li>
            <li>
                @Html.LabelFor(m => m.FromName)
                @Html.TextBoxFor(m => m.FromName)
            </li>
            <li>
                @Html.LabelFor(m => m.Message)
                @Html.TextBoxFor(m => m.Message)
            </li>
        </ol>

        <button id="submit"> Submit </button>

</fieldset>   

Controller :

      [ChildActionOnly]
    public ActionResult Footer()
    {

        return PartialView("~/Views/Shared/_Footer.cshtml");


    }

    [HttpPost]
    public ActionResult Footer(EmailModel model)
    {

         return PartialView("~/Views/Shared/_Footer.cshtml"); 
    }

我想使用模型验证，并且所有内容都与通过服务器正常发布表单相同或相似。

编辑:我的新代码，效果很好!但它只起作用一次，当再次单击该按钮时什么也没有发生。有谁知道为什么吗？

 <script type="text/javascript">


$("#submit").click(function () {

    $("#footer").html();
        var url = '@Url.Action("Footer", "Basic")';
        $.post(url, { FromName: $("[name=FromName]").val(), FromEmail: $("  [name=FromEmail]").val(), Message: $("[name=Message]").val() }, function (data)    {

             $("#footer").html(data);

        });

        var name = $("[name=FromName]").val();
        $("#p").text(name);

    });

</script>

新编辑:

做了一些研究并使用

$("#submit").live("click",function () {

而不是

 $("#submit").click(function () {

似乎成功了。

Answer 1

<script type="text/javascript">


$("#submit").live("click",function () {
    $('.validation-summary-errors').remove();
        var url = '@Url.Action("Footer", "Basic")';
        $.post(url, { FromName: $("[name=FromName]").val(), FromEmail: $("[name=FromEmail]").val(), Message: $("[name=Message]").val() }, function (data) {

            $("#footer").html(data);

        });


    });

</script>

结束了这个，但下次会尝试“serialize()”选项。 Controller 已更改为不带 [ChildActionOnly] 的 Controller ，现在工作完美

   [HttpPost]
    public ActionResult Footer(EmailModel model)
    {
            return PartialView("~/Views/Shared/_Footer.cshtml");
    }

感谢所有提供帮助的人!