MCAL25 – Advanced Web Technologies (AWT Lab)
Module 6: ASP.NET Core MVC Framework
Practical No: 39 Right Click on project->add->new Item ->
Aim:- Build websites to demonstrate the working of
entity framework
1. Create a new project
Select SQL Server Database
2. Select MVC and click on Create
Give the name ABC.mdf
Click on add
Double click on ABC.mdf
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
In server explorer Right click on ABC.mdf->new
Query->Write Query to create table (table should
contain Primary key compulsory)
CREATE TABLE [dbo].[product] ( Click on next
[pid] INT NOT NULL,
[pname] VARCHAR (100) NULL,
[pcost] VARCHAR (100) NULL,
PRIMARY KEY CLUSTERED ([pid] ASC)
);
Right click on project -> add -> new item
Click on next
Expand table -> expand dbo -> select table
Click on add
Click on Finish
It will auto generate code – Model1.edmx – Expand
Model1.edmx – Expand Model1.tt -> it will contain
product.cs
Click on next
Right click on Controller->add->Controller
Select MVC5 Controller with views, using Entity
Framework
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
Click on add select the displayed items from
dropdown list
Expand View Products -> Index.cshtml-> Run
project
Click on add (If any error re build project then add
controller)
Output:
It will auto generate code for productsController.cs
and also generate views for product.
Click on create new
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
using System.Web;
using System.Web.Mvc;
using Prac40.Models;
namespace Prac40.Controllers
{
public class BooksController : Controller
{
public ActionResult Index()
{
var books = new List<Book>
{
new Book { Id= 1,Title= "To Kill a Mockingbird" , Author=
"Harper Lee", Genre= "Fiction", Year= 1960 },
new Book { Id= 2, Title= "1984", Author= "George Orwell" ,
Genre= "Dystopian", Year= 1949 },
new Book { Id= 3, Title= "Pride and Prejudice" , Author=
"Jane Austen", Genre= "Romance", Year= 1813 }
};
return View(books);
}
}
}
Practical No: 40 In View/Books create
Aim: Create an simple ASP.NET Core MVC index.cshtml
application with models, views, and controllers to @{
display book info Layout = null;
}
Code:
<!DOCTYPE html>
In model make
<html>
Book.cs <head>
<meta name="viewport" content="width=device-width" />
using System; <title></title>
using System.Collections.Generic; </head>
using System.Linq; <body>
using System.Web; <div>
@model List<Prac40.Models.Book>
namespace Prac40.Models <h2> Book List</h2>
{ <table class="table table-bordered">
public class Book <thead>
{ <tr>
public int Id { get; set; } <th>Title</th>
public string Title { get; set; } <th>Author</th>
public string Author { get; set; } <th>Genre</th>
public string Genre { get; set; } <th>Year</th>
public int Year { get; set; } </tr>
} </thead>
} <tbody>
@foreach (var book in Model)
In Contollers folder create file with name {
<tr>
BooksController.cs <td>@book.Title</td>
<td>@book.Author</td>
using System;
<td>@book.Genre</td>
using System.Collections.Generic;
<td>@book.Year</td>
using System.Linq;
</tr>
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
} using System.Collections.Generic;
</tbody> using System.Linq;
</table> using System.Web;
</div> using System.Web.Mvc;
</body>
</html> namespace Prac41.Controllers
Output: {
public class UserController : Controller
{
public ActionResult Create()
{
return View();
}
[HttpPost]
public ActionResult Create(UserFormModel model)
{
if (ModelState.IsValid)
{
return RedirectToAction("Success");
Practical No: 41 }
Aim: Design a form with data annotations for return View(model);
validation and display appropriate error messages. }
Code: public ActionResult Success()
In models create file {
UserFormModel.cs return View();
}
using System;
}
using System.Collections.Generic;
using System.Linq;
}
using System.Web;
using System.ComponentModel.DataAnnotations; In View/User create
namespace Prac41.Models
Create.cshtml
@{
{
Layout = null;
public class UserFormModel
{ }
[Required(ErrorMessage = "Name is required.")]
[StringLength(100, ErrorMessage = "Name can't be longer than <!DOCTYPE html>
100 characters.")]
public string Name { get; set; } <html>
<head>
[Required(ErrorMessage = "Email is required.")] <meta name="viewport" content="width=device-width" />
[EmailAddress(ErrorMessage = "Enter a valid email.")] <title></title>
public string Email { get; set; } </head>
<body>
[Required(ErrorMessage = "Age is required.")] <div>
[Range(18, 100, ErrorMessage = "Age must be between 18 and @model Prac41.Models.UserFormModel
100.")] <h2>User Form</h2>
public int Age { get; set; } @using (Html.BeginForm())
{
@Html.AntiForgeryToken()
}
}
<div>
@Html.LabelFor(m => m.Name)
In Contollers folder create file with name @Html.TextBoxFor(m => m.Name)
@Html.ValidationMessageFor(m => m.Name, "", new {
UserController.cs @class = "text-danger" })
using Prac41.Models; </div>
using System;
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
<div>
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email, "", new {
@class = "text-danger" })
</div>
<div>
@Html.LabelFor(m => m.Age)
@Html.TextBoxFor(m => m.Age)
@Html.ValidationMessageFor(m => m.Age, "", new {
@class = "text-danger" })
</div>
<button type="submit">Submit</button>
}
@section Scripts { Practical No: 42
@Scripts.Render("~/bundles/jqueryval")
} Aim: Implement CRUD operations using Entity
</div> Framework Code-First approach for emp data.
</body>
</html> Code:
Success.cshtml Install Entity Framework (if not already
@{
installed):
Layout = null;
} Open Package manager console and type
Install-Package EntityFramework
<!DOCTYPE html> In model add file
Employee.cs
<html>
using System;
<head>
using System.Collections.Generic;
<meta name="viewport" content="width=device-width" />
using System.Linq;
<title></title>
using System.Web;
</head>
using System.ComponentModel.DataAnnotations;
<body>
namespace EmpCRUDApp.Models
<div>
{
<h2>Form submitted successfully!</h2>
public class Employee
</div>
{
</body>
[Key]
</html>
public int EmpId { get; set; }
In App_Start folder open [Required]
BundleConfig.cs [StringLength(100)]
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( public string Name { get; set; }
"~/Scripts/jquery.validate*"));
[Required]
In View/Web.config (under <configuration>): public string Department { get; set; }
<appSettings>
[Required]
<add key="ClientValidationEnabled" value="true" /> [Range(10000, 100000)]
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> public decimal Salary { get; set; }
</appSettings>
}
Output: }
EmpDbContext.cs
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace EmpCRUDApp.Models
{
public class EmpDbContext : DbContext
{
public DbSet<Employee> Employees { get; set; }
public EmpDbContext() : base("DefaultConnection") { }
}
Open Web.config in Views folder
Add under <configuration><connectionStrings>:
CopyEdit
<connectionStrings>
<add name="DefaultConnection"
connectionString="Data
Source=(localdb)\MSSQLLocalDB;Initial
Catalog=EmpDb;Integrated Security=True;"
providerName="System.Data.SqlClient" />
</connectionStrings>
Open Package Manager Console
Run:
Enable-Migrations
Add-Migration InitialCreate
Update-Database
In Controller folder make file
1. Right-click the Controllers folder → Add >
Controller
2. Choose MVC 5 Controller with views, using
Entity Framework
3. Select:
o Model class: Employee
o Data context class: EmpDbContext
4. Click Add Practical No: 43
Output: Aim: Design a web page to Create partial views
https://localhost:44333/Employees Code:
In the Models folder:
Employee.cs
using System;
using System.Collections.Generic;
Name: Arif Shaikh Roll No. 39
MCAL25 – Advanced Web Technologies (AWT Lab)
using System.Linq; <div class="form-group">
using System.Web; @Html.LabelFor(m => m.Name)
using System.ComponentModel.DataAnnotations; @Html.TextBoxFor(m => m.Name, new { @class = "form-
control" })
namespace PartialViewDemo.Models </div>
{
public class Employee <div class="form-group">
{ @Html.LabelFor(m => m.Department)
[Key] @Html.TextBoxFor(m => m.Department, new { @class =
public int EmpId { get; set; } "form-control" })
</div>
[Required]
public string Name { get; set; } <div class="form-group">
@Html.LabelFor(m => m.Salary)
public string Department { get; set; } @Html.TextBoxFor(m => m.Salary, new { @class = "form-
control" })
public decimal Salary { get; set; } </div>
} </div>
} In View/Create.cshtml
@model PartialViewDemo.Models.Employee
In the Controllers folder:
EmployeeController.cs <h2>Create Employee</h2>
using System;
using System.Collections.Generic; @using (Html.BeginForm())
using System.Linq; {
using System.Web; @Html.AntiForgeryToken()
using System.Web.Mvc;
using PartialViewDemo.Models; @Html.Partial("_EmployeeForm", Model)
<button type="submit" class="btn btn-primary">Save</button>
namespace PartialViewDemo.Controllers }
{
public class EmployeeController : Controller @if (ViewBag.Message != null)
{ {
public ActionResult Create() <div class="alert alert-success">@ViewBag.Message</div>
{ }
return View();
}
Output:
[HttpPost]
public ActionResult Create(Employee emp)
{
if (ModelState.IsValid)
{
// Save logic here (to DB or memory)
ViewBag.Message = "Employee created!";
ModelState.Clear();
}
return View();
}
}
}
In View/_EmployeeForm.cshtml
@model PartialViewDemo.Models.Employee
<div>
Name: Arif Shaikh Roll No. 39
