MVC Clientside Validation postback occures

Question

I am new to MVC and I am facing very foolish problem in my project, I read that the model manages client side validation in MVC using Jquery, so I have already added few required jquery in my Bundle. Config File.Even though at the time of validation the page gets Post backs, even if the validation got fired, as I read it should not postback if the violation of validation is occurred, please help me to resolve this problem.

Below is the snippet of Bundle.Config File. Please check am I missing something?

 using System.Web;
  using System.Web.Optimization;

namespace DesignationDemo
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
                        "~/Scripts/bootstrap.min.js"));

            bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/bootstrap-responsive.min.css"));


            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));


bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));



        }
    }
}

View for "Create" operation

@using (Html.BeginForm("Create", "DesignationInfo", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{  
    @Html.ValidationSummary(true)  

    <table>

        <tr> <td>
           <b>Designation Name  </b>
        </td>
        <td>
            @Html.EditorFor(model => model.Name)  
            @Html.ValidationMessageFor(model => model.Name)  
            </td>
        </tr>

        <tr> <td> 
          <b>  Active </b>
        </td>
       <td>
            @Html.CheckBoxFor(model => model.Active, new { @checked = "checked" })


        </td>
            </tr>
    <tr><td>
           </td>                             
             <td></tr>
         <tr> <td> </td><td>

                  <input type="submit" value="Save" class="btn btn-success" />  &nbsp;&nbsp;&nbsp;
             <input type="button" value="Cancel" onclick="Cancel()" class="btn btn-danger" />  &nbsp;&nbsp;&nbsp;
                <input type="button" value="Back" onclick="Close()" class="btn btn-warning" /></td>


        </tr>
    </table>
}  



 <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />


  @Scripts.Render("~/bundles/jquery")    
@Scripts.Render("~/bundles/jqueryval")   
@Scripts.Render("~/bundles/jqueryui")


<script type="text/javascript">  

    function Close() {
        window.location.href = '/DesignationInfo/';

    }
    function Cancel() {
        $('#Name').val("")
        $('#Active').prop('checked', false);
    }
    </script>

Model as below :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

namespace DesignationDemo.Models
{

    public class Designation
    {
        public int Id { get; set; }

        [Required(ErrorMessage = "Can not be blank Name")]
        public string Name { get; set; }
        private bool myVal = true;
        [DefaultValue(true)]        
        public bool Active
        {
            get
            {
                return myVal;
            }
            set
            {
                myVal = value;
            }
        }

    }
}

Thanks in advance.

Answer 1

You may also try adding at top of view, it might fix the problem ....

@model DesignationDemo.Models.Designation

By adding in just bundles.config is not enough ...

You need to add below code in view also

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

Also put some code of Model & View, so I can check more ...

Forgot to mention earlier ...

The most important code

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}