ASP.NET Core MVC - Getting data and handling 404 in same view

Question

I'm more familiar with WebForms (which my company uses), and just started learning MVC. I followed the movies tutorial, and am having a bit of a hard time seeing how I can use the MVC pattern the way I want.

For instance, my company often asks me to make web apps that take some input from the user, looks it up in our database, and gives them back some other piece of data pertaining to the input, all on the same page.

With WebForms I can easily see if the database returned null and display an error label in that case. But with MVC treating data access like an API, I don't see how I can do the same thing without ignoring using the proper 404 code. Let's say I want to look up a movie (I commented out the 404s on purpose for now):

public class MoviesController : Controller
 {
    private readonly MovieDBContext _context;

    public MoviesController(MovieDBContext context)
    {
        _context = context;
    }

    // GET: Movies/Info/Title
    public async Task<IActionResult> Info(string title)
    {
        //if (title == null)
        //{
            //return NotFound();
        //}

        var movie = await _context.Movies
            .FirstOrDefaultAsync(m => m.Title == title);
       // if (movie == null)
       // {
           // return NotFound();
        //}

        return Json(movie);
   }

Then in the view:

<h2>App</h2>
<br />
<div class="form-group">
    <p>
        Price Lookup App
    </p>
    <br />
    <div class="row">
        <div class="col-xs-2">
            Enter movie title:
        </div>
        <div class="col-xs-2">
            <input type="text" class="form-control" id="title" />
        </div>
        <div class="col-xs-2">
            <input type="submit" class="btn" onclick="getMovie()" />
        </div>
    </div>
    <br />
    <div class="row">
        <label id="price"></label>
    </div>
</div>

<script>
    function getMovie() {
        var movie = $("#title").val();
        if (movie != "") {
            $.getJSON("../Movies/Info?title=" + movie, function (response) {
                if (response != null) {
                    $("#price").html(response.price);
                }
                else {
                    $("#price").html("Film not found");
                }
            });
        }
        else {
            $("#price").html("Film not found");
        }
    }
</script>

This technically works, but I feel I'm really not supposed to do it this way. I should be giving a 404 code when the movie isn't found, correct? I just don't know how to handle getting a 404 response and displaying a custom "not found" message on the same view like I am above, because the 404 stops execution of the JS. Thanks.

Answer 1

You can use $.ajax (ajax call), or $.get(get api call). There are componenets of success and error. you can handle the responses there