Sunday, 28 August 2016

CRUD operations in ASP.NET Core 1.0 MVC Application Part 1

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 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 reference to “WebApplicationCore.NetCore.Model” because we are going to use Contact Model Class in 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 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 name space of Model. So we can access Contact Model without 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 therefor we are declaring model type on start of view as @model Contact.
  • We can directly write value of a native type by using @Model.FieldMame, where @Model refers to model object passed to view and  and FieldName refers to any filed of that object.
  • Although we can use views with different name, even from different folder, yet by default view folder name should be similar to Controller name without Controller suffix. And Views must have 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 application in debugging mode.
  • It will show Home Page in browser.
  • Type http://localhost:21840/Contact/GetContact/1 in address bar of browser and it will show Contact details of contact with Id 1.
  • Type http://localhost:21840/Contact/GetContact/2 in address bar of 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

CRUD operations in ASP.NET Core 1.0 MVC Application Part 1
CRUD operations in ASP.NET Core 1.0 MVC Application Part 2
CRUD operations in ASP.NET Core 1.0 MVC Application Part 3
CRUD operations in ASP.NET Core 1.0 MVC Application Part 4
CRUD operations in ASP.NET Core 1.0 MVC Application Part 5
CRUD operations in ASP.NET Core 1.0 MVC Application Part 6
CRUD operations in ASP.NET Core 1.0 MVC Application Part 7 
CRUD operations in ASP.NET Core 1.0 MVC Application Part 8

3 comments:

  1. It looks like a great article. However, the link for the sample source code doesn't work.

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete