How to implement a javascript function inside a view?

Question

0.00/5 (No votes)

See more:

I'm studying Javascript and I'm on an MVC web app and wanna include a button inside my Index view to filter results. My entity is Movie, the Index view shows all movies in the database and the button I'm gonna create will show only movies whose Director is "Pippo".

What I have tried:

I created an HTML button inside the Index view:

Copy Code

  1  <input type="button" id="searchByDirector" onclick="searchFunction()" value = "Search Pippo's movies"/>

I'm trying to study and understand both how to implement this JS function and how to do this considering that it hs to interact with the components of MVC (model): should I call the Business Logic function which finds the movies according to the criteria above here? Or should I cycle my list of movies inside the Js function? My pseudocode here:

Copy Code

  1  function searchFunction()
  2  {
  3     var input = document.getElementById ('searchByDirector');
  4     var listOfMovies = Model   // I put Model here because Movie is my model
  5      var  selectedMovies;
  6     
  7     foreach  (Movie m in listOfMovies)
  8             {
  9                  if (m.Director  = "Pippo")
 10                  selctedMovies.Add(m);   
 11             }
 12     // I have to show the selectdMovies here
 13  }

Posted 4-Dec-20 0:15am

xhon

Updated 9-Dec-20 4:35am

Add a Solution

Comments

F-ES Sitecore 4-Dec-20 6:27am

You'll probably have to do an ajax call to your mvc action (or implement an ApiController if you want) that passes the name of the director and returns a list of relevant results. Your js would then go through those results and update the html on the page accordingly. It's quite a broad topic, if you search for things like "c# mvc ajax search" you'll probably find sample code.

xhon 4-Dec-20 7:24am

thank you for commenting. I implemented the following action on my Controller:

public ActionResult getByDirector()
{
List<movie> movies = _movieProxy.GetByDirector();
return View (movies);
}

Then I added the following in my Index View, a JS function which calls the method above:

function searchFunction()
{
var url = "@Url.Action("GetByDirector");

$.get(url, function (data)
{
$("#newDivTag" ).html('$' + data); // I created this new div to contain the results
});
}

Then I wrote the following:

$.ajax({
Type: "GET",
contentType: "application/json; charset=utf=8",
url: "/MovieMvc/GetByDirector",
success: function (data) { successCallBack(data); },
error: function(data) { failureCallBack(data); }
});

Does it make sense?

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2020-12-09T04:35:00

OK - I did this sort of thing both ways. Normally, and my preferred method, is via an AJAX call (or the equivalent for you with C#/MVC). Just request what I want, filtered and display it.

In one case, however, I decided to check how it would work out if I downloaded the entire initial record set into a javaScript array and then used that, locally.

In this case, it was paging the data. Any sort was done on the SQL side.

Anyway, my fearless leader gave me an extreme test query: 50,000 records downloaded. Performance was nearly instantaneous (from the user's point of view). Considering it was for paging (forward/reverse/wrap), there would have been a lot of overhead via a series of SQL queries that was made up for rather easily by one bigger query and no more round trips.

That being said, you'll need to go through your data to filter (vs. my simple sequential blocks). You'll need, at least, a field in the array for the filter info. Also, the system upon which this was run is an inhouse only system. Over 400 users but no lag from the world-at-large internet.

You seem to know what you're doing - so here's how it worked for me

How to implement a javascript function inside a view?

1 solution

Solution 1

Add your solution here

Preview 0

How to implement a javascript function inside a view?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us