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:

<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:

function searchFunction()
{
   var input = document.getElementById ('searchByDirector');
   var listOfMovies = Model   // I put Model here because Movie is my model
    var  selectedMovies;
   
   foreach  (Movie m in listOfMovies)
           {
                if (m.Director  = "Pippo")
                selctedMovies.Add(m);   
           }
   // I have to show the selectdMovies here
}

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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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