jquery - 如何在 mvc 中添加验证 - jquery ajax json

Question

下面的代码有效，使用模式窗口我可以添加编辑和删除记录，而无需刷新页面。

我试图添加验证，但它不起作用。如何向以下代码添加验证？我正在寻求有关验证的帮助。

//View Model
public class PositionsViewModel
    {
        public IEnumerable<Positions> ListPositions { get; set; }
        public int IdPositions { get; set; }  
        [MaxLength(50, ErrorMessage = "Name max 50 znaków")]
        [Display(Name = "Positions")]
        [Required(ErrorMessage = "Required position")]
        public string NamePosition { get; set; }
        [Display(Name = "Active")]
        [Required(ErrorMessage = "Zaznacz pole")]
        public bool "Active")]{ get; set; }
    }

我使用 Json 发送数据

 public ActionResult ListPosition()
        {
            var listPosition= db.Position.ToList();
            var viewModel = new PositionViewModel()
            {
                ListPosition = listPosition= 
            };
            return View(viewModel);
        }

 public JsonResult EditPosition( int? idRecord)
            {
                Position position = db.Position.Find(idRecord);
                string value = string.Empty;
                value = JsonConvert.SerializeObject(position, Formatting.Indented, new JsonSerializerSettings
                {
                    ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                });
                return Json(value, JsonRequestBehavior.AllowGet);
            }


        [HttpPost]
        public JsonResult SaveAndEditPosition(PositionViewModel vieModel)
        {
            var result = false;
            if (ModelState.IsValid)
            {
                //New Position
                Position position = new vieModel.Position();
                position.IdPosition = vieModel.IdPosition;
                position.NamePosition,  = vieModel.NamePosition, ;
                position.Active = Active;

                if (position .IdPosition == 0)
                {
                    db.Position.Add((position );
                    result = true;
                }
                else
                {
                    //Edit position
                    db.Entry(position).State = EntityState.Modified;
                    result = true;
                }
                db.SaveChanges();
            }


                result = false;

            return Json(result, JsonRequestBehavior.AllowGet);
        }

//View
@model AplikacjaHelpDesk.ViewModels.PositionViewModel
 <div class="col-sm-5">
        <table align="left" class=" table panel panel-primary panel-title table-responsive">
            <tr class="panel panel-primary" text-transform uppercase; text-combine-upright:all; opacity 0.6;">
                <th>
                    @Html.DisplayNameFor(model => model.NamePosition)
                </th>
                <th style="width: 100px;">
                    @Html.DisplayNameFor(model => model.Active)
                </th>
                <th></th>
            </tr>

            @foreach (var item in Model.ListPositions )
            {
                <tr>

                    @Html.HiddenFor(modelItem => item.IdPosition, new { @id = "PositionId" })

                    <td>
                        @Html.DisplayFor(model => item.NamePosition)
                    </td>
                    <td>
                        @Html.DisplayFor(model => item.Active)
                    </td>
                    <td style="width: 220px;">
                        <span class="btn btn-primary glyphicon glyphicon-pencil ">
                            <a href=" #" onclick='EditRecordPosition(id = "@item.Position")' style="color:white">Edit</a>
                        </span>
                    </td>
                </tr>

            }
        </table>
    </div>

 <div class="modal fade" id="MyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h4 id="ModalTitle"></h4>
                </div>
                <div class="modal-body">
                    <form id="form">                                                
                            <fieldset id = "SubmitForm">   

                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.HiddenFor(m => m.IdPosition, new { @id = "PositionId" })
                                <div class="form-group">
                                    @Html.DisplayNameFor(model => model.NamePosition)<br /> 
                                    @Html.TextBoxFor(m => m.NazwaStanowiska, new { @id = "NamePosition", @class = "form-control", @placeholder = "Name Position" })
                                    @Html.ValidationMessageFor(m => m.NamePosition, "")
                                </div>
                                <div class="form-group">
                                    @Html.DisplayNameFor(model => model.Active)<br />
                                    @Html.CheckBoxFor(m => m.CzyAktywny, new { @id = "PositionActive" })
                                    @Html.ValidationMessageFor(m => m.Active, "")
                                </div>
                                <div class="col-md-2">
                                    <a href="#" class="btn btn-block btn-danger" onclick="SaveRecordToDataBase()">Save  </a>
                                </div>
                            </fieldset>                        
                    </form>
                </div>
            </div>
        </div>
    </div>

<script>


function AddNewPosition(IdPosition) {
        $("#form")[0].reset();
        $("#PositionId").val(0);
        $("#ModalTitle").html("Add new position");
        $("#MyModal").modal();

    }

 var SaveRecordToDataBase = function () {
        var data = $("#SubmitForm").serialize();

        if (!$("#SubmitForm").valid())
        {
            return false;
        }
        $.ajax({
            type: "POST",
            url: "SaveAndEditPosition",
            data: data,
            success: function (result) {
                $("#MyModal").modal("hide");
                $("#confirmSave").modal("show");
                setTimeout(function () { window.location.href = "/Position/ListPosition" }, 2000);
            }
        })
    }


 function EditRecordPosition(IdPosition) {
        var url = "/Position/EditPosition?idRecord=" + IdPosition;
        $("#ModalTitle").html("Uaktualnij stanowisko");
        $("#MyModal").modal();
        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                var obj = JSON.parse(data);
                $("#PositionId").val(obj.IdPosition);
                $("#NamePosition").val(obj.NamePosition);
                $("#PositionActive").val(obj.Active);
            }
        })

    }
</script>

如何验证表单中的字段？

我需要一个具体的例子，因为建议的解决方案不起作用。

标签： jqueryjsonajaxmodel-view-controller