MVC验证在弹出窗口中无法正常工作

Question

我正在尝试在MVC中使用内置验证，但它似乎没有起作用。如果我把表格中的字段留空，我会收回“成功保存”。消息。

不应将“必需”字段标记为表单中的必需字段吗？

控制器：

    public ActionResult Create([DataSourceRequest] DataSourceRequest request, ACore.Asset assetForm)
    {
        var results = new
        {
            value = false,
            Message = ""
        };

        if (ModelState.IsValid)
        {
            results = new
            {
                value = true,
                Message = "Successfully Saved."
            };

            return Json(results);
        }

        results = new
        {
            value = false,
            Message = "Please check the form values."
        };

        return Json(results);
    }

查看（简明）：

@using (Html.BeginForm("Create", "Asset", FormMethod.Post, new { id = "frmAsset"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="tempStyle">
        <div class="editor-label fl">
            @Html.LabelFor(model => model.AssetName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AssetName)
            @Html.ValidationMessageFor(model => model.AssetName)
        </div>
    </div>
    <div style="position: relative;">
        <input type="button" value="Save" id="btnSave" />
    </div>

处理我的保存的JavaScript：

    var saveAsset = function (e) {
        var form = $("#frmAsset");
        $.ajax({
            type: "POST",
            url: "/Asset/Create",
            data: $(form).serialize(),
            success: function (data) {
                if (data.value == true) {
                    alert(data.Message);

                    // Close popup window
                    var window = $('#AssetEditorPopUp').data("kendoWindow");
                    window.close();

                    // Refresh grid to show changes
                    $('#grid').data("kendoGrid").dataSource.read();

                    return;
                }

                alert(data.Message);

            },

            error: function () {
                alert("There was an error editing the asset.");
            }
        });
    };

型号：

public class Asset
{
    [ScaffoldColumn(false)]
    public int AssetId { get; set; }

    [Required]
    [Display(Name="Asset Name:")]
    public string AssetName { get; set; }

    public string AssetFormerName { get; set; }
    public string Seg1Code { get; set; }
    public string Seg3Code { get; set; }
    public bool? ActiveFlag { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string AssetType { get; set; }

    [Display(Name = "ZipCode:")]
    [RegularExpression("([a-zA-Z0-9 .&'-]+)", ErrorMessage = "Enter only alphabets and numbers of First Name")]
    public string ZipCode { get; set; }
}

这是我做POST而不是ajax。

Answer 1

您的按钮设置为按钮类型，应该提交。您没有触发表单提交处理程序，因此未执行验证。

像这样创建你的表单：

@using (Html.BeginForm("Create", "Asset", FormMethod.Post, new { id = "frmAsset"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

<div class="tempStyle">
    <div class="editor-label fl">
        @Html.LabelFor(model => model.AssetName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.AssetName)
        @Html.ValidationMessageFor(model => model.AssetName)
    </div>
</div>
<div style="position: relative;">
    <input type="submit" value="Save" id="btnSave" />
</div>

然后你可以使用以下javascript：

$(function(){
    $("#frmAsset").submit(function(evt){
        var form = $(evt.currentTarget);

        if(form.validate().isvalid()
        {
             // your handler here
        }
        evt.preventDefault();  // prevent the form from posting normally
        return false;
    };
};

我会看一下AJAX.BeginForm帮助器，它更适合你在这里做的事情。

NB。我没有在ide中输入这个，所以我不知道它是否100％有效，你需要测试它。