Geek Answers Handbook

Javascript invisibility check is non-functional without jquery script reference in view

In some context, the DOM hierarchy:

 Layout.cshtml
 > View
   > Partial View

Layout file contains:

<head>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
</head>
<body>
     <div>
          @RenderBody()
     </div>
     @RenderSection("scripts", required: false)
</body>

The view contains a form. After submitting the form, the AJAX call returns a partial view, which is inserted into the view using $ ('selector'). Html (PartialViewResult).

Partial view contains:

// @Scripts.Render("~/bundles/jquery") // [†]

@using(Ajax.BeginForm(...)
{
   // MinRate has the appropriate "lessthanproperty" data-val HTML properties
   @Html.EditorFor(x => x.MinRate)
   // MaxRate has the appropriate "greaterthanproperty" data-val HTML properties
   @Html.EditorFor(x => x.MaxRate)
   @Html.ValidationSummary()
   <button type="submit">Submit</button>
}

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/MapRates")

<script>
    $(document).ready(function () {
        console.log("CSHTML, ON READY");
    });

    (function() {
        console.log("CSHTML, IIFE");

        $.validator.addMethod("lessthanproperty", function (value, element, params) {
            return Number(value) < Number($(params).val());
        });

        $.validator.addMethod("greaterthanproperty", function (value, element, params) {
            return Number(value) > Number($(params).val());
        });
     })();
</script>

MapRates Javascript file contains:

$(document).ready(function () {
    console.log("JS, ON READY");
});

(function () {
    console.log("JS, IIFE")

    $.validator.unobtrusive.adapters.add("lessthanproperty", ["comparisonpropertyname"], function (options) {
        options.rules["lessthanproperty"] = "#" + options.params.comparisonpropertyname;
        options.messages["lessthanproperty"] = options.message;
    });

    $.validator.unobtrusive.adapters.add("greaterthanproperty", ["comparisonpropertyname"], function (options) {
        options.rules["greaterthanproperty"] = "#" + options.params.comparisonpropertyname;
        options.messages["greaterthanproperty"] = options.message;
    });
})();

... , , . MinRate MaxRate, ValidationSummary . † , jQuery, @Scripts.Render("~/bundles/jquery") , Ajax.BeginForm.

jquery script Layout, , , , , , . , jquery .

, jquery, :

JS, IIFE
CSHTML, IIFE
JS, ON READY
CSHTML, ON READY

, jquery, :

JS, ON READY
JS, IIFE
CSHTML, ON READY
CSHTML, IIFE

jquery script . , , , -, js .

? , - , jquery ? !

edit: , , Partial View . , , , .

+4
2

. UNLESS jquery, @Scripts.Render( "~/bundles/jquery" ) ,

, script script ( ) @section {} @RenderSection ( "scripts", required: false) _Layout, "scripts", .

, @Scripts.Render(~ ~/bundles/jquery) _Layout @RenderBody(), , :

 <!DOCTYPE html>
<html>
<head>
</head>
<body class="body">
    <div class="container-fluid">
        @RenderBody()
        <footer class="footer">
            <p>&copy; @DateTime.Now.Year  company name</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>


 @model someViewModel
@{
    ViewBag.Title = "some title";
}
<div class="row">
 //some chtml
</div>
    @section Scripts {
       <script>your scripts</script>   
    }
+2

. .

, () , (, , , $.validator ). ajax,

$.ajax({
    ....
    success: function(PartialViewResult) {
         $('selector').html(PartialViewResult); // append to the DOM
         var form = $('form'); // better to give the form an id attribute for selection
         // re-parse the validator
         form.data('validator', null);
         $.validator.unobtrusive.parse(form);
    }
});
+2

More articles:


All Articles