Click here to Skip to main content
14,845,591 members
Please Sign up or sign in to vote.
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:

  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:

  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;
  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  }
Updated 9-Dec-20 4:35am
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:

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

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

