Question

我想用ajax语言进行表单验证。只是一个简单的，所以我可以开始扩展它。我有一个模型，控制器和一个视图，但我不知道如何从这里开始。

            <form id="myForm">

            @Html.TextBoxFor(model =>model.News, new { @class = "form-control", @placeholder = "Email" })

            <input type="button" value="SignUp" class="btn-block btn-primary" id="btnSubmit"/>

        </form>

<script> 
    $(document).ready(function () {

        $("#btnSubmit").click(function () {
             debugger
            var data = $("#myForm").serialize(); 

            $.ajax({

                type: "POST",
                url: "/News/Index",
                data: data,
                success: function (response) {

                    alert("Data saved to the database");

                }

            })
        })
    })
</script>

型号：

public class News
{
    public int NewsId{ get; set; }
    public string Email { get; set; }
}

控制器：

        [HttpPost]
    public ActionResult Index(News model)
    {
        try
        {
            News newsletter= new News();
            newsletter.Email = model.Email;

            _context.News.Add(newsletter);
            _context.SaveChanges();
        }
        catch (Exception e)
        {
            throw e;
        }

        return View(model);
    }

Answer 1

我建议你改用BeginForm

@using (Html.BeginForm("Index", "News", , FormMethod.Post))
{
   @Html.TextBoxFor(model =>model.News, new { @class = "form-control", @placeholder = "Email" })

   <input type="button" value="SignUp" class="btn-block btn-primary" id="btnSubmit"/>
}

这样您就不需要使用AJAX了，您可以将表单像简单的HTML表单一样发布到控制器上。试试吧。然后，您就可以使用服务器验证。

否则，您可以尝试实现类似jQuery.validate.js的内容来提供客户端验证。

Answer 2

您可以使用DataAnnotation验证模型属性

使用 - ＆GT;使用DataAnnotationsValidations.Models;

public class News
{
    public int NewsId{ get; set; }
[Required]
    public string Email { get; set; }
}

Answer 3

public class News
{
     public int NewsId{ get; set; }
    [Required(ErrorMessage = "Field can't be empty")]
    [DataType(DataType.EmailAddress, ErrorMessage = "E-mail is not valid")]
    public string Email{ get; set; }

}

  @Html.TextBoxFor(model =>model.Email, new { @class = "form-control", 
        @placeholder = "Email" })

        <input type="button" value="SignUp" class="btn-block btn-primary" id="btnSubmit"/>

使用AJAX进行Asp.net MVC简单表单验证

3 个答案: