ASP.NET Core

Model binding in Razor Pages (Get)

Model binding in Razor Pages (Get)

Model binding Get in Razor pages

The same options apply if you want to bind data from GET requests (which is appended to the URL as a query string).
Binding to handler method parameters is automatic and requires no additional configuration

However, by default, only values that form part of a POST request are considered for model binding when you use the BindProperty attribute. The BindProperty attribute has a property called SupportsGet, which is false by default. You have to set this to true to opt in to model binding to PageModel properties on GET requests:


Lets add Search Feature in our existing Product .Net Core App.

Open Index Page Inside Products
Pages/Products/Index.cshtml.cs:

Add following new properties in Index Model
SearchString: Contains the text users enter in the search text box. SearchString has the [BindProperty] attribute. [BindProperty] binds form values and query strings with the same name as the property. [BindProperty(SupportsGet = true)] is required for binding on HTTP GET requests.
Genres: Contains the list of genres. Genres allows the user to select a genre from the list. SelectList requires using Microsoft.AspNetCore.Mvc.Rendering;
ProductGenre: Contains the specific genre the user selects. For example, "SKU-01".

Opting into GET binding is useful when addressing scenarios that rely on query string or route values.
To bind a property on GET requests, set the [BindProperty] attribute's SupportsGet property to true:

public class IndexModel : PageModel
{
    private readonly FirstCoreWebApplication.Data.ProductsContext _context;

    public IndexModel(FirstCoreWebApplication.Data.ProductsContext context)
    {
        _context = context;
    }

    public IList<Product> Product { get;set; } = default!;


    [BindProperty(SupportsGet = true)]
    public string? SearchString { get; set; }    

    public async Task OnGetAsync()
    {
        if (_context.Product != null)
        {
            var products = from p in _context.Product
                            select p;
            if (!string.IsNullOrEmpty(SearchString))
            {
                products = products.Where(s => s.Title!.Contains(SearchString));
            }

            Product = await products.ToListAsync();                
        }
    }
}

Navigate to the Products page and append a query string such as http://localhost:5046/Products?searchString=SKU-02


Lets add a text box for searching

The HTML <form> tag uses the following Tag Helpers:
Form Tag Helper. When the form is submitted, the filter string is sent to the Pages/Movies/Index page via query string.

<p>
    <a asp-page="Create">Create New</a>
</p>
<form>
    <p>
        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>


Lets add a Drop down for searching

public class IndexModel : PageModel
{
    private readonly FirstCoreWebApplication.Data.ProductsContext _context;

    public IndexModel(FirstCoreWebApplication.Data.ProductsContext context)
    {
        _context = context;
    }

    public IList<Product> Product { get;set; } = default!;


    [BindProperty(SupportsGet = true)]
    public string? SearchString { get; set; }

    public SelectList? Genres { get; set; }

    [BindProperty(SupportsGet = true)]
    public string? ProductGenre { get; set; }



    public async Task OnGetAsync()
    {
        if (_context.Product != null)
        {
            // Use LINQ to get list of genres.
            IQueryable<string> descQuery = from m in _context.Product
                                            orderby m.Description
                                            select m.Description;
           

            var products = from p in _context.Product
                            select p;
            if (!string.IsNullOrEmpty(SearchString))
            {
                products = products.Where(s => s.Title!.Contains(SearchString));
            }
            if (!string.IsNullOrEmpty(ProductGenre))
            {
                products = products.Where(x => x.Description == ProductGenre);
            }

            Genres = new SelectList(await descQuery.Distinct().ToListAsync());
            Product = await products.ToListAsync();                
        }
    }
}


Add Drop Down in Html

<form>
    <p>
        <select asp-for="ProductGenre" asp-items="Model.Genres">
            <option value="">All</option>
        </select>
        Title: <input type="text" asp-for="SearchString" />
        <input type="submit" value="Filter" />
    </p>
</form>






Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.

Instagram