Using jquery unobtrusive doesn't fire the server side code when form entries have cleared validation

Question

I am using GridMVC to display my data in ASP.net MVC5 using Entity Framework6.

I am successfully able to show data of Grid with Edit,Delete button on each row. Also I have Add new record button on top of the grid.

On clicking the "Add New" or Edit button, a bootstrap modal popup opens up. I had put server side validations in my model as below:-

public class QueSchedule
    {
        public int Id { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        [Required]
        public Nullable<System.DateTime> Date { get; set; }
        [Required]
        public Nullable<int> PersonelID { get; set; }
        [Required]
        public string OnCallType { get; set; }
        public string Comments { get; set; }

        public virtual PersonnelLocal PersonnelLocal { get; set; }
        public virtual QnsCallType QnsCallType { get; set; }
    } 

I am able to open popup on click of "Add" and "Edit", but when validation failed, the modal popup opened in a new page rather than appearing as popup. So to fix that I used Ajax form and added jquery validate scripts. (partial view _Create.cshtml shown below)

<script src="~/Scripts/jquery.validate.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.js">
</script>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Add new Person</h4>
</div>

<div id="validation">
    <div id="ajaxform">
        @using (Ajax.BeginForm("Create", "Queens", new AjaxOptions() { UpdateTargetId = "validation", HttpMethod = "Post" }, new { id = "Create" }))
        {
            @Html.AntiForgeryToken()
            <div class="modal-body">

                <div class="form-horizontal">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.PersonelID, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.DropDownListFor(model => model.PersonelID, (SelectList)ViewBag.PersonelID, "-Select-", htmlAttributes: new { @class = "form-control dropdown" })
                            @Html.ValidationMessageFor(model => model.PersonelID, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.OnCallType, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.DropDownListFor(model => model.OnCallType, (SelectList)ViewBag.OnCallType, "-Select-", htmlAttributes: new { @class = "form-control dropdown" })
                            @Html.ValidationMessageFor(model => model.OnCallType, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Comments, htmlAttributes: new { @class = "control-label col-md-3" })
                        <div class="col-md-9">
                            @Html.EditorFor(model => model.Comments, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Comments, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Cancel</button>
                <input class="btn btn-primary" type="submit" value="Save" />
            </div>
        }
    </div>
</div>

Now the validations happen on the popup only. But the issue is when all the data entered is correct the Save button event doesnt fire the HttpPost method Create for it to work properly.

 // GET: People/Create
        public ActionResult Create()
        {
            ViewBag.PersonelID = new SelectList(db.PersonnelLocals.Where(o => o.QueensLocal == true), "Index", "Text");
            ViewBag.OnCallType = new SelectList(db.QnsCallTypes, "CallTypeID", "CallType");
            return PartialView("_Create");
        }

        [HttpPost]

        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create([Bind(Include = "Id,Date,PersonelID,OnCallType,Comments")] QnsAttendingCallScheduleNew1 qnsattendingcallschedulenew1)
        {
            if (ModelState.IsValid)
            {
                db.QnsAttendingCallScheduleNew1.Add(qnsattendingcallschedulenew1);
                await db.SaveChangesAsync();
                return RedirectToAction("Index");
                //return Json(new { success = true });
            }
            ViewBag.PersonelID = new SelectList(db.PersonnelLocals.Where(o => o.QueensLocal == true), "Index", "Text", qnsattendingcallschedulenew1.PersonelID);
            ViewBag.OnCallType = new SelectList(db.QnsCallTypes, "CallTypeID", "CallType", qnsattendingcallschedulenew1.OnCallType);
            return PartialView("_Create", qnsattendingcallschedulenew1);
        }

Why is this so. Please help.

Also when Edit or Delete is clicked (after the Create) it displays same modal popup without hitting the Edit/Delete GET methods.

Why does the methods stops firing.

Edit1:- Observed behaviour is that with

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

data-dismissal property just hides the modal and not destroy it. Though there is code on other webpages showing to destroy data

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

I have put this on my Index page having :-

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content" id='myModalContent'>
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

But it didnt work :( Also the 1st problem of post methods not firing event if they pass validations is still there.

--Update2-- If I use @using (Html.BeginForm()) instead of @using (Ajax.BeginForm..) the behaviour remains the same. Kindly help.

Answer 1

The problem was with the use of wrong javascript libraries. Instead of

<script src="~/Scripts/jquery.validate.js"></script>

I used this:

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

So my updated script tags in _Create appears like:-

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js">
</script>