Question

我写了一个简单的jquery dialog来保存两个字段到db。但是，为了控制器的简单性，它实际上不会保存到db，而是创建一个模拟对象并将其作为json返回给客户端。

表单代码是

<input type="button" name="name" value="New Entry Dialog" id="newDialog"/>
    <div id="frm2" style="display:none">
    <table>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.LabelFor(x => x.emp.FirstName, new { @class = "form-control"})</td>
            <td>@Html.TextBoxFor(x => x.emp.FirstName, new { @class = "form-control", id="firstName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.FirstName)</td>
        </tr>
         <tr>
            <td>@Html.LabelFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.LastName, new { @class = "form-control", id="lastName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.LastName)</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
                <input type="button" value="Save" class="btn btn-success" id="saveDialog"/>
                <input type="reset" value="close" class="btn btn-success" id="closeDialog"/>
            </td>
        </tr>
    </tbody>
</table>
        </div>

JQUERY用于dialog，输入验证并发送到db：

@section Scripts {
    <script>


        $(document).ready(function () {


            //POST 2
            var form = $('#frm');

            //the dialog and validations (reparsing the validaotor)
            $('#frm2').dialog({
                title: 'new entry',
                modal: true,
                width: 600,
                heigth: 400,
                draggable: false,
                resizable: false,
                closeOnEscape: true,
                autoOpen: false,
                show: { effect: "scale", duration: 200 },
                open: function (event, ui) {
                    $(this).load(function (html) {
                        var form = $('#frm2');
                        form.data('validator', null);
                        $.validator.unobtrusive.parse(form);

                        //$('#form1', html).submit(function () {
                        //    $.ajax({
                        //        url: this.action,
                        //        type: this.method,
                        //        data: $(this).serialize(),
                        //        success: function (res) {
                        //            if (res.success) {
                        //                $('#frmDetails').dialog('close');
                        //            }
                        //        }
                        //    });
                        //    return false;
                        //});
                    });
                }

            });

            $('#newDialog').click(function () {
                $('#frm2').dialog('open');
            });

            //save to db
            $('#saveDialog').click(function (evt) {

                var x = {'FirstName': $('#firstName').val(), 'lastName':$('#lastName').val()};
                $.ajax({
                    url: '@Url.Action("Save", "Employee")',
                    method: 'post',
                    data: JSON.stringify({ 'em': x }),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        alert('record saved');
                    },
                    error: function () { alert('error');}
                });
            });

这是我的模特

public class EmployeeModel
{
    public int EmpID { get; set; }

    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }
}

这是保存的控制器和操作

[HttpPost]
public ActionResult Save(EmployeeModel em)
{
    try
    {
        if (ModelState.IsValid)
        {
            // TODO: Add insert logic here
            EmployeeModel e = new EmployeeModel { FirstName = em.FirstName, LastName = em.LastName };
            return Json(e, JsonRequestBehavior.AllowGet);    
        }

        return View();

    }
    catch
    {
        return View();
    }
}

保存到数据库工作和服务器端验证也成功但客户端验证不会在对话框上显示错误。我如何更正我的代码？

here is the video

Answer 1

为了使客户端验证起作用，您需要在<form>元素中包含输入。改变你的

<div id="frm2" style="display:none">

到

<form id="frm2" style="display:none">

为什么验证消息不会出现在Jquery Dialog上？

1 个答案: