Let’s create Get Details page with our first custom Model, View, and Controller. We are going to add new controller ContactController and its GetContact action method will display details of specified contact. We are going to use ASP.NET Core MVC Application from the previous discussion Welcome to ASP.NET Core 1.0 MVC. We have not discussed database connectivity yet, so we are going to use a data mockup Model through static Contact List.


Create Data Model Project

  • Open existing Solution in Visual Studio 2015.
  • Now add new Client Library .NET Core project in Solution.
    • Open Add New Project Screen through Solution Context Menu >> Add >> New Project Or File >> New >> Project.
    • Select Class Library (.NET Core) Template through Installed >> Templates >> Visual C# >> .NET Core.
    • Name project as “WebApplicationCore.NetCore.Model”.
    • Set suitable location as “C:\ASP.NET Core\Welcome To .NET Core 1.0\ ASP.NET Core” (selected by default to solution root).
    • Click OK Button.
  • It will create a new class library project.
  • Rename Class1 as Contact and add required properties.
public class Contact
{
 public Contact()
 {
 }
 public int ContactId { get; set; }
 public string Name { get; set; }
 public string Address1 { get; set; }
 public string Address2 { get; set; }
 public string City { get; set; }
 public string ProvinceState { get; set; }
 public string ZipPostalCode { get; set; }
 public string Country { get; set; }
 public string ContactNumber { get; set; }
 public string Email { get; set; }
 public string WebSite { get; set; }
 }


Create Business Logic Project

  • Now add new Client Library .NET Core project in Solution.
    • Open Add New Project Screen through Solution Context Menu >> Add >> New Project Or File >> New >> Project.
    • Select Class Library (.NET Core) through Installed >> Templates >> Visual C# >> .NET Core.
    • Name project as “WebApplicationCore.NetCore.BusinessLogic”.
    • Set suitable location as “C:\ASP.NET Core\Welcome To .NET Core 1.0\ ASP.NET Core” (selected by default to solution root).
    • Click OK Button.
  • It will create a new class library project.
  • Add a reference to “WebApplicationCore.NetCore.Model” because we are going to use Contact Model Class in the project.
    • Open WebApplicationCore.NetCore. BusinessLogic References >> Add References >> Reference Manager Screen >> Projects >> Solution >> Select WebApplicationCore.NetCore.Model.
    • Click OK Button.
  • Rename Class1 as ContactBusinessLogic and add method implementation for GetContact.
public class ContactBusinessLogic
{
 private static List<Contact> Contacts { get; set; } = new List<Contact>
 {
 new Contact { ContactId = 1, Name = "Imran Javed Zia", Address1 = "Street 1", Address2= string.Empty, City = "Lahore", ProvinceState = "Punjab", Country = "Pakistan", ZipPostalCode="12345", ContactNumber="+92123456789", Email="imran.javed@ijz.today", WebSite="http://www.ijz.today" },
 new Contact { ContactId = 2, Name = "Person Test", Address1 = "Street Test 1", Address2= "Test Address 2", City = "New York", ProvinceState = "NY", Country = "USA", ZipPostalCode="10000", ContactNumber="+1123456789", Email="person.test@abc.com", WebSite="http://abc.com" },
 new Contact { ContactId = 3, Name = "Test Person", Address1 = "Street Test 1", Address2= "Test Address 2", City = "Dallas", ProvinceState = "NY", Country = "USA", ZipPostalCode="75201", ContactNumber="+1987654321", Email="test.person@test.com", WebSite=string.Empty }
 };
 public ContactBusinessLogic()
 {
 }
 public Contact GetContact(int contactId)
 {
 return ContactBusinessLogic.Contacts.FirstOrDefault(c => c.ContactId == contactId);
 }
}


Add Reference to WebApplicationCore.NetCore.BusinessLogic in WebApplicationCore.NetCore

  • Add reference WebApplicationCore.NetCore.BusinessLogic in WebApplicationCore.NetCore project.
    • Open Reference Manager Screen through WebApplicationCore.NetCore References Context Menu >> Add References.
    • Now in Reference Manager Screen >> Projects >> Solution >> Select WebApplicationCore.NetCore. BusinessLogic.
    • Click OK Button.
  • It will add reference to WebApplicationCore.NetCore.BusinessLogic along with WebApplicationCore.NetCore.Model


Add Contact Controller

  • Add new Controller.
    • Open Add New Item Screen through Solution Context Menu of Controller >> Add >> New Item >> Installed >> .NET Core >> MVC Controller Class.
    • Name it ContactController.cs.
    • Click OK Button.
  • It will add a new controller in Controller Folder.
  • Add GetContact Action Method implementations.
  • It is important to note that Home controller is default controller and Index method is treated as a default method. So if we do not specify any controller in query string then Home controller is called similarly if action method is skipped in query string then Index method will be called. This behavior is defined in Route. We will discuss Routing in detail n future. 
public class ContactController : Controller
 {
 // GET: /<controller>/
 public IActionResult Index()
 {
 return View();
 }
 public IActionResult GetContact(int id)
 {
 ContactBusinessLogic contactBL = new ContactBusinessLogic();
 Contact contact = contactBL.GetContact(id);
 return View(contact);
 }
 }


Add Contact GetContact View

  • Change _ViewImports.cshtml by including namespace of Model. So we can access Contact Model without a fully qualified name.
  • Add new Contact folder in View folder.
    • Open Context Menu of View >> Add >> New Folder.
    • Name it Contact.
  • Add new View.
    • Open Add New Item Screen through Solution Context Menu of Contact >> Add >> New Item >> Installed >> .NET Core >> MVC View Page.
    • Name it GetContact.cshtml.
    • Click OK Button.
  • It will add a new view in Contact Folder.
  • Change GetContact view implementations.
  • We are using Strongly Typed Views therefore, we are declaring model type on the start of view as @model Contact.
  • We can directly write a value of a native type by using @Model.FieldMame, where @Model refers to a model object passed to view and FieldName refers to any filed of that object.
  • Although we can use views with the different name, even from the different folder, yet by default view folder name should be similar to Controller name without Controller suffix. And Views must have the same name as of related action method for default mapping. We will discuss views and its types in detail in future discussions.
@model Contact
 <h2>Contact</h2>
 <div>
 <dl class="dl-horizontal">
 <dt>
 Name
 </dt>
 <dd>
 @Model.Name
 </dd>
 <dt>
 Address1
 </dt>
 <dd>
 @Model.Address1
 </dd>
 <dt>
 Address2
 </dt>
 <dd>
 @Model.Address2
 </dd>
 <dt>
 City
 </dt>
 <dd>
 @Model.City
 </dd>
 <dt>
 ProvinceState
 </dt>
 <dd>
 @Model.ProvinceState
 </dd>
 <dt>
 ZipPostalCode
 </dt>
 <dd>
 @Model.ZipPostalCode
 </dd>
 <dt>
 Country
 </dt>
 <dd>
 @Model.Country
 </dd>
 <dt>
 ContactNumber
 </dt>
 <dd>
 @Model.ContactNumber
 </dd>
 <dt>
 Email
 </dt>
 <dd>
 @Model.Email
 </dd>
 <dt>
 WebSite
 </dt>
 <dd>
 @Model.WebSite
 </dd>
 </dl>
 </div>


Run Application in Debug Mode

  • Press F5 or Debug Menu >> Start Debugging or Start IIS Express Button on Toolbar to start an application in debugging mode.
  • It will show Home Page in the browser.
  • Type http://localhost:21840/Contact/GetContact/1 in the address bar of the browser and it will show Contact details of contact with Id 1.
  • Type http://localhost:21840/Contact/GetContact/2 in the address bar of the browser and it will show Contact details of contact with Id 2.


Sample Source Code


We have placed sample code for this session in "CRUD operations in ASP.NET Core 1.0 MVC Application Part 1_Code.zip" in https://aspdotnetcore.codeplex.com/SourceControl/latest CodePlex repository.


CRUD Operations in AP.NET Core 1.0 All Parts