验证在mvc 4中的部分视图中不起作用

Question

我正在使用mvc 4，其中我有一个webgrid和一个名为create的按钮，当我点击按钮时，一个div弹出来加载创建视图的东西，所以当我没有插入任何点击按钮时它没有验证控件。为了保存新记录我正在使用json结果函数。 下面是我的index.html代码

@model List<MVCGridView.Product>
    @{
        ViewBag.Title = "Product List";
        Layout = "~/Views/Shared/_Layout.cshtml";

        <style type="text/css">
            .grid {
                width: 100%;
            }
        </style>
    }
    <h2>Product List</h2>
    <div style="padding:7px 0;">
        <input type="button" value="Add New Product" class="btn" onclick="OpenCreatePopup()" />
    </div>
    <div style="width:100%;">
        @{
            WebGrid grid = new WebGrid(Model, rowsPerPage:10);
            @grid.GetHtml(
         tableStyle: "webgrid-table",
         fillEmptyRows: false,
         headerStyle: "webgrid-header",
         alternatingRowStyle: "webgrid-alternating-row",
         rowStyle: "webgrid-row-style",
         footerStyle: "webgrid-footer",
         mode: WebGridPagerModes.All,
         firstText: "<< First",
         previousText: "< Prev",
         nextText: "Next >",
         lastText: "Last >>",
         columns: new[] {
         grid.Column("ProductId",header: "ID"),
         grid.Column("ProductName",header: "Product"),
         grid.Column("Price"),
         grid.Column("Qunatity"),
         grid.Column("ReorderLevel", header: "R.O.L."),
         grid.Column("ContactusId", header: "Action", canSort:false,

         format: @<text>
            @Html.Raw("<img src='/images/edit-icon.png' alt='Edit' title='Edit' onclick='EditProduct(" + item.ProductId + ")'  />")
            @Html.Raw("<img src='/images/delete-icon.png' alt='Delete' title='Delete' onclick='DeleteProduct(" + item.ProductId + ")'  />")
        </text>
        )
     })
        }
    </div>
    <div id="DivToAppendPartialVoew"></div>
      <script type="text/javascript">
       function OpenCreatePopup() {
            var div = $("#DivToAppendPartialVoew");
            div.load("/Products/Create", function () {
                div.dialog({
                    modal: true,
                    width: 500,
                    height: 430,
                    title: "Add New Product",
                    resizable: false
                });
            });
        }

    </script>

以下是create.cshtml代码：

@model MVCGridView.Models.ProductModels

<script src="@Url.Content("~/Scripts/jquery-1.4.4.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>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Product</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductName)
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Qunatity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Qunatity)
            @Html.ValidationMessageFor(model => model.Qunatity)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ReorderLevel)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReorderLevel)
            @Html.ValidationMessageFor(model => model.ReorderLevel)
        </div>

        <p>
            <!-- change type to button and add  -->
            <input type="button" value="Create" onclick="SaveProduct()" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Close","Index")
</div>

<script type="text/javascript">
    function SaveProduct() {
      
        var pname = $("#ProductName").val();
        var pprice = $("#Price").val();
        var pqty = $("#Qunatity").val();
        var prol = $("#ReorderLevel").val();

        var product = { "ProductName": pname, "Price": pprice, "Qunatity": pqty, "ReorderLevel": prol };
        
        $.post('/products/create', product,
        function (data) { if (data == 0) { location = location.href; } }, 'json');
           
    }
</script>

以下是我的产品控制器代码

 public ActionResult Index()
        {
            NWDataContext db = new NWDataContext();
            List<Product> products = db.Products.OrderBy(x=>x.ProductId).ToList<Product>();
            return View(products);
        }

 [HttpPost]
        public JsonResult Create(MVCGridView.Product product)
        {
            
                NWDataContext db = new NWDataContext();
                db.Products.InsertOnSubmit(product);
                db.SubmitChanges();
                return Json(product, JsonRequestBehavior.AllowGet);
        }

第一个功能是绑定webgrid，第二个是创建新记录 以下是我的型号名称ProductsModel

 public class ProductModels
    {        
        public int ProductId;

        [Required(ErrorMessage = "Please provide product name!")]
        [StringLength(100, ErrorMessage = "Product name cannot be more than 100 characters long!")]
        [Display(Name = "Product Name")]
        public string ProductName;

        [Required(ErrorMessage = "Please provide product price!")]
        [Range(1, 10000, ErrorMessage = "Product price must be greater than 0!")]
        public Decimal Price;

        [Required(ErrorMessage = "Please provide product quantity!")]
        [Range(1, 1000, ErrorMessage = "Product quantity must be greater than 0!")]
        public Int32 Qunatity;

        [Required(ErrorMessage = "Please provide reorder level!")]
        [Range(1, 100, ErrorMessage = "Product reorder level must be between 1 to 100!")]
        [Display(Name = "Reorder Level")]
        public Int32 ReorderLevel;
    }

所以，当我点击创建按钮时，创建模态会弹出窗口，当我直接点击创建按钮验证不起作用时，我搜索了许多东西，但无法解决此问题。 请注意：我这里没有任何可以用于验证的表格。