Question

我遇到一个奇怪的问题，我实际上并不能指出主要原因，因为我没有任何错误消息或验证警告。在我的MVC Web应用程序中，我有一个Ajax表单，可以使用一些KendoUI小部件。我的所有脚本都按照正确的顺序进行，包括不引人注目的验证等。

KendoUI小部件代码如下所示：

@(Html.Kendo().DateTimePicker().Name("deliverydate"))

我遇到的问题是，当我尝试提交表单时，它不会让我，页面会回到日期选择器并专注于它。现在这个字段在模型中不是必需的，也没有我可以看到的任何验证，但表单的行为就像它一样。此外，如果您选择当前月份的日期，它将不允许表单提交，如果您在下个月中添加任何日期，它可以正常工作

作为消除过程，我将字段从KendoUI小部件更改为标准编辑器：

@Html.EditorFor(model => model.deliverydate)

MVC认识到这是一个日期时间字段，当应用程序运行时，它会将其更改为datepicker，但我仍然会得到相同的行为。

这可能是一个验证错误还是我没有做过什么？

这是我的代码

查看

@using (Ajax.BeginForm("Create", "Offer", new AjaxOptions
{
    OnSuccess = "Success",
    OnFailure = "Failure"
}, new { @class = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.requirement_idx);
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="ul-label">
        @Html.LabelFor(model => model.deliverydate)
    </div>
    <div class="ul-data">
        @(Html.Kendo().DateTimePicker()
            .Name("deliverydate")
        )
    </div>
}

控制器

//
// POST : Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(OfferViewModel vm)
{
    if (ModelState.IsValid)
    {
        var theoffer = Mapper.Map<offers>(vm);
        db.offers.Add(theoffer);
        db.SaveChanges();
        return RedirectToAction("Details");                
    }
    return View(vm);
}

视图模型

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Text;
using System.Threading.Tasks;
using Spoton_Areas_Test.Models;

namespace Spoton_Areas_Test.ViewModels
{
    public class OfferViewModel
    {
        [Display(Name = "Delivery Date")]
        public Nullable<System.DateTime> deliverydate { get; set; }
    }
}

此问题似乎涵盖了我测试的所有浏览器，IE，Chrome和FireFox。非常奇怪的行为，我想深究它。

Answer 1

好的，所以这个问题是由Jquery Valdiation期望来自该字段的日期格式引起的，这确实导致验证错误，这就是为什么它专注于该字段。为了解决这个问题并允许我以英国格式提交日期，我使用addMethod进行了以下操作。

    $(function () {
        $.validator.addMethod("deliverydate", function(value, element) {
            var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/;
            return value.match(dateReg);
        },
        "Invalid date"
    );
    $('#form').validate({
        submitHandler: function(form) {
            form.submit();
        }
    });
});

Answer 2

因此，似乎有一种更简单的方法可以通过强制输入控件具有某种数据类型然后在顶部应用KO选择器来解决此问题。最初我使用了标准MVC TextBoxFor，但是通过强制输入为特定数据类型，应用了正确的验证。请参阅下文。

HTML（注意注释掉TextBoxFor）

<div class="form-col">
    @*@Html.TextBoxFor(m => m.CreateDate)*@
    <input type="text" data-type="datetime" id="CreateDate"/>
</div>

应用Kendo DateTimePicker脚本：

$(document).ready(function() {
    $("#CreateDate")
        .kendoDateTimePicker({
            value: new Date(),
            min: new Date(1950, 0, 1),
            max: new Date()
        });
});

为什么我的日期选择器会在我的MVC应用程序中停止我的表单提交？

2 个答案: