CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-4validationscripting
New2This
New2This

Reputation: 253

Ajax unobtrusive validation and MVC4

I'm trying to get my AJAX to work in a PARTIAL VIEW. I have included it at the top of my Layout page as:

        <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - COMIS</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <link href="~/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" 
        type="text/css" />

        <script src="~/Scripts/jquery-1.11.1.js" type="text/javascript"></script> 

        <script src="../../Scripts/jquery-ui-1.11.1.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery-migrate-1.2.1.js" type="text/javascript"></script>
        <script src="../../Scripts/DatePickerReady.js" type="text/javascript"></script>

        <script src="~/Scripts/jquery-ui-1.11.1.validate.min.js" type="text/javascript"></script>

        <script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
         <script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

        <script src="~/Scripts/jquery-1.11.1.min.js" type="text/javascript"></script> 
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>   
        <script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">       
        </script>

        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css") 
        @Styles.Render("~/Content/themes/base/css") 
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery") /
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/jqueryval")


        @Scripts.Render("~/Scripts/buttons.js") 
        @Scripts.Render("~/Scripts/navigation.js")
    </head>

However it's not working. It throws the error:"JavaScript runtime error: Unable to get property 'unobtrusive' of undefined or null reference mvc 4".I think its because I'm referencing too many scripts. can someone please shoe me what I'm doing wrong?

BUNDLE.config

      public class BundleConfig
        {

            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",
                "~/Scripts/jquery-ui.unobtrusive-{version}.js"));

                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.theme.css")); 

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


                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));

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

                bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
                            "~/Content/jquery-ui.css"));


                bundles.IgnoreList.Clear();
   bundles.IgnoreList.Ignore("*.intellisense.js");
                bundles.IgnoreList.Ignore("*-vsdoc.js");
                bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);


            }
        }

**PARTIAL VIEW** - 

    @model COMIS.Models.X
    @using(Html.BeginForm("Create"))
         { @Html.ValidationSummary(true)


        <fieldset class="innerform">
        <div>
            ....
        </div>
    </fieldset>

    } 


       <script src="~/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
       <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Upvotes: 0

Views: 928

Answers (2)

McKeymayker
McKeymayker

Reputation: 358

Try referencing the scripts in order at the bottom of your Layout page.

Example:

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

Upvotes: 1

shammelburg
shammelburg

Reputation: 7318

add all the other scripts to the BundleConfig.cs

<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - COMIS</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/themes/base/css") 
@Scripts.Render("~/bundles/modernizr")
</head>
<body>

</body>

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



Edit

// BundleConfig.cs

// for js scripts
bundles.Add(new ScriptBundle("~/bundles/*Bundle Name*").Include(
                        "~/Scripts/file.js")); // location of your js file

// reference js bundle like this
@Scripts.Render("~/bundles/*Bundle Name*")

// css
bundles.Add(new StyleBundle("~/Content/*Bundle Name*").Include(
                        "~/Content//css/file.css")); // location of css file

// reference css bundle like this
@Styles.Render("~/Content/*Bundle Name*")

Upvotes: 0

Related Questions