我如何做客户验证与ASP形成.asp.net MVC 5

我是ASP新手。asp.net MVC 5。我喜欢学习在视图和视图模型之间构建双向绑定的正确方法。并充分利用客户端验证脚本。

这是我所做的。

1. 正在加载jQuery库v 1.10.1
2. 正在加载jquery验证
3. 我加载了jquery . unobtrusiious . validation

我创建了一个像这样的ViewModel

public class RequestFormViewModel
{
    [Required]
    [Display(Name = "Day Of")]
    public DateTime LocalFrom { get; set; }
    [Required]
    [Display(Name = "Does not matter since this will be hidden and I use javascript to populate the value here when before the for is submitted")]
    public DateTime From { get; set; }
    public RequestFormViewModel()
    {
    }
    public RequestFormViewModel(DateTime localFrom, DateTime from)
    {
        this.LocalFrom = localFrom;
        this.From = from;
    }
}

这就是我创建视图的方法。请注意，我将演示器或业务层(即DefaultViewPresenter)传递给我的视图，而不是ViewModel。类DefaultViewPresenter有一个命名为Request的属性。(下面我将展示演示器的样子)

@model Proj.Presenters.DefaultViewPresenter
@using (Html.BeginForm("Index", "Track", FormMethod.Post, new { @class="form-inline", Id = "TrackActionForm" }))
{ 
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.Request.LocalFrom, new { Id = "TrackFrom", Name = "From" })                   
    <div class="input-group">
        @Html.TextBoxFor(m => m.Request.LocalFrom, new { Value = Model.Request.LocalFrom.ToString("MM/dd/yyyy"), @class = "form-control small", Id = "TrackLocalFrom", Name = "LocalFrom" })
        @Html.ValidationMessage("LocalFrom")
        <span class="input-group-btn">
            <button class="btn btn-info" type="button" id="TrackSubmit">View</button>
        </span>
    </div>
}

这是我的演示器的样子

public class DefaultViewPresenter
{
    public RequestFormViewModel Request { get; set; }
    .... // some other propertied that I need for the view that are not related to my form
    ....
    ....
}

当我提交表单时，表单没有被提交!我没有得到任何错误。它就像提交按钮在点击事件上具有return;功能。

我如何让脚本验证正确，当表单是有效的处理post请求?

我在这里错过了什么?我怎样才能纠正这个问题?

运行我的应用程序后这是razor生成的HTML标记

<form novalidate="novalidate" id="TrackActionForm" action="/Track" class="form-inline" method="post">
    <input name="__RequestVerificationToken" value="thmJX-Mlj5WjM3e7WMbgtb8KiEf4vuUKGzon4zO18fHDDY3cWpm2M1Lks8HbZDxX2qz7UxpRsoYvz2njNwYS_D8zclTvu9pdsJlSO0ckNLQ1" type="hidden">
    <input id="TrackFrom" name="From" data-val="true" data-val-date="The field Day Of must be a date." data-val-required="The Day Of field is required." value="9/14/2016 12:00:00 AM" type="hidden">                    
    <div class="input-group">
        <input id="TrackLocalFrom" name="LocalFrom" value="09/14/2016" class="form-control small" type="text">
        <span class="field-validation-valid" data-valmsg-for="LocalFrom" data-valmsg-replace="true"></span>
        <span class="input-group-btn">
            <button class="btn btn-info" type="button" id="TrackSubmit">View</button>
        </span>
    </div>
</form>

@model Proj.Presenters.DefaultViewPresenter
@using (Html.BeginForm("Index", "Track", FormMethod.Post, new { @class="form-inline", Id = "TrackActionForm" }))
{ 
    @Html.AntiForgeryToken() 
    <div class="input-group">          
        @Html.TextBoxFor(m => m.Request.LocalFrom, "{0:MM/dd/yyyy}", new { @class = "form-control small" })
        @Html.ValidationMessageFor(m => m.Request.LocalFrom)
        <span class="input-group-btn">
            <button class="btn btn-info" type="submit" id="TrackSubmit">View</button> // change to a submit button
        </span>
    </div>
}

[Required(ErrorMessage = "Please enter ...")]
[Display(Name = "Day Of")]
public DateTime? LocalFrom { get; set; }

$(document).ready(function(){ 
 $.validator.setDefaults({ ignore: [] });
});