I can't catch the JavaScript keyup event of the Input element and call Search method in the HomeController. Net Core 6.

Question

I can't catch the JavaScript keyup event of the Input element and call Search method in the HomeController. Net Core 6.

Volk Volk 241

Hi!

I have a search bar SearchInput.

<header>  
  
<ul>  
			<li class="search">  
				<a class="fa-search" href="#search">Search</a>  
				<form id="search" method="get" action="#">  
					<input id="SearchInput" type="text" name="query" placeholder="@language.Getkey("search")"/>  
				</form>  
			</li>  
  
		</ul>  
  
</header>

What I just didn't do to catch this event and redirect it to the controller.
But I can't even call keyup in javascript - the function just isn't called.

Here are some examples:

@section Scripts{  
  
	<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"/>  
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"/>  
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>  
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
  
	<script type="text/javascript">	  
  
		let filterInput = document.getElementById('SearchInput');  
		filterInput.addEventListener('keyup', filterNames);  
  
		function filterNames() {  
			alert(@Model);  
		}  
  
	</script>  
  
	<script type="text/javascript">  
  
		// JS+ASP Net Core Get data from controller  
		// https://stackoverflow.com/questions/69210262/jsasp-net-core-get-data-from-controller  
  
		$("#SearchInput").keyup(  
  
			var searchText = $("#SearchInput").val().toLowerCase();  
  
			alert(@Model);  
  
			return;  
  
			$.ajax({  
				url: "~/Customer/Home/Search",  
				type: "GET",  
				data: { text: searchText },  
				success: function (res) {  
					$("#convertnum").html(res);  
				},  
				error: function (hata, ajaxoptions, throwerror) {  
					$("#convertnum").html("convert failed");  
				}  
			});  
		);  
  
	</script>  
  
	<script type="text/javascript">  
  
		$(document).ready(function () {  
  
			$("#SearchInput").keyup(  
  
				function() {  
  
					// ASP .Net Core Call Controller Function from Javascript with redirect from Controller  
					// https://stackoverflow.com/questions/70331625/asp-net-core-call-controller-function-from-javascript-with-redirect-from-contro  
  
					var searchText = $("#SearchInput").val().toLowerCase();  
  
					window.location.href ="~/Customer/Home/Search";  
					//window.location.href ="Controller/Function?Search";  
				}  
			);  
        });  
  
	</script>  
}

How do I realize it and just call public IActionResult Search(string text) { } in HomeController (Areas\Customer\Controllers\HomeController.cs)?

Thanks!

Answer 1

Michael Taylor 41,191

Your HTML is malformed (your GetKey function call is using double quotes inside double quotes). That is causing issues potentially but since you're using Razor I haven't tested it. Your initial function is trying to hook up the event before the element is even defined so that would fail as well. The browser's console window should be showing you errors for these.

Here's the simplest equivalent code to do what you want.

   <!DOCTYPE html>  
   <html>  
     
   <head>  
       <title>Test</title>  
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>  
     
       <script type="text/javascript">  
           $(document).ready(function () {  
               $("#SearchInput").keyup(function (event) {  
                   var searchText = event.target.value.toLowerCase();  
                   console.log(searchText);  
               })  
           })  
       </script>  
   </head>  
     
   <body>  
       <ul>  
           <li class="search">  
               <a class="fa-search" href="#search">Search</a>  
               <form id="search" method="get" action="#">  
                   <input id="SearchInput" type="text" name="query" placeholder='@language.Getkey(" search")' />  
               </form>  
           </li>  
       </ul>  
   </body>  
     
   </html>

Volk Volk 241 Reputation points

2022-09-09T12:14:58.323+00:00

Thanks for the answer!

I ran the code but there were 3 problems:

1) Why is the keyup method immediately launched when entering the page? It should only be triggered by an event when I release a key in the search window.

2) When I enter letters in the search field in the F12 console, an error like on the screenshot. How many characters I enter, so much error shows. In this case, the program does not enter in the keyup method.

3) When I press Enter in the search box, the program enters the keyup method, but for some reason, instead of calling HomeController-->Search, it calls HomeController-->Index and just restarts main page Index.

How do I the method in the Search field is called only when I type in characters and the keyup method must calls HomeController-->Search sending searchText?

Thanks!
Michael Taylor 41,191 Reputation points

2022-09-09T14:36:06.763+00:00

The HTML you're using isn't the HTML I gave you. Your results won't be like mine. The script blocks, for example, need to be in the head of the HTML, not the body.

The rest of your HTML seems like you are inserting into existing code. The HTML I gave you works without errors and doesn't do what you're seeing. The problem is in your HTML file you dropped it into.

Notice, for example that you're using JQuery inside your event handler to find the search box. But the event already has that. Refer to my code where I use the event to get the target element. Remove your existing keyup script logic and replace it with mine. See if your problems go away.

If they don't then post the entirety of the HTML file you're trying to run but you can leave out things in the body outside the header element.

Answer 2

Bruce (SqlWork.com) 31,251

Also the url in the ajax call does not support ~/. You need to use razor syntax to generate, or the best sotionis to set the base href in html

Volk Volk 241 Reputation points

2022-09-09T16:24:27.493+00:00

Thanks! I will try.

Answer 3

I put the code in the layout as you said - the result is the same. Here there is a template that I use. It has a menu at the top with a search. future-imperfect As a result, my layout works well everywhere and as it should. You can download the template Future Imperfect and look inside index.html. I have some differences in my layout. The main code in _Layout.cshtml page contains all the other parts of the code. I attach, in particular, _Layout.cshtml and HeaderParties.shtml - this is what concerns this problem.

_Layout.cshtml

<!DOCTYPE html>  
<html lang="en">      
<head>  
  
    <!-- Meta -->  
    @await Html.PartialAsync("MetatagsPartial")      
  
    <!-- Css -->  
    @await Html.PartialAsync("CssPartial")  
  
</head>      
    <body class="is-preload">  
  
             <!-- Wrapper -->  
 <div id="wrapper">  
  
            <!-- Header -->  
            @await Html.PartialAsync("HeaderPartial") <!-- ----- !!! ----- -->  
  
            <!-- Menu -->  
            @await Html.PartialAsync("MenuPartial")  
  
            <!-- Main -->  
            <div class="container">  
                <main role="main" class="pb-3">  
                    @RenderBody()  
                </main>  
            </div>  
  
            <!-- Scripts -->              
            @await Html.PartialAsync("ScriptsPartial")  
            @await RenderSectionAsync("Scripts", required: false)  
  
        </div>      
    </body>      
</html>

HeaderPartial.cshtml

@using Microsoft.AspNetCore.Http  
@using Microsoft.AspNetCore.Http.Extensions;  
@using System.Globalization  
  
@inject LanguageService language  
  
<!-- Header -->  
<header id="header">  
  
    <h1><a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Future Imperfect</a></h1>  
  
    <nav class="links">  
        <ul>  
  
            <li><a asp-area="Customer" asp-controller="Home" asp-action="Catalog">@language.Getkey("catalog")</a></li>  
            <li><a asp-area="Customer" asp-controller="Home" asp-action="Portfolio">@language.Getkey("portfolio")</a></li>  
            <li><a asp-area="Customer" asp-controller="Home" asp-action="Contact">@language.Getkey("contacts")</a></li>  
  
            <partial name="_LoginPartial" />  
  
        </ul>  
    </nav>      
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
  
    <script type="text/javascript">  
  
 $(document).ready(  
  
 function () {  
  
 $("#SearchInput").keyup(  
  
 function(event) {  
  
 var searchText = $("#SearchInput").val().toLowerCase();  
  
 alert(@Model);  
  
 //window.location.href ="Controller/Search?text=" + searchText;  
  
 $.ajax({  
 url: "~/Areas/Customer/Home/Search",  
 type: "GET",  
 data: { text: searchText },  
 success: function (res) {  
 $("#convertnum").html(res);  
 },  
 error: function (hata, ajaxoptions, throwerror) {  
 $("#convertnum").html("convert failed");  
 }  
 });  
 }  
 );  
 });  
  
    </script>  
  
    <nav class="main">  
  
        <ul>  
            <li class="search">  
                <a class="fa-search" href="#search">Search</a>  
                <form id="search" method="get" action="#">  
                    <input id="SearchInput" type="text" name="query" placeholder='@language.Getkey("search")' />  
                </form>  
            </li>  
  
            <li class="menu">  
                <a class="fa-bars" href="#menu">Menu</a>  
            </li>  
        </ul>  
    </nav>  
  
</header>

Michael Taylor 41,191 Reputation points

2022-09-09T16:03:57.46+00:00

There are several issues with your code.

In my example I load jquery using a script tag. Since you're using ASP.NET Core MVC it already probably loads JQuery so you don't need it again. Remove that extra line in the header element.

Your alert(@Model) has nothing to do with the JS data. If you want to get an alert with the search text then use alert(searchText).

The script inside header is relying on JQuery being loaded. Since you don't actually load it until the end of the body it isn't possible to use JQuery until then and therefore your script in header won't work. In general JQuery should be loaded early in the loading process. Therefore move the script include for JQuery into the head element of your layout. <!DOCTYPE html>
<html lang="en">
<head>

@await Html.PartialAsync("MetatagsPartial")
 @await Html.PartialAsync("CssPartial") <script src="~/lib/jquery/dist/jquery.min.js"></script>
</head>
Michael Taylor 41,191 Reputation points

2022-09-09T16:05:22.49+00:00

headerpartial

<script type="text/javascript"> $(document).ready( function () { $("#SearchInput").keyup( function (event) { var searchText = $("#SearchInput").val().toLowerCase(); console.log(searchText); //alert(@Model); //window.location.href ="Controller/Search?text=" + searchText; if (searchText.length > 0) { $.ajax({ url: "~/Areas/Customer/Home/Search", type: "GET", data: { text: searchText }, success: function (res) { $("#convertnum").html(res); }, error: function (hata, ajaxoptions, throwerror) { $("#convertnum").html("convert failed"); } }); } } ); }); </script> <nav class="main"> ...

Note that search could be empty so you shouldn't probably call your backend in that case.

Answer 4

This option works almost correctly in my layout. :)
This example helped: asp-net-core-call-controller-method-in-javascript-without-ajax

But this reloads the whole page (when entering any character) so the Search field will always be empty. I'm thinking of using the Enter key if I can't reload the @RenderBody() separately.

window.location.href = '@Url.Action("Search", "Home")' + '?text=' + searchText;

This also works, I go to the HomeController-->Search method, but the page does not react in any way and does not even reload, the transition to the Search.cshtml page does not occur. But I would like the @RenderBody() to show the Search.html page, and the upper header to remain as it is.

$.ajax({  
 url: "Customer/Home/Search",  
 type: "GET",  
 data: { text: searchText },  
 success: function (res) {  
 $("#convertnum").html(res);  
 },  
 error: function (hata, ajaxoptions, throwerror) {  
 $("#convertnum").html("convert failed");  
 }  
 });  


public IActionResult Search(string text)  
        {  
            return View(  
                _db.Products.  
                Include(c => c.ProductTypes).  
                Include(c => c.SpecialTag).  
                Include(c => c.ProductTargets).  
                Include(c => c.ProductTechs)  
                .ToList());  
        }

Please tell me how in my case to catch in keyup only pressing the Enter key? And how can I use the ajax option to see the page Search.html only in @RenderBody()?

Thanks!

Michael Taylor 41,191 Reputation points

2022-09-09T18:02:56.203+00:00

That is beyond the scope of this post. I think you should post another question related to persisting data across browser calls. The problem is that if you change window.location.href then that is equivalent to the user typing something into the address bar. Your page is going to be reloaded by the browser. That is by design and there is no way to stop it. If you need to persist data across page loads then you'll need to persist the data. Common approaches include passing the data onto the next page, using session on the server side or using local storage on the client side.

As far as the specific question you asked originally about getting keyup to work, I believe we have answered that now.
Volk Volk 241 Reputation points

2022-09-09T18:12:21.477+00:00

Ok.

Answer 5

Bruce (SqlWork.com) 31,251

the enter key does a form submit, so rather than use keyup, just use the form submit handler. in the callback just cancel the submit, and do the ajax call.

$("#SearchInput").parent("form").submit(function(e) {  
   // cancel submit  
   e.preventDefault();  
  
   // do ajax call  
   ....  
  
});

I can't catch the JavaScript keyup event of the Input element and call Search method in the HomeController. Net Core 6.

5 answers

Activity