ASP.NET Core MVC & Razor Pages

Introduction to Data Binding

Data binding is a fundamental concept in web development, enabling the seamless transfer of data between the client and server. In ASP.NET Core MVC and Razor Pages, this process is highly automated and flexible, allowing developers to efficiently handle user input and display server-side data on the client.

This documentation provides practical samples and in-depth explanations for various data binding scenarios, helping you leverage the full power of ASP.NET Core for your web applications.

Data Binding in MVC

ASP.NET Core MVC uses model binding to automatically populate action method parameters and controller properties with data from incoming HTTP requests. This includes data from form posts, query strings, route values, and HTTP headers.

Binding Simple Types

Binding to simple types like strings, integers, and booleans is straightforward. The framework automatically attempts to match incoming request data to parameter names.

public class ProductsController : Controller
{
    public IActionResult Details(int id)
    {
        // 'id' is automatically bound from the query string or route
        var product = _productService.GetProductById(id);
        return View(product);
    }
}
                

Binding Complex Types

You can also bind to complex objects. The model binder will attempt to bind properties of the complex type based on their names.

public class UserViewModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
}

public class AccountController : Controller
{
    [HttpPost]
    public IActionResult Register(UserViewModel user)
    {
        // 'user' object is automatically populated from form data
        if (ModelState.IsValid)
        {
            _userService.CreateUser(user);
            return RedirectToAction("Success");
        }
        return View(user); // Return view with validation errors
    }
}
                

Binding Collections

Model binding supports collections like arrays and lists. For forms, this often involves using array-like naming conventions.

public class ItemViewModel
{
    public string Name { get; set; }
    public int Quantity { get; set; }
}

public class OrderController : Controller
{
    [HttpPost]
    public IActionResult UpdateOrder(List<ItemViewModel> items)
    {
        // 'items' list is populated from form data like 'items[0].Name'
        foreach (var item in items)
        {
            // Process each item
        }
        return RedirectToAction("OrderConfirmation");
    }
}
                

Data Binding in Razor Pages

Razor Pages simplifies handling page-specific logic. Data binding works similarly, with the model being a property of the `PageModel` class.

Binding Simple Types

Simple types can be bound directly to properties of your `PageModel`.

// Index.cshtml.cs
public class IndexModel : PageModel
{
    public string Message { get; set; }

    public void OnGet(string message)
    {
        Message = message ?? "Welcome!";
    }
}
                

// Index.cshtml
<p>@Model.Message</p>
                

Binding Complex Types

You can bind to complex types by declaring them as properties in your `PageModel`.

// Order.cshtml.cs
public class OrderModel : PageModel
{
    [BindProperty]
    public OrderViewModel Order { get; set; }

    public void OnGet()
    {
        // Initialize Order if needed for GET request
        Order = new OrderViewModel();
    }

    public IActionResult OnPost()
    {
        // 'Order' is automatically bound from form data
        if (!ModelState.IsValid)
        {
            return Page(); // Re-render page with validation errors
        }
        // Process the order
        return RedirectToPage("./OrderConfirmation");
    }
}

public class OrderViewModel
{
    public int OrderId { get; set; }
    public string CustomerName { get; set; }
}
                

// Order.cshtml
<form method="post">
    <div class="form-group">
        <label asp-for="Order.CustomerName"></label>
        <input asp-for="Order.CustomerName" class="form-control" />
        <span asp-validation-for="Order.CustomerName" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Place Order</button>
</form>
                

Binding Collections

Similar to MVC, Razor Pages can bind to collections using `[BindProperty]` and appropriate form naming conventions.

// Products.cshtml.cs
public class ProductsModel : PageModel
{
    [BindProperty]
    public List<ProductItem> Products { get; set; }

    public void OnGet()
    {
        // Initialize list for GET request
        Products = new List<ProductItem>
        {
            new ProductItem { Id = 1, Name = "Gadget A", Price = 19.99m },
            new ProductItem { Id = 2, Name = "Widget B", Price = 25.50m }
        };
    }

    public IActionResult OnPost()
    {
        // 'Products' list is bound from form
        foreach (var product in Products)
        {
            // Update prices or other properties
        }
        return RedirectToPage("./ProductUpdateSuccess");
    }
}

public class ProductItem
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}
                

// Products.cshtml
<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.Products.Count; i++)
            {
                <tr>
                    <td>@Model.Products[i].Id</td>
                    <td>
                        <input asp-for="Products[@i].Name" class="form-control" />
                        <input type="hidden" asp-for="Products[@i].Id" />
                    </td>
                    <td>
                        <input asp-for="Products[@i].Price" type="number" step="0.01" class="form-control" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <button type="submit" class="btn btn-primary">Update Prices</button>
</form>
                

Advanced Binding Scenarios

ASP.NET Core provides attributes to explicitly control where model binders should retrieve data from.

Binding from Query String

Use [FromQuery] to explicitly bind from the query string.

public class SearchController : Controller
{
    public IActionResult Index([FromQuery] string query)
    {
        // 'query' is bound from ?query=your_search_term
        return Content($"Searching for: {query}");
    }
}
                

Binding from Route Data

Route data (from the URL path) is bound by default, but you can be explicit with [FromRoute].

[Route("api/[controller]/{productId}")]
public class ProductsApiController : Controller
{
    public IActionResult GetProduct([FromRoute] int productId)
    {
        // 'productId' is bound from the URL segment
        return Ok($"Product ID: {productId}");
    }
}
                

Binding from Form

Use [FromForm] to explicitly bind from form data (POST requests).

public class FeedbackController : Controller
{
    [HttpPost]
    public IActionResult Submit([FromForm] string comment)
    {
        // 'comment' is bound from form data
        return Content($"Received feedback: {comment}");
    }
}
                

Binding from HTTP Headers

Use [FromHeader] to bind values from HTTP request headers.

public class InfoController : Controller
{
    public IActionResult GetUserAgent([FromHeader(Name = "User-Agent")] string userAgent)
    {
        // 'userAgent' is bound from the User-Agent header
        return Content($"Your User Agent: {userAgent}");
    }
}
                

Custom Model Binders

For complex or non-standard binding scenarios, you can create custom model binders by implementing IModelBinder.

Best Practices

• Be Explicit: While ASP.NET Core is intelligent, using attributes like [FromQuery], [FromForm], and [BindProperty] makes your code clearer and less prone to errors.
• Use ViewModels: Always use dedicated ViewModel classes for your views. This decouples your UI from your domain models and allows for specific data shaping and validation.
• Validation is Key: Implement data validation using Data Annotations (e.g., [Required], [StringLength]) and leverage ModelState.IsValid to ensure data integrity.
• Embrace Tag Helpers: For Razor Pages and MVC views, Tag Helpers (like <input asp-for="...">) automate the binding and rendering of form elements, reducing boilerplate code.
• Keep Handlers Focused: In Razor Pages, ensure your `OnGet`, `OnPost`, etc., methods are concise and focused on their specific tasks.