Question

我想要一个asp.net mvc表单发布到控制器并显示错误或成功的消息，所有这些都使用jquery。我希望这个jquery帖子只有在表单验证成功时才会发生。在发送到服务器的帖子之前，验证应该是客户端。问题是，即使表单验证失败，也会发生帖子。它看起来似乎整个表单都回发了，但我无法确定。我在mvc框架中使用Data annotations进行验证。这是代码

查看

@model jQueryPosts.Models.ModelVM
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<div>
    @using ( Html.BeginForm("jQueryPost", "Home",null, FormMethod.Post, new { id="FormPost" }))
    { 
   @Html.TextBoxFor(x => x.Name)  @Html.ValidationMessageFor(x => x.Name) 
        <br />
    @Html.TextBoxFor(x => x.LastName) @Html.ValidationMessageFor(x => x.LastName) 
        <br />
    @Html.TextBoxFor(x => x.Age)  @Html.ValidationMessageFor(x => x.Age) 
        <br />

    <input type=submit value="submit" />
    }
</div>

<script>

    $(document).ready(function () {

        $('#FormPost').submit(function (e) {
            e.preventDefault(); //This line will prevent the form from submitting
            alert('ajax post here');

            $.ajax({
                type: 'POST',
                url: $('#FormPost').attr('action'),
                data: $('#FormPost').serialize(),
                accept: 'application/json',
                error: function (xhr, status, error) {

                    alert('error: ' + xhr.responseText + '-' + error);

                },
                success: function (response) {
                    alert('resp: ' + response);
                }
            });
        });


    });

 </script>

控制器

   [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult jQueryPost(ModelVM vm)
    {
        ModelVM _vm = vm;

        try
        {
            //some code here
        }
        catch
        {
            Response.StatusCode = 406; // Or any other proper status code.
            Response.Write("Custom error message");
            return null;
        }

        return Json("name posted was: " + _vm.Name);
    }

MODEL

using System.ComponentModel.DataAnnotations;

namespace JQ.Example
{
    public class ModelVM
    {
        [Required(ErrorMessage="Please enter first name") ]
        public string Name { get; set; }
           [Required]
        public string LastName { get; set; }
           [Required]
        public int Age { get; set; }
    }
}

Answer 1

它发生了，因为当你按下输入类型的提交表单时，无论如何都会提交表单，只是尝试将return false添加到你的jquery函数中

$('#FormPost').submit(function (e) {            
        var validated = $("#FormPost").valid();
        if(validated)
        {
         $.ajax({
            type: 'POST',
            url: $('#FormPost').attr('action'),
            data: $('#FormPost').serialize(),
            accept: 'application/json',
            error: function (xhr, status, error) {

                alert('error: ' + xhr.responseText + '-' + error);

            },
            success: function (response) {
                alert('resp: ' + response);
            }
         });
        }

        return false;
    });

将此行代码添加到控制器

if (ModelState.IsValid)
{
  ...
}
else
{
   ModelState.AddModelError("key", "messege");
}

尽管asp.net mvc 4验证失败，jquery的帖子仍然经历过

1 个答案: