I am working on an asp.net mvc5 web application, and i am implementing CRUD operations using Bootstrap & WebGrid.

now my Create action methods looks as follow:-

 [HttpGet]
        public ActionResult Create()
        {
            var phone = new Phone();
            return PartialView("Create", phone);
        }


        // POST: /Phone/Create
        [HttpPost]
        public JsonResult Create(Phone phone)
        {
            if (ModelState.IsValid)
            {
                db.Phones.Add(phone);
                db.SaveChanges();
                return Json(new { success = true });
            }
            return Json(phone, JsonRequestBehavior.AllowGet);
        }

and the Index view which have a Create button that will open the popup window:-

 <div class="pull-right col-lg-1">   
                <a class="btn btn-success" data-modal="" href="/Phone/Create" id="btnCreate">
                     <span class="glyphicon glyphicon-plus"></span>      
                </a>
            </div>
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

@section scripts{
    @Scripts.Render("~/scripts/appjs/phones.js")
}

an the phones.js is :-

  $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {        
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');

                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        location.reload();
                    } else {
                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

the Create view:-

  @model MvcBootstrapCrud.Models.Phone

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="modal-title">Add New Phone</h3>
    </div>


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="modal-body">

            <div class="form-horizontal">
                <div class="form-group">
                    @Html.LabelFor(m => Model.Model, new { @class = "control-label col-sm-3" })
                    <div class="col-sm-9">
                        @Html.TextBoxFor(m => m.Model, new { @class = "form-control required" })
                        <div>
                            @Html.ValidationMessageFor(m => m.Model)
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => Model.Company, new { @class = "control-label col-sm-3" })
                    <div class="col-sm-9">
                        @Html.TextBoxFor(m => m.Company, new { @class = "form-control required" })
                        <div>
                            @Html.ValidationMessageFor(m => m.Company)
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => Model.Price, new { @class = "control-label col-sm-3" })
                    <div class="col-sm-9">
                        @Html.TextBoxFor(m => m.Price, new { @class = "form-control required" })
                        <div>
                            @Html.ValidationMessageFor(m => m.Price)
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <span id="progress" class="text-center" style="display: none;">
                <img src="/images/wait.gif" alt="wiat" />
                Wait..
            </span>

            <input class="btn btn-primary" type="submit" value="Save" />
            <button class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    }
    <script>
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
    </script>

and the Phone model class:-

public class Phone
    {
        [Display(Name = "ID")]
        [Key]
        public int PhoneId { get; set; }

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

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

        [Required]
        [Display(Name = "Price")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }
    }

The problem i am facing is that when the Create modal popup form is shown , and the user leave a Required field empty , a validation error will be shown beside the field (as defined in the [Required] data annotation). but the validation error will not prevent the popup from submitting the form when the user click on Save button ,and the Post Create action method are going to be called even with the validation error being shown.. so can anyone adivce on this please? Thanks

Related posts

Recent Viewed