Why is my JS script not working on my ASPNET View? How to use my script in the correct way?

Question

I'm having problems with my JS script and I truly don't know why, because I know it's well written because it's already being used in another application.

I'm adding everything in order:

1. bootstrap.min.js
2. jquery.min.js
3. bootstrap.min.js

This is how I'm adding the files I need in my page

 public class BundleConfig
 {
 public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new StyleBundle("~/Content/css").Include(
 "~/Content/bootstrap.min.css",
 "~/Content/site.css"));
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-3.4.1.min.js"));
 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery.validate.min.js"));
 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
 "~/Scripts/modernizr-2.8.3.js"));
 bundles.Add(new ScriptBundle("~/bundles/popper").Include(
 "~/Scripts/umd/popper.min.js"));
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
 "~/Scripts/popper-utils.min.js"));
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
 "~/Scripts/bootstrap.min.js"));
 }
 }

This is my script, and I put it on the head of my _layout.html file

 <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript">
 $(document).ready(function() {
 $("#search").on("keyup", function () {
 var value = $(this).val().toLowerCase();
 $("#div > a").show().filter(function() { //Select all anchor elements and show them
 return $(this).find('a').text().toLowerCase().indexOf(value) === -1; //Find the anchor and check if the value is substring of the text. Return true if not found.
 }).hide(); //Hide all anchors that the value is not the substring of text
 });
 });
 </script>

And this is the body of my View. This is where the script should work.

<div id="accordion">
 @foreach (var item in Model)
 {
 <div class="card">
 <div class="card-header bg-dark text-light" id="headingOne">
 <h5 class="mb-0">
 <a class="btn btn-link" data-toggle="collapse" data-target="#[email protected]" aria-expanded="false">
 <i class="fa fa-folder-open"></i>
 @item.directoryName
 </a>
 </h5>
 </div>
 <div id="[email protected]" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
 <div class="my-2 my-lg-0 card-body">
 <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="search"> <!-- Here is where I start to use my js script. This is the input-->
 </div>
 <div class="card-body overflow-auto" id="div" style="max-height: 300px">
 @foreach (string file in @item.fileName)
 {
 <a class="dropdown-item list-unstyled" href="#">@file</a> <!-- Here are the elements i'm trying to search-->
 }
 </div>
 </div>
 </div>
 }
</div>

I wanted to create a Search filtering content, but I don't know why it's not working on my view

• Tom Faltesek: Are you getting any errors when you load the page? I believe the ~/ syntax only work correctly on server controls (elements with runat="server").
• Muhammad Aftab: try removing src from <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript">

Answer 1

Well, I solved this error after 7 hours at least. It was not that the syntax only work correctly with server controls. The problem was how I was calling my scripts in the first place. The script only worked with the first div. And it was because of the name I have to the id's. To solve this problem I used a little razor syntax with my script. Here's the solution:

@model IEnumerable<_3VA_MES.Models.Recipe>
@{
 ViewBag.Title = "Recipe";
}
@section scripts {
 @foreach (var item in Model)
 {
 <script type="text/javascript">
 $(document).ready(function () {
 $("#@item.directoryName").on("keyup", function () {
 var value = $(this).val().toLowerCase();
 $("#@item.directoryName-mydiv > *").filter(function () { //Select all anchor elements and show them
 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); //Find the anchor and check if the value is substring of the text. Return true if not found.
 }); //Hide all anchors that the value is not the substring of text
 });
 });
 </script>
 }
}
<h2>@ViewBag.Title.</h2>
<br />
<h3>@ViewBag.Message</h3>
<br />
<div id="accordion">
 @foreach (var item in Model)
 {
 <div class="card">
 <div class="card-header bg-dark text-light" id="headingOne">
 <h5 class="mb-0">
 <a class="btn btn-link" data-toggle="collapse" data-target="#[email protected]" aria-expanded="false">
 <i class="fa fa-folder-open"></i>
 @item.directoryName
 </a>
 </h5>
 </div>
 <div id="[email protected]" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
 <div class="my-2 my-lg-0 card-body">
 <i class="fa fa-search"></i><input class="form-control mr-sm-2 ml-2 d-inline" type="text" placeholder="Search..." id="@item.directoryName"> <!-- Here is where I start to use my js script. This is the input-->
 </div>
 <div class="card-body overflow-auto" id="@item.directoryName-mydiv" style="max-height: 300px">
 @foreach (string file in @item.fileName)
 {
 <a class="dropdown-item list-unstyled" href="#" name="@file">@file</a> <!-- Here are the elements i'm trying to search-->
 }
 </div>
 </div>
 </div>
 }
</div>

P.S. I won't post the _Layout.cshtml because it don't really matter. The problem was on my view.

Answer 2

Try adding your script like this:

 <script src="~/bundles/jquery" type="text/javascript" runat="server"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("#search").on("keyup", function () {
 var value = $(this).val().toLowerCase();
 $("#div > a").show().filter(function() { //Select all anchor elements and show them
 return $(this).find('a').text().toLowerCase().indexOf(value) === -1; //Find the anchor and check if the value is substring of the text. Return true if not found.
 }).hide(); //Hide all anchors that the value is not the substring of text
 });
 });
 </script>

I believe the ~/some/bundle/path syntax only work correctly on server controls (elements with runat="server").

• Miguel Angel Segura Sandoval: It didn't work. But jquery it's working without any problem on other View. So I don't think that's the problem.