C# Asp net core MVC, Extracting data from a Model list "List<Movie>" in a View

Question

I want to Create a "max price" filter system from the Asp net core 3.1 "MvMovie" tutorial project. this is the View/movies/Index.cshtml

@model MvcMovie.Models.MovieGenreViewModel

    <select asp-for="MovieGenre" asp-items="Model.Genres">
        <option value="">All</option>
    </select>

    Title: <input type="text" asp-for="SearchString" />
    <input type="submit" value="Filter" />

    Max price <input type="text" asp-for="Movies" />
    <input type="submit" value="Filter" />
</p>

This is what I have added

Max price <input type="text" asp-for="Movies.price" />
    <input type="submit" value="Filter" />

The problem is that I cannot recieve the price from the Movie class ( Models/movies)

 public class Movie
{
    public int Id { get; set; }

    [StringLength(60, MinimumLength = 3)]
    [Required]
    public string Title { get; set; }

    [Display(Name = "Release Date")]
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z]*$")]
    [Required]
    [StringLength(30)]
    public string Genre { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$")]
    [StringLength(5)]
    [Required]
    public string Rating { get; set; }
}

Because it is using the @model MvcMovie.Models.MovieGenreViewModel Models/MovieGenreViewModel.cs:

    public class MovieGenreViewModel
{
    public List<Movie> Movies { get; set; }
    public SelectList Genres { get; set; }
    public string MovieGenre { get; set; }
    public string SearchString { get; set; }

}

I know the "Price" data is in the List

List<Movie>

but how do I extract it and put it in the View/movies/Index.cshtml so I can work on my price filter system.

Answer 1

You can use several razor statements to manipulate the model (which is in c#), for example @foreach to iterate over the movies and display all the prices or @{var firstElementPrice=Movies[0].price} and then use firstElementPrice as you wish to retrieve the price of just the first one.

You can see a list of the availble syntax elements for razor pages here : https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-3.1 .

Answer 2

Add property public decimal Price { get; set; } in your class MovieGenreViewModel and change your max price to

Max price <input type="text" asp-for="@Model.Price" />
    <input type="submit" value="Filter" />

Answer 3

The general method of binding the List collection in the view is just like @ekke said, all in the loop and then use @Model.Movies[i].Price to bind in this way. But in the loop will cause multiple Input tags.

If you want only one input,I think the best way is to enter a MaxPrice through input, and then pass this MaxPrice to the background for filtering, and then return the filtered data.

Here is a working demo:

Controller:

public IActionResult Index()
    {
        //the model is your selected data

        var model = new MovieGenreViewModel
        {
            SearchString = "aaaa",
            Genres = new List<SelectListItem> {
            new SelectListItem { Text = "AA", Value = "1"},
            new SelectListItem { Text = "BB", Value ="2"},
            new SelectListItem { Text = "CC", Value ="3" },
            },
     
            MovieGenre = "bbbb",
            Movies = new List<Movie>
            {
                new Movie{Id=1,Genre="a",Price=78,Rating="aa",ReleaseDate=DateTime.Now,Title="MOvie1"},
                new Movie{Id=2,Genre="b",Price=56,Rating="bb",ReleaseDate=DateTime.Now,Title="MOvie2"},
            }
        };
        return View(model);
    }
    [HttpPost]
    public IActionResult Index(decimal MaxPrice)
    {
        var model = new MovieGenreViewModel
        {
            SearchString = "aaaa",
            Genres = new List<SelectListItem> {
            new SelectListItem { Text = "AA", Value = "1"},
            new SelectListItem { Text = "BB", Value ="2"},
            new SelectListItem { Text = "CC", Value ="3" },
            },

            MovieGenre = "bbbb",
            Movies = new List<Movie>
            {
                new Movie{Id=1,Genre="a",Price=78,Rating="aa",ReleaseDate=DateTime.Now,Title="MOvie1"},
                new Movie{Id=2,Genre="b",Price=56,Rating="bb",ReleaseDate=DateTime.Now,Title="MOvie2"},
            }
        };
        //filter movies
        var movies = model.Movies.Where(c => c.Price <= MaxPrice).ToList();
        model.Movies = movies;

        return View(model);
    }      

Index View:

<select asp-for="MovieGenre" asp-items="Model.Genres">
<option value="">All</option>
</select>
Title:
<input type="text" asp-for="SearchString" />
<input type="submit" value="Filter" />
Max price:
<form asp-controller="Movie" asp-action="Index">
<input type="text" name="MaxPrice"  />
<input type="submit" value="Filter" />
</form>
<table class="table">
<tbody>
    @foreach (var item in Model.Movies)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Rating)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
        </tr>
    }
</tbody>
</table>

Result: