验证Bootstrap模态页面Asp.net MVC

时间:2016-07-08 11:00:50

标签: asp.net-mvc forms twitter-bootstrap jquery-validate unobtrusive-validation

我有一个表单,它位于bootstrap模态页面

 @using (Html.BeginForm("Create", "Request"))
 {
   @Html.AntiForgeryToken()
   <div class="form-group">

      <div class="col-md-10">

        @Html.EditorFor(model => model.Request.FirstName, new { htmlAttributes = new { @class = "form-control" } })

        @Html.ValidationMessageFor(model => model.Request.FirstName, "", new { @class = "text-danger" , placeholder = "FirstName" }) 

      </div>

   </div>
   //Omit other form groups for summary
 }

当我以正确的方式放置所有内容时,它正常工作但是如果我没有写出我的名字那么它会给我错误回复。

我有一些问题: 1是否可以在发布之前验证输入?,似乎jquery验证不起作用?

2是否可以回到发布之前打开的特定模式

3为什么它没有显示我的错误?

这是我的模特:

public class Request
{
    //pkey
    public virtual int Id { get; set; }
    //Fkey
    public virtual int TourId { get; set; }

    [Required]
    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string FirstName { get; set; }


    [Required]
    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string LastName { get; set; }

    [Required]
    [EmailAddress(ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "Email")]
    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string Email { get; set; }

    [Required]
    public virtual string Phone { get; set; }

    [MaxLength(100000000, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string Comment { get; set; }


    public virtual bool FrequentTraveler { get; set; }

    [Required]
    [Range(1, 500000)]
    public virtual int TravelersCount { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
    public virtual string Date { get; set; }

    public virtual bool ContactTimePreference { get; set; }

    [MaxLength(150, ErrorMessageResourceType = typeof(ErrorResource), ErrorMessageResourceName = "CheckLenght")]
    public virtual string Country { get; set; }


    public virtual bool Archived { get; set; }
}

我想显示ErrorResource.resx中的错误文本。

这是我的创建方法

   [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,TourId,FirstName,LastName,Email,Phone,Comment,FrequentTraveler,TravelersCount,Date,ContactTimePreference,Country,Archived")] Request request)
    {
        if (ModelState.IsValid)
        {
            db.Requests.Add(request);
            db.SaveChanges();

            TempData["ResultMessage"] = "Form  Posted successfully.";
            return RedirectToAction("Index", "Tour", new { country = TempData["Country"] });
        }
        TempData["ResultMessage"] = "Try Again!";
        return RedirectToAction("Index", "Tour", new { country = TempData["Country"] });
    }

如果需要,这是我的头标记:

<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
  <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
 <body>
      <script src="~/Scripts/jquery-1.10.2.min.js"></script>
      <script src="~/Scripts/bootstrap.min.js"></script>
      <script src="~/scripts/myjs.js"></script>
 </body>
</html>

如果有人可以告诉我应该改变什么,我感激不尽。感谢

1 个答案:

答案 0 :(得分:3)

您需要同时添加(<script src="~/Scripts/jquery-1.10.2.min.js"></script>之后)

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

以获得客户端验证。

附注:最好使用bundles来管理视图和布局中的脚本和css文件。