Friday, December 13, 2024

Jquery unobtrusive validation with ajax

 1 View

@model MesMvc.Areas.Resource.Models.EventModel
@{
    ViewData["Title"] = "Create";
}


<section class="content row">
    <div class="col-md-6 col-lg-6">
        <div class="box box-primary">
            <div class="box-body">
                @using (Html.BeginForm("Create", "Event", FormMethod.Post, new { id = "createform" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.PlantCode)
                            @Html.DropDownListFor(model => model.PlantCode, ViewBag.PlantCodesList as IEnumerable<SelectListItem>)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.ProductionCell)
                            @Html.DropDownListFor(model => model.ProductionCell, ViewBag.ProductionCellsList as IEnumerable<SelectListItem>)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.EventName)
                            @Html.EditorFor(model => model.EventName, new { htmlAttributes = new { @class = "form-control"} })
                            @Html.ValidationMessageFor(model => model.EventName, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.EventClass)
                            @Html.DropDownListFor(model => model.EventClass, ViewBag.EventClassesList as IEnumerable<SelectListItem>)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.Description)
                            @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.Optional1)
                            @Html.EditorFor(model => model.Optional1, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Optional1, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.Optional2)
                            @Html.EditorFor(model => model.Optional2, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Optional2, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.Optional3)
                            @Html.EditorFor(model => model.Optional3, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Optional3, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.Optional4)
                            @Html.EditorFor(model => model.Optional4, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Optional4, "", new { @class = "text-danger" })
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-lg-4">
                                <button type="button" class="button button-pill button-raised button-primary btn btn-primary" onclick="tabPostUrl($(currentTabContentId + ' form').serialize(), '/resource/event/create', '/resource/event/getall');">保存</button>
                            </div>
                            <div class="col-md-offset-4 col-md-4 col-lg-offset-4 col-lg-4">
                                <!--<button class="button button-pill button-raised button-primary btn btn-primary" type="button" onclick="location.href='@Url.Action("GetAll")'">取消</button>-->
                                <button class="button button-pill button-raised button-primary btn btn-primary" type="button" onclick="tabLoadUrl('', '/resource/event/getall');">取消</button>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </section>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script>
function tabPostUrl(parms, url, redirectToUrl) {
    //alert($form);
    $.validator.unobtrusive.parse($(currentTabContentId + ' form')); 
    $(currentTabContentId + ' form').validate();
    if ($(currentTabContentId + ' form').valid()) {
        $.ajax({
            'url': url,
            'type': 'POST',
            'data': parms,
            'success': function (result) {
                tabLoadUrl('', redirectToUrl);
            },
            error: function (data, status, e) {
                alert("更新内容时发生错误。\n" + data.status);
            }
        });
    } else {
        $.each($(currentTabContentId + ' form').validate().errorList, function (key, value) {
            $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']");
            $errorSpan.html("<span style='color:red'>" + value.message + "</span>");
            $errorSpan.show();
        });
    }
}
</script>

2 Model
using System.ComponentModel.DataAnnotations;
using MesMvc.Models;

namespace MesMvc.Areas.Resource.Models
{
    public class EventModel : BaseModel
    {
        public EventModel() { }

        [Required]
        [StringLength(10, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 1)]
        [Display(Name = "Plant Code")]
        public string PlantCode { get; set; }

        [Required]
        [StringLength(20, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 1)]
        [Display(Name = "Production Cell")]     
        public string ProductionCell { get; set; }

        [Required]
        [StringLength(50, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 1)]
        [Display(Name = "Event Name")]
        public string EventName { get; set; }

        [Display(Name = "Event Class")]
        public string EventClass { get; set; }

        [StringLength(100, ErrorMessage = "The {0} must be at max {1} characters long.")]
        [Display(Name = "Description")]
        public string Description { get; set; }

        [StringLength(20, ErrorMessage = "The {0} must be at max {1} characters long.")]
        [Display(Name = "Optional 1")]
        public string Optional1 { get; set; }

        [StringLength(20, ErrorMessage = "The {0} must be at max {1} characters long.")]
        [Display(Name = "Optional 2")]
        public string Optional2 { get; set; }

        [StringLength(20, ErrorMessage = "The {0} must be at max {1} characters long.")]
        [Display(Name = "Optional 3")]
        public string Optional3 { get; set; }

        [StringLength(20, ErrorMessage = "The {0} must be at max {1} characters long.")]
        [Display(Name = "Optional 4")]
        public string Optional4 { get; set; }

    }
}



No comments:

Post a Comment