TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

ASP.Net Web Form Model Binding

ASP.Net Web Form Model Binding with asp.net tutorial, asp.net introduction, features, project, example, server controls, labels, textbox, button, hyperlink, radiobutton, calender, checkbox, fileupload, events handling, authentication, webforms model binding, html server control, compare validdator, range validator, validation summary, mvc introduction, mvc project, view, validation, entity framework, authentication etc.

<< Back to ASP

ASP.NET Web Forms Model Binding

This topic explains How to work with data using Model Binding and Web Forms. Model binding makes data interaction more straight-forward than dealing with data source objects such as ObjectDataSource or SqlDataSource.

In this tutorial, we will use Entity Framework for data and GridView to display data on the web page. Here, we are creating an example that includes the following steps.

  1. Create an ASP.NET Web Application
    2. ASP Model building 1
  2. Select Template

    3. Select Template as Web Forms and change authentication as individual user account.

    ASP Model building 2
  3. Create a Master Page

    4. Create a new web form with master page template. We will use this master page to display Model data.

    ASP Model building 3
  4. Create a Data Model and Database

    5. We will use Code First Migrations to create objects and the corresponding database tables. These tables will store information about the students and their courses.

    Create a new model class in Model folder.

// StudentModels.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;
namespace ModelBindingDemo.Models
{
public class SchoolContextDemo : DbContext
    {
public DbSet<Student> Students { get; set; }
public DbSet<Enrollment> Enrollments { get; set; }
public DbSet<Course> Courses { get; set; }
    }
public class Student
    {
        [Key, Display(Name = "Email ID")]
        [ScaffoldColumn(false)]
public int StudentID { get; set; }
        [Required, StringLength(40), Display(Name = "Last Name")]
public string LastName { get; set; }
        [Required, StringLength(20), Display(Name = "First Name")]
public string FirstName { get; set; }
        [Required, StringLength(50), Display(Name = "Email ID")]
public string Email { get; set; }
        [EnumDataType(typeof(AcademicYear)), Display(Name = "Academic Year")]
public AcademicYear Year { get; set; }
public virtual ICollection<Enrollment> Enrollments { get; set; }
    }
public class Enrollment
    {
        [Key]
public int EnrollmentID { get; set; }
public int CourseID { get; set; }
public int StudentID { get; set; }
public decimal? Grade { get; set; }
public virtualCourse Course { get; set; }
public virtualStudent Student { get; set; }
    }
public class Course
    {
        [Key]
public int CourseID { get; set; }
public string Title { get; set; }
public int Credits { get; set; }
public virtual ICollection<Enrollment> Enrollments { get; set; }
    }
public enum AcademicYear
    {
        Freshman,
        Sophomore,
        Junior,
        Senior
    }
}

The SchoolContextDemo class derives from DbContext, which manages the database connection and changes in the data.

We will use the tools for Code First Migrations to set up a database based on these classes. Open Package Manager Console from the menu bar by following view->other windows-> Package Manager Console.

It will prompt a screen at bottom of the Visual Studio IDE. We need to execute the following command in this console.

enable-migrations -Force -ContextTypeName ModelBindingDemo.Models.SchoolContextDemo

After executing the above command, it produces the following output.

ASP Model building 4

After that a new file named Configuration.cs has been created. This file is automatically opened after it is created. This class contains a Seed method that enables us to pre-populate the database tables with test data.

  • Add Test data in Configuration file

    • Here, we will add some data to the configuration file that we can show to the user at web page. After adding data into the file, our Configuration.cs file looks like this:

    // Configuration.cs

    namespace ModelBindingDemo.Migrations
{
using System;
using System.Data.Entity;
using System.Data.Entity.Migrations;
using System.Linq;
using ModelBindingDemo.Models;
internal sealed class Configuration : DbMigrationsConfiguration<ModelBindingDemo.Models.SchoolContextDemo>
    {
public Configuration()
        {
            AutomaticMigrationsEnabled = false;
        }
protected override void Seed(ModelBindingDemo.Models.SchoolContextDemo context)
        {
            context.Students.AddOrUpdate(
new Student
                 {
                     FirstName = "M. Irfan",
                     LastName = "Khan",
                     Email = "irfan@example.com",
                     Year = AcademicYear.Freshman
                 },
new Student
                 {
                     FirstName = "Arvind",
                     LastName = "Kumar",
                     Email = "Arvind@example.com",
                     Year = AcademicYear.Freshman
                 },
new Student
                 {
                     FirstName = "Arturo",
                     LastName = "Anand",
                     Email = "Anand@example.com",
                     Year = AcademicYear.Sophomore
                 },
new Student
                 {
                     FirstName = "Moris",
                     LastName = "Mano",
                     Email = "moris@example.com",
                     Year = AcademicYear.Sophomore
                 },
new Student
                 {
                     FirstName = "Roman",
                     LastName = "Sigh",
                     Email = "roman@example.com",
                     Year = AcademicYear.Junior
                 },
new Student
                 {
                     FirstName = "Jimmi",
                     LastName = "Seth",
                     Email = "jimmi@example.com",
                     Year = AcademicYear.Junior
                 },
new Student
                 {
                     FirstName = "Shayam",
                     LastName = "Rana",
                     Email = "Shayam@example.com",
                     Year = AcademicYear.Senior
                 },
new Student
                 {
                     FirstName = "Jecub",
                     LastName = "Cunto",
                     Email = "Nino@example.com",
                     Year = AcademicYear.Senior
                 }
                 );
         context.SaveChanges();
            context.Courses.AddOrUpdate(
new Course { Title = "Chemistry", Credits = 3 },
new Course { Title = "Microeconomics", Credits = 3 },
new Course { Title = "Macroeconomics", Credits = 3 },
new Course { Title = "Calculus", Credits = 4 },
new Course { Title = "Trigonometry", Credits = 4 },
new Course { Title = "Composition", Credits = 3 },
new Course { Title = "Literature", Credits = 4 }
                );
         context.SaveChanges();
            context.Enrollments.AddOrUpdate(
new Enrollment { StudentID = 1, CourseID = 1, Grade = 1 },
new Enrollment { StudentID = 1, CourseID = 2, Grade = 3 },
new Enrollment { StudentID = 1, CourseID = 3, Grade = 1 },
new Enrollment { StudentID = 2, CourseID = 4, Grade = 2 },
new Enrollment { StudentID = 2, CourseID = 5, Grade = 4 },
new Enrollment { StudentID = 2, CourseID = 6, Grade = 4 },
new Enrollment { StudentID = 3, CourseID = 1 },
new Enrollment { StudentID = 4, CourseID = 1 },
new Enrollment { StudentID = 4, CourseID = 2, Grade = 4 },
new Enrollment { StudentID = 5, CourseID = 3, Grade = 3 },
new Enrollment { StudentID = 6, CourseID = 4 },
new Enrollment { StudentID = 7, CourseID = 5, Grade = 2 }
                );
         context.SaveChanges();
        }
    }
}

    After that, in the Package Manager Console, run the following commands.

    PM> add-migration initial

    And 

    PM> update-database
    ASP Model building 5

    Now, a database has been created and added to the project under App_Data folder.

  • Display Data

    • Now, let's display the data to the web page from the database we created. We will use GridView control to display the data in grid form. The Student.aspx file looks like this:

    // Student.aspx

    <%@PageTitle="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
CodeBehind="Students.aspx.cs" Inherits="ModelBindingDemo.Students" %>
<asp:ContentID="Content1"ContentPlaceHolderID="MainContent"runat="server">
<asp:GridViewrunat="server"ID="studentsGrid"
ItemType="ModelBindingDemo.Models.Student"DataKeyNames="StudentID"
SelectMethod="studentsGrid_GetData"
AutoGenerateColumns="false">
<Columns>
<asp:DynamicFieldDataField="StudentID"/>
<asp:DynamicFieldDataField="FirstName"/>
<asp:DynamicFieldDataField="LastName"/>
<asp:DynamicFieldDataField="Email"/>
</Columns>
</asp:GridView>
</asp:Content>

    Code Behind

    // Student.aspx.cs

    using System;
using System.Collections.Generic;
using System.Linq;
using ModelBindingDemo.Models;
using System.Data.Entity;
namespace ModelBindingDemo
{
public partial class Students : System.Web.UI.Page
    {
protected void Page_Load(object sender, EventArgs e)
        {
        }
public IQueryable<Student> studentsGrid_GetData()
        {
SchoolContextDemo db = newSchoolContextDemo();
var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
return query;
        }
    }
}

    Finally our project looks like the following.

    ASP Model building 6

    Output:

    Run Student.aspx file as view in browser and it will produce the following output.

    ASP Model building 7
    Next TopicASP.NET HTML Server Controls




    Related Links:

    .Net

    .NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

    Java

    Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

    Related Links

    Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf