ASP.NET MVC Archives - Page 2 of 3

Restful Web Services C# – ASP.NET Web API

4th November 2017 Regie Baquero ASP.NET MVC, BLOG

ASP.NET Web API – In my previous blog ASP.NET Web Application using MVC I have created a simple project that explains how to create Restful Web Services(WEB API) using MVC default route. By this time I will create another project that will show you how to create ASP.NET API using API Controller class. This is the standard flow on creating API project in ASP.NET.

Let’s Start:

Step 1. First, open your visual studio and create new Project.

New Project

Step 2. Name your Project to your preference. In my case I name it as myRestAPI. Then press “OK”.

Name Project

Step 3. Select Empty from your template window shown below and check Web API from the checkbox below template option.

Select Empty Template

This is how your solution explorer looks for an Empty template project

Solution explorer

Step 4. Now add Web API Controller class inside your Controllers folder. To add right click on your Controller folder, select Add then choose New Item.

Add Web API Controller Class

Step 5. From the New Item window search for Web API Controller Class(v2) . Name your class controller then press Add.

Name Web API Controller

The image below is the API Controller Default route:

Web API URL Default Route

Step 6. Before we proceed with this file (MyAPController) let’s create an additional class inside Model folder. This will be used as a model to create our sample data later. To add, right click on your Model folder select Add then choose New Item.

Add Model Class

Step 7. Name your model. In my case, I name it as myModel.

Name Your Model

Step 8. Open myModel class then declare properties below.

        public int Id { get; set; }
        public string Name { get; set; }
        public string  LastName { get; set; }
        public string Number { get; set; }

public int Id { get; set; }

public string Name { get; set; }

public string LastName { get; set; }

public string Number { get; set; }

Step 9. Open MyAPIController inside your Controller folder. If you name your API Controller same as mine you can copy and replace your code with the code below. If not manually create the method from the code below.

Method:

GetList() >> Return all data we created with our model.
GetName(int id) >> Return specific data by id.
Model >> Dummy list we create base on our myModel class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MyRestAPI.Models;

namespace MyRestAPI.Controllers
{
    public class myAPIController : ApiController
    {
        myModel[] model = new myModel[]
            {
            new myModel {Id=1,Name="Regie",LastName="Baquero",Number="12345"},
            new myModel {Id =2,Name="Regie",LastName="Baquero",Number="12345" },
            new myModel { Id = 3,Name="Regie",LastName="Baquero",Number="12345" }
            };

        public IEnumerable&lt;myModel&gt; GetList()
        {
            return model;
        }

        public List&lt;myModel&gt; GetName(int id)
        {
            List&lt;myModel&gt; list = new List&lt;myModel&gt;();
            var name = model.FirstOrDefault(m =&gt; m.Id == id);  //Select data we which id is equal to id       

        if (name == null)
            {
                return list; //if null return empty list.
            }

            list.Add(new myModel  //if not equal to null return list
            {
                Id = name.Id,
                Name = name.Name,
                LastName = name.LastName,
                Number = name.Number
            });

            return list;
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using MyRestAPI.Models;

namespace MyRestAPI.Controllers

{

public class myAPIController : ApiController

{

myModel[] model = new myModel[]

{

new myModel {Id=1,Name="Regie",LastName="Baquero",Number="12345"},

new myModel {Id =2,Name="Regie",LastName="Baquero",Number="12345" },

new myModel { Id = 3,Name="Regie",LastName="Baquero",Number="12345" }

};

public IEnumerable<myModel> GetList()

{

return model;

}

public List<myModel> GetName(int id)

{

List<myModel> list = new List<myModel>();

var name = model.FirstOrDefault(m => m.Id == id); //Select data we which id is equal to id

if (name == null)

{

return list; //if null return empty list.

}

list.Add(new myModel //if not equal to null return list

{

Id = name.Id,

Name = name.Name,

LastName = name.LastName,

Number = name.Number

});

return list;

}

Solution Explorer Overview – Restful Web Services

WebApiConfig >> contains default url route for Api Controller
myAPIController >> Api controller that contains our method
myModel >> Contains model data properties.

Solution Explorer

Step 10. To access GetList(). Run your project and navigate to this URL localhost:7831/api/myAPI

GetList()

Step 11. To access GetName(int id) >> localhost:7831/api/myAPI/GetName?id=1

GetName()

Code Summary:

MyAPIController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MyRestAPI.Models;

namespace MyRestAPI.Controllers
{
  public class myAPIController : ApiController
   {
     myModel[] model = new myModel[] 
      { 
        new myModel {Id=1,Name="Regie",LastName="Baquero",Number="12345"}, 
        new myModel {Id =2,Name="Regie",LastName="Baquero",Number="12345" }, 
        new myModel { Id = 3,Name="Regie",LastName="Baquero",Number="12345" } 
      };

  public IEnumerable&lt;myModel&gt; GetList()
   {
     return model;
   }

  public List&lt;myModel&gt; GetName(int id)
   {
     List&lt;myModel&gt; list = new List&lt;myModel&gt;();
     var name = model.FirstOrDefault(m =&gt; m.Id == id);
     if (name == null)
       {
        return list;
       }
     list.Add(new myModel
      {
        Id = name.Id,
        Name = name.Name,
        LastName = name.LastName,
        Number = name.Number
      });

    return list;
  }

 }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using MyRestAPI.Models;

namespace MyRestAPI.Controllers

{

public class myAPIController : ApiController

{

myModel[] model = new myModel[]

{

new myModel {Id=1,Name="Regie",LastName="Baquero",Number="12345"},

new myModel {Id =2,Name="Regie",LastName="Baquero",Number="12345" },

new myModel { Id = 3,Name="Regie",LastName="Baquero",Number="12345" }

};

public IEnumerable<myModel> GetList()

{

return model;

}

public List<myModel> GetName(int id)

{

List<myModel> list = new List<myModel>();

var name = model.FirstOrDefault(m => m.Id == id);

if (name == null)

{

return list;

}

list.Add(new myModel

{

Id = name.Id,

Name = name.Name,

LastName = name.LastName,

Number = name.Number

});

return list;

}

myModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyRestAPI.Models
 {
  public class myModel
   {
     public int Id { get; set; }
     public string Name { get; set; }
     public string LastName { get; set; }
     public string Number { get; set; }
   }
 }

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MyRestAPI.Models

{

public class myModel

{

public int Id { get; set; }

public string Name { get; set; }

public string LastName { get; set; }

public string Number { get; set; }

}

From this moment you have now your own ASP.NET Web API. Thank you for reading.

Happy coding!!

Post you may like:

[pt_view id=”2384ae03it”]

Leave a comment MVC, Web API, WEB API Controller

Restful Web Services Tutorial with ASP.NET MVC

2nd November 2017 Regie Baquero ASP.NET MVC, BLOG

Restful Web Services Tutorial – From my previous Article on how to Create Web API in ASP.NET. We have created an API method that will return Hello + the name input by the user. Now in this article let’s consume that API using a client Application.

Let’s start: – Restful Web Services Tutorial

1. Create a new ASP.NET MVC Web Application Project.

To Create a new MVC project visit this thread How to Start with ASP.NET Web Application

Create New Project

2. I assume you have already created a project. Now we will use again the default Controller of MVC which is HomeController. Open HomeController by navigating to Solution explorer->Controller folder and open HomeController.

HomeController

3. From your Index function inside your HomeController, lets create additional code that will connect as to the API we created from the previous blogs ASP.NET WEB API using ASP.NET MVC.

Add below Code to your index.

using System.Net » For Webclient(). Which is use to connect to our Web API
using System.Data » For DataTable()
using Newtonsoft.Json » JSON
Viewbag.Name = response » dynamically share values from our controller to our view.
John » Parameter value. It could be anything you want to supply.

Code:

public ActionResult Index()
{
string url = "http://localhost:41480/Home/HelloWorld?name=" + "John";
using (var client = new WebClient())
{
string response = client.DownloadString(url);
ViewBag.Name = response;
}
return View();
}

public ActionResult Index()

{

string url = "http://localhost:41480/Home/HelloWorld?name=" + "John";

using (var client = new WebClient())

{

string response = client.DownloadString(url);

ViewBag.Name = response;

}

return View();

}

The image below is the screenshot of my HomeController code.

Home Controller Code

4. Now to display this in our view and to make it as simple as possible I use ViewBag Property to pass data to our view. Now navigate to your View (index.cshtml) under Views->Home folder and open index.cshtml.

Index.cshtml

5. Replace the code from your actual index.cshtml using the code shown in the image below. This display whatever we save to our ViewBag.Name Property.

Index.cshtml

6. Lastly, Run your project using f5 to run your project in debugging mode or CTRL + f5 to run project without debugging mode. This should output parameter name we declare in this code from our index() method in HomeController.

string url = “http://localhost:41480/Home/HelloWorld?name=” + “John”;

If we replace the name parameter John into Regie from the code above the output should now be Hello Regie. But because I use John in my code the image below shows Hello John output.

Note: Because we are using local project you need to run both API and client application to access both project. You can also publish your API in your local IIS read this thread How to Host ASP.NET Web App in IIS.

Output

That’s all we need in consuming Web API in ASP.NET.

Comments are greatly appreciated to improve my blog writing technique.

Thank you for reading. Happy Coding!

You might to want to revisit this blog Create Web API in ASP.NET.

Post you may like:

[pt_view id=”2384ae03it”]

One comment ASP.NET, MVC, Web API

Rest API Application – ASP.NET MVC

2nd November 2017 Regie Baquero ASP.NET MVC, BLOG

Rest API Application – ASP.NET WEB API is a framework that allows you to build an HTTP service. This service can be accessed online using HTTP requests. API’s can include all possible method that exposed data from a database. Like INSERT, SELECT, DELETE and UPDATE. And because API is an HTTP service its method is accessible using a URL.

Let’s take a look at a simple example below on the actual way on how the API is created and behave in .NET framework.

Let’s Start: – Rest API Application

Step 1. Open your visual studio and go to File->New->Project. A New Project dialog window will open.

Create new Project

Step 2. From the left pane of New Project window select Templates->Visual C# -> Web. Then from the middle pane select ASP.NET Web Application. And name your application, in my case I name it as SampleAPI. Click “OK” if you’re done.

New Project

Rest API Application

Step 3. Select a template. To make it simple we will use Web API with default MVC template. Choose Web API template and check MVC and Web API from checkbox right below you’re template option. See the image below.

Templates

Because we are using MVC template for this project your start page will look like a standard ASP.NET MVC Web Application. But we are not really after the view in this project. Method inside API’s is access directly using a URL. See image below.

Start View

The image below is the default Folder structure created in MVC Framework.

Folder Structure

Step 4. Now, after you have created a Web API project navigate to your solution explorer and open HomeController inside Controller folder. As I discussed from my previous blogs about MVC, HomeController is the default controller of MVC template in ASP.NET Web Application.

HomeController

Step 5. For simplicity and better understanding of this article we will create a simple method that will return name input by a user.

Ex. John => Hello John

I name the method HelloWorld() but instead of returning Hello world we will return Hello + the name input by the user. See image below for the code.

Hello World

Step 6. To access the method we just created run your project using f5 command for debugging mode. And use the URL shown in the image below to access the method.

URL format localhost:port#/ControllerName/MethodName?Parameter=value.
Value => Supplied in the client side application

If the user input Regie as the name parameter the output would be Hello Regie

localhost:41480/Home/HelloWorld?name=Regie

Output

Rest API Application

This might be a simple example but this will help you start your own WEB API Project. You can create additional method like connecting to your database and return a set of list or Update data from your database. This is all possible if you just know the concept of API’s.

To consume this API using ASP.NET MVC visit this thread Consume Web API using ASP.NET MVC

Thank you for reading. Happy Coding!!

Post you may like:

[pt_view id=”2384ae03it”]

ASP.NET MVC Entity Framework:Code First Approach

28th October 2017 Regie Baquero ASP.NET MVC, BLOG, featured

ASP.NET MVC Entity framework code first approach allows you to create classes and use entity framework to generate your Table base on your design class. It has similarity with the model first approach, however it does not generate edmx file. To determine their differences visit this blog Entity Framework Model first approach for the actual process on how the database is generated in this approach. To proceed with Code first approach below is the tutorial on how the database is generated in Code first approach.

Let’s start:

Note:

For creating a new project in ASP.NET MVC web application visit this thread How to start with mvc application.
For adding Entity framework to your project visit this thread Adding Entity framework using NuGet Package Manager
For ASP.NET default folder structure visit this thread ASP.NET MVC Folder structure.

1. I assume you have already created your project. Let’s proceed by adding class to our project. This will serve as our model so I prefer to put it inside Models folder. To add new item right click Models folder, choose Add then select Class. See image below for your guide.

Add new item

2. From Add new item window, name your class. In my case I name it as Employee_Listing.

Name your class

3. Copy the code below. This will serve as our model to be use by entity framework in generating our table design.

Code:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;

namespace CodeFirst_Approach.Models
 {
   public class Employee_Listing
   {
      public int Id { get; set; }
      public string Name { get; set; }
      public string Address { get; set; }
      public string Number { get; set; }
      public string gender { get; set; }
   }
 }

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace CodeFirst_Approach.Models

{

public class Employee_Listing

{

public int Id { get; set; }

public string Name { get; set; }

public string Address { get; set; }

public string Number { get; set; }

public string gender { get; set; }

}

4. Now add another class for the DBContext of entity framework. This binds our model to Entity Framework and generate database schema for our model class.

Employee_ListingDBContext

5.Open the file we just created and copy the code below.

Code:

 using System.Collections.Generic;
 using System.Data.Entity;
 using System.Linq;
 using System.Web;

 namespace CodeFirst_Approach.Models
 {
     public class Employee_ListingDBContext : DbContext
     {
        public DbSet&lt;Employee_Listing&gt; Employee_List { get; set; }
     }
 }

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;

namespace CodeFirst_Approach.Models

{

public class Employee_ListingDBContext : DbContext

{

public DbSet<Employee_Listing> Employee_List { get; set; }

}

6. The image below is the classes I created inside my Models folder.

Model Folder

7. In order for us to connect to the desired database where we want to create our table. We need to add connection string to our web config file. Open your web.config and find this line <connectionStrings></connectionString>. Inside this line insert your Database connection string.

Note:

Employee_ListingDBContext –> DBCOntext class we created earlier. This should be name as the class where you bind your model into Entity Framework.
(localdb)\Projects-> This is my local SQL Server .
providerName=”System.Data.SqlClient” –> specify your provider name.

Code:

 <connectionStrings>
 <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-CodeFirst_Approach-20171026025059.mdf;Initial Catalog=aspnet-CodeFirst_Approach-20171026025059;Integrated Security=True"
 providerName="System.Data.SqlClient" />

<strong><add name="Employee_ListingDBContext" connectionString="Data Source=(localdb)\Projects;Initial Catalog=Employee_Listing;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False" providerName="System.Data.SqlClient"/></strong>
 </connectionStrings>

<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\aspnet-CodeFirst_Approach-20171026025059.mdf;Initial Catalog=aspnet-CodeFirst_Approach-20171026025059;Integrated Security=True"

providerName="System.Data.SqlClient" />

</connectionStrings>

8. In order for me to execute the classes I made earlier I inserted a dummy data to the table and create a Table design in my Views. Open your HomeController.cs this is the default controller used to load the default view of your Web Application. See image below to locate file from your solution explorer.

Solution Explorer

9. Below are the codes I used in my HomeController. From my index function I call my Entity framework class which is Employee_ListingDBContext and added dummy data to my model to be inserted to my table. I also created a list variable with our table model design where I store the data I selected from our database table and pass it to my views where I populate the data to my HTML Table.

Code:

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using CodeFirst_Approach.Models;

 namespace CodeFirst_Approach.Controllers
 {
 public class HomeController : Controller
 {
   public ActionResult Index()
   {
    List&lt;Employee_Listing&gt; model = new List&lt;Employee_Listing&gt;();

    using (Employee_ListingDBContext context = new Employee_ListingDBContext())
    {
      Employee_Listing list = new Employee_Listing()
       {
          Name = "Regie S. Baquero",
          Address = "Cebu",
          Number = "12345",
          gender = "Male"
       };

    context.Employee_List.Add(list);
    context.SaveChanges();

    var val = context.Employee_List;

    model = val.ToList();

    }
    return View(model);
  }

 }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using CodeFirst_Approach.Models;

namespace CodeFirst_Approach.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

List<Employee_Listing> model = new List<Employee_Listing>();

using (Employee_ListingDBContext context = new Employee_ListingDBContext())

{

Employee_Listing list = new Employee_Listing()

{

Name = "Regie S. Baquero",

Address = "Cebu",

Number = "12345",

gender = "Male"

};

context.Employee_List.Add(list);

context.SaveChanges();

var val = context.Employee_List;

model = val.ToList();

}

return View(model);

}

10. Open your Index.cshtml file and copy the code below.To locate your index.cshtml navigate to Views->Home->index.cshtml or by simply right clicking anywhere inside your index function inside your HomeController and selecting Go To View option.

Go To View

From your view, copy and paste codes below. This will create a table and populate data from our controller.

Note:

@model IEnumerable<CodeFirst_Approach.Models.Employee_Listing> – Give as access to the model list we pass from our controller.
@ -> drop to C# code.

Code:

 @model IEnumerable<CodeFirst_Approach.Models.Employee_Listing>

@{
 ViewBag.Title = "Home Page";
 }

<br/>
 <br/>
 <div class="">
     <table class="table">
         <thead>
              <tr>
                   <th>Name</th>
                   <th>Address</th>
                   <th>Number</th>
                   <th>Gender</th>
              </tr>
        </thead>
        <tbody>
          @{
             foreach(var data in Model)
           {
             <tr>
                  <td>@data.Name</td>
                  <td>@data.Address</td>
                  <td>@data.Number</td>
                  <td>@data.gender</td>
             </tr>
           }
          }

      </tbody>
      </table>
 </div>

@model IEnumerable<CodeFirst_Approach.Models.Employee_Listing>

ViewBag.Title = "Home Page";

}

<br/>

<thead>

<tr>

<th>Address</th>

<th>Number</th>

<th>Gender</th>

</tr>

</thead>

<tbody>

foreach(var data in Model)

{

<tr>

<td>@data.Address</td>

<td>@data.Number</td>

<td>@data.gender</td>

</tr>

}

</tbody>

</table>

</div>

11. Lastly, run your application by pressing F5 to run project in debugging mode or CTRL + F5 to run project without debugging mode.

Project final output:

Final output

Post you may like:

[pt_view id=”2384ae03it”]

Leave a comment ASP.NET, Entity Framework, featured, MVC

How: Adding Entity Framework Reference using NuGet

27th October 2017 Regie Baquero ASP.NET MVC, BLOG, featured

If you have already added Entity Framework you might want to check this thread ASP.NET MVC using EF for actual using of Entity framework in your code. If this is your first time you can continue reading steps below on Adding Entity Framework.

Let’s Start: – Adding Entity Framework Reference

1. Open NuGet Package Manager to add EntityFramework. Go to Tools->NuGet Package Manager ->Manage NuGet Packages for Solution.

2. Search for EntityFramework and click install button.

Search For EntityFramework

3. Wait for NuGet Package Manager to install EntityFramework.

4. The image below is the view of Entity Framework after it is already installed.

5. To check if EntityFramework is successfully added to your project go to your solution explorer and under your reference EntityFramework should be found.

Project Reference

Entity Framework

You have successfully added Entity Framework to your project. You can now use it in your ASP.NET MVC Web Application.

You might want to check this thread..

[pt_view id=”d88f6acsu0″]

Leave a comment ASP.NET, C#, MVC, Nuget Package, Visual Studio

ASP.NET Entity Framework: Model First Approach (MVC)

26th October 2017 Regie Baquero ASP.NET MVC, BLOG, featured

Model first Approach is ASP.NET Entity framework functionality which creates a new model using entity framework designer and generate database schema from the model design. This is all found in EDMX(.edmx extension) file.

To fully understand how this entity framework approach work. I have created a simple tutorial on how to execute Model First Approach.

Note:

I’m using Visual Studio 2013
Install Entity Framework From NuGet Package Manager. Visit this thread Adding Entity Framework using NuGet for detailed instruction.
For starting a new ASP.NET MVC project visit this thread How to start with MVC Web application.

Let’s start:
1. First add Add New Item to your project. In my case because it is an MVC Application I prefer placing it inside my Models folder. To add, right click on Models folder and click Add and choose New Item.

Add New Item

2. Add ADO.NET Entity Data Model. Under Visual C# select Data and in the middle pane select ADO.NET Entity Data Model.

ADO.NET Entity Data Model

3. Choose Empty Model then click “Finish” .

Empty Model

4. After you have added ADO.NET Entity Data Model it will automatically create EDMX(.edmx extension) file. Like the image shown below.

Designer

5. Add entity for your model. Right click anywhere inside EDMX designer click Add New->Entity. Refer to the image below.

Add New Entity

6. Name your entity. In my case I name it as Employee and Entity Set is automatically generated by the framework as Employees.

Name Entity

7. Add Scalar Property which represent your table column. To Add, right click anywhere inside your Entity and Select Add New – > Scalar Property.

Add Scalar property

8. The image below is the overview of the designer with the toolbox that contains tools you can use to design your entity.

Designer

9. Generate Database from Model. This will generate .sql file inside your EDMX file which contains command used to generate your database. Right click anywhere inside your designer and select Generate Database from Model.

Generate Database from Model

10. From Generate Database Wizard window click “Next” to proceed.

Generate Database Wizard

11. Entity Framework generate Data Definition Language(DDL) that contains command in generating Database from your model design. Click “Finish”.

Data Definition Language

12. It will create .sql file that contains needed command to create your Database Schema.

Employee.edmx.sql

13. Below are the codes inside Employee.edmx.sql file.

Note:
• USE[master]-> Database name. This is where I created my table when I hit on execute command with my file.

Code:

-- --------------------------------------------------
 -- Entity Designer DDL Script for SQL Server 2005, 2008, 2012 and Azure
 -- --------------------------------------------------
 -- Date Created: 10/25/2017 11:19:56
 -- Generated from EDMX file: C:\Users\regie\Documents\Visual Studio 2013\Projects\Entity_ModelFirst_Approach\Entity_ModelFirst_Approach\Models\Emloyee.edmx
 -- --------------------------------------------------

SET QUOTED_IDENTIFIER OFF;
 GO
 USE [master];
 GO
 IF SCHEMA_ID(N'dbo') IS NULL EXECUTE(N'CREATE SCHEMA [dbo]');
 GO

-- --------------------------------------------------
 -- Dropping existing FOREIGN KEY constraints
 -- --------------------------------------------------

-- --------------------------------------------------
 -- Dropping existing tables
 -- --------------------------------------------------

-- --------------------------------------------------
 -- Creating all tables
 -- --------------------------------------------------

-- Creating table 'Employees'
 CREATE TABLE [dbo].[Employees] (
 [Id] int IDENTITY(1,1) NOT NULL,
 [Property1] nvarchar(max) NOT NULL
 );
 GO

-- --------------------------------------------------
 -- Creating all PRIMARY KEY constraints
 -- --------------------------------------------------

-- Creating primary key on [Id] in table 'Employees'
 ALTER TABLE [dbo].[Employees]
 ADD CONSTRAINT [PK_Employees]
 PRIMARY KEY CLUSTERED ([Id] ASC);
 GO

-- --------------------------------------------------
 -- Creating all FOREIGN KEY constraints
 -- --------------------------------------------------

-- --------------------------------------------------
 -- Script has ended
 -- --------------------------------------------------

-- --------------------------------------------------

-- Entity Designer DDL Script for SQL Server 2005, 2008, 2012 and Azure

-- --------------------------------------------------

-- Date Created: 10/25/2017 11:19:56

-- Generated from EDMX file: C:\Users\regie\Documents\Visual Studio 2013\Projects\Entity_ModelFirst_Approach\Entity_ModelFirst_Approach\Models\Emloyee.edmx

-- --------------------------------------------------

SET QUOTED_IDENTIFIER OFF;

USE [master];

IF SCHEMA_ID(N'dbo') IS NULL EXECUTE(N'CREATE SCHEMA [dbo]');

-- --------------------------------------------------

-- Dropping existing FOREIGN KEY constraints

-- --------------------------------------------------

-- Dropping existing tables

-- --------------------------------------------------

-- Creating all tables

-- --------------------------------------------------

-- Creating table 'Employees'

CREATE TABLE [dbo].[Employees] (

[Id] int IDENTITY(1,1) NOT NULL,

[Property1] nvarchar(max) NOT NULL

);

-- --------------------------------------------------

-- Creating all PRIMARY KEY constraints

-- --------------------------------------------------

-- Creating primary key on [Id] in table 'Employees'

ALTER TABLE [dbo].[Employees]

ADD CONSTRAINT [PK_Employees]

PRIMARY KEY CLUSTERED ([Id] ASC);

-- --------------------------------------------------

-- Creating all FOREIGN KEY constraints

-- --------------------------------------------------

-- Script has ended

-- --------------------------------------------------

14. Open Employee.edmx.sql file and execute command to create database. Right click anywhere inside your Employee.edmx.sql editor and select Execute. See image below.

Execute Command

15. A dialog box will pop-up asking for your server name where you want to create your table.

Connect to server

16. Message will appear of saying “Command(s) completed successfully” .

17. The image below is the table created by Entity Framework.

Employees Table

You have successfully created your table. By this time you can now use Entity Framework Model first approach in your ASP.Net MVC Web application.
Thank you for reading. !!

Post you may like:

[pt_view id=”2384ae03it”]

Leave a comment ASP.NET, Entity Framework, featured, Model First Approach, MVC

How: ASP.NET MVC using Entity Framework(Database First Approach)

24th October 2017 Regie Baquero ASP.NET MVC, BLOG, featured

Entity framework is part of .NET Framework it generates necessary database command that execute connection with database without using the standard SQL queries. To expand our understanding on how Entity Framework works. I created an ASP.NET MVC web application to share what I’ve learned. For beginners like me hopes this helps.

Image below is the table I created for this project. I name the database as Employee_Listing and for the table I name it as Table. If this is your first time to create a database visit this thread Create Database using Visual Studio for detailed instruction on how I created this database.

Application Final UI Output:

Final Output

Let’s Start:

Note:

If this is your first time creating a project visit this thread How to Start with ASP.NET MVC Application for tutorial on creating a new project in ASP.Net MVC Web Application.
For adding Entity Framework using NuGet Package Manager use this thread Adding Entity Framework using NuGet Package Manager.
For ASP.NET MVC Basic folder structure visit this thread Default ASP.NET MVC file structure

1. I assume you have already created a project and added entity framework if not visit the link from the note above . Now add ADO.NET Entity Data Model. I prefer adding it to my Model folder. To add, right click on the Models folder, click Add and choose New Item.

Add ADO.NET Entity Data Model

2. From Add New Item window select Data under Visual C# from the left pane and choose ADO.NET Entity Data Model from the middle pane. Then name your model. In my case I name it as Employee_Listing.

Name Entity Model

3. In the next window select option Generate from Database and then click “Next”

Generate from database

4. Create new connection by simply clicking New Connection button

Create New Connection

5. Choose Data source for your database. In my case it is Microsoft SQL Server then click “Continue”.

Choose SQL Server

6. In connection properties choose your Server name and select your Database name as shown below.

Choose Server and Database Name

7. To test connection of your database click “Test Connection” button. Then press “OK”.

Test Connection

8. Click “Next” to proceed.

Entity Model Wizard

9. Choose Table you want to add to your project.

Choose Table

10. If security warning pop-up select “OK”.

Security Warning

11. Visual Studio will create edmx file with the Table model for your database.

Project View

12. The image below is the full screenshot of my Models folder.

Models folder

13. Table.cs is the class Model of the Table I added with ADO.NET Entity Data Model.

Table.cs

Code inside Table.cs

This is our Entity Model class. I added [Required] attribute to every property declared from this model for Data Annotation to be used for model binding to our UI form inputs.

//------------------------------------------------------------------------------
// &lt;auto-generated&gt;
//     This code was generated from a template.
//
//     Manual changes to this file may cause unexpected behavior in your application.
//     Manual changes to this file will be overwritten if the code is regenerated.
// &lt;/auto-generated&gt;
//------------------------------------------------------------------------------
namespace MVC_Data_Entity.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    public partial class Table
    {
        public int Id { get; set; }
        [Required]
        public string Employee_Name { get; set; }
        [Required]
        public string Emp_Address { get; set; }
        [Required]
        public string Emp_Number { get; set; }
        [Required]
        public string Emp_Position { get; set; }
    }
}

//------------------------------------------------------------------------------

// <auto-generated>

// This code was generated from a template.

// Manual changes to this file may cause unexpected behavior in your application.

// Manual changes to this file will be overwritten if the code is regenerated.

// </auto-generated>

//------------------------------------------------------------------------------

namespace MVC_Data_Entity.Models

{

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

public partial class Table

{

public int Id { get; set; }

[Required]

public string Employee_Name { get; set; }

[Required]

public string Emp_Address { get; set; }

[Required]

public string Emp_Number { get; set; }

[Required]

public string Emp_Position { get; set; }

}

Let’s start with the coding part

We are going to use the default Controller for MVC Template which is HomeController. Located under HomeController folder and its default view located under Views->Home->index.cshtml.

Solution Explorer

1. Create a view for your application. Open Index.cshtml file refer to highlighted text shown in the image above.

Index.cshtml

Create a form using html helper to bind our model.
@using MVC_Data_Entity.Models -> gain access to our Models folder
@model Table -> gain access to our actual Model class which is the class Table inside Table.cs.
<script src=”~/Scripts/jquery-1.10.2.min.js”></script> -> Add JQuery script.
Get_Data() -> JavaScript function use for transferring data to our view from our Controller
Delete(id) -> JavaScript function that call delete function in controller to delete specific data from our database
Edit(id) – > JavaScript function that call select function from our controller and fill form with the existing data.
table_data(data) -> This is a table design JavaScript function to be fill in our table without a whole page loading.
@Html.ValidationSummary -> Show validation error base on the [required] attribute we set in our Table Model.
@Html.ValidationMessageFor -> Show validation error for specific inputs.

Code:

@using MVC_Data_Entity.Models
@model Table
@{
    ViewBag.Title = "Home Page";
}

<div class="">
    <h3>MVC Data Entity</h3>

  @using (Html.BeginForm("Index", "Home", FormMethod.Post, new {@class="form-horizontal",role="form" }))
  {
       <fieldset>

          @Html.ValidationSummary(true, "", new {@class="text-danger" })
          <div class="form-group">
              @Html.LabelFor(m => m.Employee_Name, new {@class="col-lg-2 control-label" })
              <div class="col-lg-10">
                  @Html.TextBoxFor(m => m.Employee_Name, new { @class="form-control"})
                  @Html.ValidationMessageFor(m => m.Employee_Name, "", new { @class="text-danger"})
              </div>
          </div>
          <div class="form-group">
              @Html.LabelFor(m => m.Emp_Address, new { @class = "col-lg-2 control-label" })
              <div class="col-lg-10">
                  @Html.TextBoxFor(m => m.Emp_Address, new { @class = "form-control" })
                  @Html.ValidationMessageFor(m => m.Emp_Address, "", new { @class="text-danger"})
              </div>
          </div>

          <div class="form-group">
              @Html.LabelFor(m => m.Emp_Number, new { @class = "col-lg-2 control-label" })
              <div class="col-lg-10">
                  @Html.TextBoxFor(m => m.Emp_Number, new { @class = "form-control" })
                  @Html.ValidationMessageFor(m => m.Emp_Number, "", new { @class="text-danger"})
              </div>
          </div>

          <div class="form-group">
              @Html.LabelFor(m => m.Emp_Position, new { @class = "col-lg-2 control-label" })
              <div class="col-lg-10">
                  @Html.TextBoxFor(m => m.Emp_Position, new { @class = "form-control" })
                  @Html.ValidationMessageFor(m => m.Emp_Position, "", new { @class="text-danger"})
              </div>
          </div>

          <div class="form-group">
              <div class="col-lg-10 col-lg-offset-2">
                  <button type="submit" class="btn btn-primary">Submit</button>
              </div>
          </div>

      </fieldset>
  }

    <button class="btn btn-primary" onclick="Get_Data()">Get Data</button>
   <table class="table">
       <thead>
           <tr>
               <th>Employee Name</th>
               <th>Employee Address</th>
               <th>Employee Number</th>
               <th>Employee Position</th>
               <th>Option</th>
           </tr>
       </thead>
       <tbody id="Table_data">      
       </tbody>
   </table>
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        Get_Data(); //fill table
    })
    var controller_url = '@Url.Action("Home", "GetData")';
    function Get_Data() {
        $.post('@Url.Action("GetData", "Home")', function (data) {
            var parse_data = JSON.parse(data);
            $("#Table_data").html(table_data(parse_data));
        });
    }

    function Delete(id)
    {
        $.post('@Url.Action("Delete", "Home")', {'id':id},function (data) {
            alert(data);
            Get_Data(data);
        });
    }
    function Edit(id)
    {
        $.post('@Url.Action("Select_data_for_edit","Home")', { 'id': id }, function (data) {
            var parse_data = JSON.parse(data);       
            $("#Employee_Name").val(parse_data.Employee_Name.toString().trim());
            $("#Emp_Address").val(parse_data.Emp_Address.toString().trim());
            $("#Emp_Number").val(parse_data.Emp_Number.toString().trim());
            $("#Emp_Position").val(parse_data.Emp_Position.toString().trim());
        });
    }

    function table_data(data)
    {
        var result = "";
        for (var i = 0; i < data.length; i++) {
            result += "<tr>";
            result += "<td>" + data[i].Employee_Name + "</td>";
            result += "<td>" + data[i].Emp_Address + "</td>";
            result += "<td>" + data[i].Emp_Number + "</td>";
            result += "<td>" + data[i].Emp_Position + "</td>";
            result += "<td><button id='" + data[i].Id + "' class='btn btn-default' onclick='Edit(this.id)'>Edit</button><button id='" + data[i].Id + "' class='btn btn-default' onclick='Delete(this.id)'>Delete</button></td>";
            result += "</tr>";        
                  return result;
    }
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

@using MVC_Data_Entity.Models

@model Table

ViewBag.Title = "Home Page";

}

<h3>MVC Data Entity</h3>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new {@class="form-horizontal",role="form" }))

{

@Html.ValidationSummary(true, "", new {@class="text-danger" })

@Html.LabelFor(m => m.Employee_Name, new {@class="col-lg-2 control-label" })

@Html.TextBoxFor(m => m.Employee_Name, new { @class="form-control"})

@Html.ValidationMessageFor(m => m.Employee_Name, "", new { @class="text-danger"})

</div>

@Html.LabelFor(m => m.Emp_Address, new { @class = "col-lg-2 control-label" })

@Html.TextBoxFor(m => m.Emp_Address, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.Emp_Address, "", new { @class="text-danger"})

</div>

@Html.LabelFor(m => m.Emp_Number, new { @class = "col-lg-2 control-label" })

@Html.TextBoxFor(m => m.Emp_Number, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.Emp_Number, "", new { @class="text-danger"})

</div>

@Html.LabelFor(m => m.Emp_Position, new { @class = "col-lg-2 control-label" })

@Html.TextBoxFor(m => m.Emp_Position, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.Emp_Position, "", new { @class="text-danger"})

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</div>

</fieldset>

}

<thead>

<tr>

<th>Employee Name</th>

<th>Employee Address</th>

<th>Employee Number</th>

<th>Employee Position</th>

<th>Option</th>

</tr>

</thead>

</tbody>

</table>

</div>

$(document).ready(function () {

Get_Data(); //fill table

})

var controller_url = '@Url.Action("Home", "GetData")';

function Get_Data() {

$.post('@Url.Action("GetData", "Home")', function (data) {

var parse_data = JSON.parse(data);

$("#Table_data").html(table_data(parse_data));

});

}

function Delete(id)

{

$.post('@Url.Action("Delete", "Home")', {'id':id},function (data) {

alert(data);

Get_Data(data);

});

}

function Edit(id)

{

$.post('@Url.Action("Select_data_for_edit","Home")', { 'id': id }, function (data) {

var parse_data = JSON.parse(data);

$("#Employee_Name").val(parse_data.Employee_Name.toString().trim());

$("#Emp_Address").val(parse_data.Emp_Address.toString().trim());

$("#Emp_Number").val(parse_data.Emp_Number.toString().trim());

$("#Emp_Position").val(parse_data.Emp_Position.toString().trim());

});

}

function table_data(data)

{

var result = "";

for (var i = 0; i < data.length; i++) {

result += "<tr>";

result += "<td>" + data[i].Employee_Name + "</td>";

result += "<td>" + data[i].Emp_Address + "</td>";

result += "<td>" + data[i].Emp_Number + "</td>";

result += "<td>" + data[i].Emp_Position + "</td>";

result += "<td><button id='" + data[i].Id + "' class='btn btn-default' onclick='Edit(this.id)'>Edit</button><button id='" + data[i].Id + "' class='btn btn-default' onclick='Delete(this.id)'>Delete</button></td>";

result += "</tr>";

return result;

}

</script>

2. Next open your HomeController. Let’s create and apply CRUD (Create, Read, Update and Delete) which is the basic function for most of the systems.

HomeController.cs

Function summary for HomeController

Index() – > Load default view
Index(Table model) -> received post request from our UI form.
GetData() -> Get all data from our table.
Select_data_for_edit(int id) – > Select specific data by id from our database table
Delete(int id) -> Delete data from table by id
Update()-> Update data entry from database table
Insert_data(Table model) -> Insert new entry to database table

Code:

using MVC_Data_Entity.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using Newtonsoft.Json;

namespace MVC_Data_Entity.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Table model)
        {
            if (!ModelState.IsValid)
            {
                return View();
            }
            Insert_data(model);
            return View();
        }
        public string GetData()
        {
            List&lt;Table&gt; list = new List&lt;Table&gt;();
            using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())
            {
                var user = employee.Tables;
                list = user.ToList();
            }
            string jsonresult = JsonConvert.SerializeObject(list);
            return jsonresult;
        }
        public string Select_data_for_edit(int id)
        {
            Table model = new Table();
            DataTable container = new DataTable();
            using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())
            {
                var user = employee.Tables.FirstOrDefault(d=&gt;d.Id == id);
                model.Employee_Name = user.Employee_Name;
                model.Emp_Address = user.Emp_Address;
                model.Emp_Number = user.Emp_Number;
                model.Emp_Position = user.Emp_Position;
            }
            string jsonresult = JsonConvert.SerializeObject(model);
            return jsonresult;
        }

        public string Delete(int id)
        {
            string result = "";
            try
            {
                using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())
                {
                    Table data = employee.Tables.FirstOrDefault(d =&gt; d.Id == id);
                    employee.Tables.Remove(data);
                    employee.SaveChanges();
                    result = "Success";
                }
            }
            catch (Exception ex)
            {
                result = ex.Message;

            }
            return result;
        }

        public string Update(int id, string Employee_Name, string Emp_Address, string Emp_Number, string Emp_Position)
        {
            string result = "";
            try
            {
                using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())
                {
                    Table data = employee.Tables.FirstOrDefault(d =&gt; d.Id == id);
                    data.Employee_Name = Employee_Name;
                    data.Emp_Address = Emp_Address;
                    data.Emp_Number = Emp_Number;
                    data.Emp_Position = Emp_Position;
                    employee.SaveChanges();
                    result = "Success";
                }
            }
            catch (Exception ex)
            {
                result = ex.Message;
            }
            return result;
        }

        public string Insert_data(Table model)
        {
            string result = "";
            try
            {
                using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())
                {
                    var user = employee.Tables.FirstOrDefault(d =&gt; d.Employee_Name == model.Employee_Name);
                    if (user != null) //if name exist update data
                    {
                        Update(user.Id,model.Employee_Name.Trim(),model.Emp_Address,model.Emp_Number,model.Emp_Position);
                    }
                    else
                    {
                        Table data = new Table()
                        {
                            Employee_Name = model.Employee_Name,
                            Emp_Address = model.Emp_Address,
                            Emp_Number = model.Emp_Number,
                            Emp_Position = model.Emp_Position
                        };
                        employee.Tables.Add(data);
                        employee.SaveChanges();
                        result = "Success";
                    }

                }

            }
            catch (Exception ex)
            {
                result = ex.Message;

            }
            return result;
        }

    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

using MVC_Data_Entity.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Data;

using Newtonsoft.Json;

namespace MVC_Data_Entity.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

[HttpPost]

public ActionResult Index(Table model)

{

if (!ModelState.IsValid)

{

return View();

}

Insert_data(model);

return View();

}

public string GetData()

{

List<Table> list = new List<Table>();

using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())

{

var user = employee.Tables;

list = user.ToList();

}

string jsonresult = JsonConvert.SerializeObject(list);

return jsonresult;

}

public string Select_data_for_edit(int id)

{

Table model = new Table();

DataTable container = new DataTable();

using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())

{

var user = employee.Tables.FirstOrDefault(d=>d.Id == id);

model.Employee_Name = user.Employee_Name;

model.Emp_Address = user.Emp_Address;

model.Emp_Number = user.Emp_Number;

model.Emp_Position = user.Emp_Position;

}

string jsonresult = JsonConvert.SerializeObject(model);

return jsonresult;

}

public string Delete(int id)

{

string result = "";

try

{

using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())

{

Table data = employee.Tables.FirstOrDefault(d => d.Id == id);

employee.Tables.Remove(data);

employee.SaveChanges();

result = "Success";

}

catch (Exception ex)

{

result = ex.Message;

}

return result;

}

public string Update(int id, string Employee_Name, string Emp_Address, string Emp_Number, string Emp_Position)

{

string result = "";

try

{

using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())

{

Table data = employee.Tables.FirstOrDefault(d => d.Id == id);

data.Employee_Name = Employee_Name;

data.Emp_Address = Emp_Address;

data.Emp_Number = Emp_Number;

data.Emp_Position = Emp_Position;

employee.SaveChanges();

result = "Success";

}

catch (Exception ex)

{

result = ex.Message;

}

return result;

}

public string Insert_data(Table model)

{

string result = "";

try

{

using (Employee_ListingEntities1 employee = new Employee_ListingEntities1())

{

var user = employee.Tables.FirstOrDefault(d => d.Employee_Name == model.Employee_Name);

if (user != null) //if name exist update data

{

Update(user.Id,model.Employee_Name.Trim(),model.Emp_Address,model.Emp_Number,model.Emp_Position);

}

else

{

Table data = new Table()

{

Employee_Name = model.Employee_Name,

Emp_Address = model.Emp_Address,

Emp_Number = model.Emp_Number,

Emp_Position = model.Emp_Position

};

employee.Tables.Add(data);

employee.SaveChanges();

result = "Success";

}

catch (Exception ex)

{

result = ex.Message;

}

return result;

}

3. Layout.cshtml

This file is located at Views ->Shared->Layout.cshtml.
This is where we can modify sites main menu.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Data Entity", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                @*<ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>*@
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

</button>

@Html.ActionLink("Data Entity", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

</div>

@*<ul class="nav navbar-nav">

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>*@

</div>

@RenderBody()

<hr />

<p>© @DateTime.Now.Year - My ASP.NET Application</p>

</footer>

</div>

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@RenderSection("scripts", required: false)

</body>

</html>

Final Output:

Final Output

This is a working application. Hopes this help!!

Thank you for reading!! Happy coding!!

Post you may like:

[pt_view id=”2384ae03it”]

Leave a comment ASP.NET MVC, Entity Framework, featured

ASP.NET MVC Login Tutorial – Web Application

17th October 2017 Regie Baquero ASP.NET MVC, BLOG, featured

For most of the beginners hardest part in learning ASP.NET MVC Application is the understanding and knowing how MVC works.

In this example we will illustrate Model->View->Controller using a simple MVC login web application.

Project Overview:

HomeController.cs

Index() -> load default view of the HomeController. Where view is located at Views->Home->index.cshtml
Index(LoginModel model)-> This received the data input by the user from our login form using a POST request.This return default view of the Controller which is the login form if the login details is incorrect or redirect to the landing page if successfully authenticated.
AccountVerification()-> This function return boolean(true or false). This check the login credential if it is valid or not.
Welcome_Page()-> This call’s the landing view if the user is successfully login.

LoginModel()-> This is a class where properties are being declared. (public string Email{get;set}). We will use this model to bind with our login view form.
chtml-> This is the Default view of Home Controller (Location Views->Home->Index.cshtml.

Welcome_Page.cshtml -> view for Welcome_Page ActionResult this serve as our UserInterface for our landing page.(Location Views->Home->Welcome_Page.cshtml)

Project output:

MVC Login Form

Let’s Start:

Note: Name your project as Simple MVC Login implementation

First create new project in Visual Studio 2013 using a default MVC Template. If this is your first time to create one visit this blog for easy instruction in creating a project How to start with Asp.Net MVC application.

After successfully creating a project go to solution explorer and navigate to Model folder and add new class for our model. Right click on Model folder choose add then select Class.

Add Model

Name your class as LoginModel.

Name class as LoginModel

Open your LoginModel class and copy and paste code below:

LoginModel.cs Code:

Declare Email and password properties and define property requirements.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace Simple_MVC_Login_implementation.Models
{
    public class LoginModel
    {
        [Required]
        [Display(Name="Email")]
        public string  Email { get; set; }
        
        [Required]
        [DataType(DataType.Password)]
        [Display(Name="Password")]
        public string  Password { get; set; }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel.DataAnnotations;

namespace Simple_MVC_Login_implementation.Models

{

public class LoginModel

{

[Required]

[Display(Name="Email")]

public string Email { get; set; }

[Required]

[DataType(DataType.Password)]

[Display(Name="Password")]

public string Password { get; set; }

}

Note:

using System.ComponentModel.DataAnnotations; -> This is responsible for setting attribute and requirements for your properties. Ex. [Required]

Next, go to Controller folder and open file HomeController. HomeController is the default controller for generating the default view or User Interface of your web application. This is where we put all the Process we will need for the project.

Controller

Replace the code from your HomeController with the code below.

Home Controller Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Simple_MVC_Login_implementation.Models;

namespace Simple_MVC_Login_implementation.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(LoginModel model)
        {
            if (!ModelState.IsValid)
            {
                return View(model);
            }
            if (AccountVerification(model.Email, model.Password))
            {
                return RedirectToAction("Welcome_Page",model);
            }
            else
            {
                ModelState.AddModelError("", "Invalid Input Details");
            }

            return View();    
        }

        public bool AccountVerification(string Email,string password)
        {
            bool result = false;

            if (Email == "test@gmail.com" && password == "12345")
            {
                result = true;
            }

            return result;
        }

        public ActionResult Welcome_Page(LoginModel model)
        {

            return View(model);
        }
       
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Simple_MVC_Login_implementation.Models;

namespace Simple_MVC_Login_implementation.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

return View();

}

[HttpPost]

public ActionResult Index(LoginModel model)

{

if (!ModelState.IsValid)

{

return View(model);

}

if (AccountVerification(model.Email, model.Password))

{

return RedirectToAction("Welcome_Page",model);

}

else

{

ModelState.AddModelError("", "Invalid Input Details");

}

return View();

}

public bool AccountVerification(string Email,string password)

{

bool result = false;

if (Email == "[email protected]" && password == "12345")

{

result = true;

}

return result;

}

public ActionResult Welcome_Page(LoginModel model)

{

return View(model);

}

HomeController function details:

Index() -> This return Default view of HomeController which is our Login Form
Index(LoginModel model) – > This receive model data from our view (Login Form) using a post request. It also redirects the page to our welome_page view if credential is successfully validated.
AccountVerification(string Email,string password) – > This function use to verify if email and password match to your valid credential.
ModelState.IsValid -> Controller properties that check model property state.

Index.cshtml Code:

Output:

MVC Login Form

Open your HomeController default view which is index.cshtml located at your solution explorer Views->Home->Index.cshtml.

View Folder

To bind our Model to our Login form use html helper to generate your form.

Copy and paste code below to your index.cshtml.

@using Simple_MVC_Login_implementation.Models -> access model properties.
@model LoginModel-> Bind LoginModel to our View.

Code below creates a simple login form design.

@using Simple_MVC_Login_implementation.Models
@model LoginModel
@{
    ViewBag.Title = "Home Page";
}
<div class="row">
    <br/>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal",role="form" }))
    {
        <fieldset>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })   <!--Enable Data Anotation-->
            <div class="form-group">
                @Html.LabelFor(m => m.Email, new { @class = "col-lg-2 control-label"})
                <div class="col-lg-10">
                    @Html.TextBoxFor(m => m.Email, new { @class = "form-control"})
                    @Html.ValidationMessageFor(m => m.Email, "", new { @class="text-danger"}) <!Display of Error Notification-->
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Password, new { @class = "col-lg-2 control-label"})
                <div class="col-lg-10">
                 @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
                 @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })<!Display of Error Notification-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
        </fieldset>
    }
</div>

@using Simple_MVC_Login_implementation.Models

@model LoginModel

ViewBag.Title = "Home Page";

}

<br/>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal",role="form" }))

{

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.LabelFor(m => m.Email, new { @class = "col-lg-2 control-label"})

@Html.TextBoxFor(m => m.Email, new { @class = "form-control"})

@Html.ValidationMessageFor(m => m.Email, "", new { @class="text-danger"}) <!Display of Error Notification-->

</div>

@Html.LabelFor(m => m.Password, new { @class = "col-lg-2 control-label"})

@Html.PasswordFor(m => m.Password, new { @class = "form-control" })

@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })<!Display of Error Notification-->

</div>

<button type="submit" class="btn btn-primary">Login</button>

</div>

</fieldset>

}

</div>

Lastly, create a landing page or welcome page for your application. This will be displayed after a user has successfully validated his credentials.

To add new View, from your solution explorer right click on the Home folder inside the views folder and choose Add then select MVC 5 View Page with Layout (Razor).

Manual adding of View

Then choose layout for your view.

Name View

Then choose layout for your view.

Choose layout

Open Welcome_Page view. Copy and paste code below:

Welcome_page

Welcome_Page Code:

Display welcome message including the email used to log in.

@using Simple_MVC_Login_implementation.Models
@model LoginModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="jumbotron">
    <h2>Welcome To My Page!</h2>
    <h3>You are Log in as @Model.Email</h3>
</div>

@using Simple_MVC_Login_implementation.Models

@model LoginModel

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Welcome To My Page!</h2>

<h3>You are Log in as @Model.Email</h3>

</div>

Output:

Welcome Page

You’re all set!

This project explains the basic flow of Asp.Net MVC. Make it as your guide in starting MVC projects.

Thank you for reading hopes this helps.

Leave a comment ASP.NET, ASP.NET MVC Login, MVC login

Consuming SQL Stored Procedures (ASP.NET MVC Web Application)

7th October 2017 Regie Baquero ASP.NET MVC, BLOG, C#, featured

For beginners: – SQL Stored Procedures

To fully understand the Sample ASP.NET MVC Project below you must see first this blog Creating Stored Procedure.

To fully understand the Sample ASP.NET MVC Project below you must see first this blog Creating Stored Procedure.

To fully understand the Sample ASP.NET MVC Project below you must see first this blog Creating Stored Procedure.
If you are not familiar with ASP.NET MVC Folder Structure you can refer to this blog content ASP.NET Application File Structure before proceeding.
If you don’t know How to Start with ASP.NET MVC Application to relate to this example use this Blog How to Start MVC Application.

The objective of this project to get data from a Database Table using a stored procedure and display in a HTML Table .

Note: I’m using ASP.NET MVC Applciation

Summary of the classes I used in creating this example

index.cshtml » In MVC framework index is the View. This is responsible for the User Interface in the front end of your website. In this example it is the table design.
Controller.cs » Class that is responsible for processing of data that pass to the View.
function.js » Most common question asks for beginners in using MVC framework is how to pass data from a controller to a view. This is one of the answers instead of using the normal way of doing it I’m using JavaScript in transmitting data from a controller. This process populates your data in your view without reloading the whole page.
function.cs » I created a separate class for calling Store Procedure to modularized our function for easy debugging.

Now that you have known all of the function used for this example. I will go down the line and proceed with copying of code for your personal testing and better understanding.

OUTPUT VIEW:

Project Output

Project File structure:

File Structure

Index.cshtml

This file is responsible for your User Interface design. In ASP.NET MVC framework in every controller there is always a specific views associated with it. In this case we are using HomeController so the folder from Views->Home->index.cshtml is our main view. Navigate to this file and copy and paste code below.

User Interface

Note:

<script src=”~/Scripts/jquery-1.10.2.min.js”></script> -> include JQuery Script from Scripts folder
<script src=”~/Scripts/function.js”></script> -> include function.js Script

Code:

@{
    ViewBag.Title = "Basic function";
}
<div class="row">
    <div class="body-content">
        <div class="panel panel-default">
            <div class="panel-heading"><h4>Sample Project</h4></div>
            <div class="panel-body">
                <table id="data" class="table table-striped table-hover"></table>
            </div>
            <div class="panel-footer">
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/function.js"></script>

ViewBag.Title = "Basic function";

}

<div class="panel-heading"><h4>Sample Project</h4></div>

</div>

</div>

function.cs

To modularize project I created a separate class use to connect to our store procedure. This is where all code associated to the database are found. I also created a folder called Service where I put this class.

To create a folder right click on your project name and choose Add to show all available option, then selects New Folder. Name your folder as Service.

Create new class name function.cs by right clicking on the folder you have just created. Then Select Add and choose class.

Add Class

Name your class as function.cs

Name your Class

Open the file you have just created and copy the code below.

Service Folder

To manually view Database Connection string visit this blog content How to view Connection String in Visual Studio

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

namespace Basic_Function.Service
{
    public class function
    {
        string Sqlconnection = "Data Source=PROG-RA;Initial Catalog=basicfunction;Integrated Security=True;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False";
        public DataSet SelectListing()
        {
            DataSet ds = new DataSet();
            using (SqlConnection conn = new SqlConnection(Sqlconnection))
            {
                SqlCommand cmd = new SqlCommand("SelectFromTable", conn);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(ds);
            }
            return ds;
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Data;

using System.Data.SqlClient;

namespace Basic_Function.Service

{

public class function

{

string Sqlconnection = "Data Source=PROG-RA;Initial Catalog=basicfunction;Integrated Security=True;Connect Timeout=15;Encrypt=False;TrustServerCertificate=False";

public DataSet SelectListing()

{

DataSet ds = new DataSet();

using (SqlConnection conn = new SqlConnection(Sqlconnection))

{

SqlCommand cmd = new SqlCommand("SelectFromTable", conn);

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(ds);

}

return ds;

}

Note:

SelectFromTable -> Name of Stored procedure we created from the previous tutorial. To view visit this blog Creating Stored Procedure.

HomeController.cs

This is the default Controller generated during the creation of project. We will use this as our main controller for this project. Navigate to this file and copy and paste code shown below.

Controller folder

Note:

Service.function myservice = new function(); -> use to access our method from service-> function.cs class.
Basic_Function -> Project Name
Service -> Folder name where I created my function.cs
function -> class Name

Code:

using Basic_Function.Service;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Basic_Function.Controllers
{
   public class HomeController : Controller
    {
          Basic_Function.Service.function myservice = new function();

        public ActionResult Index()
        {
           return View();
        }

        public ActionResult SelectListing()
        {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        ds = myservice.SelectListing();
        dt = ds.Tables[0];
        String jsonResult = JsonConvert.SerializeObject(dt); 
        return Json(jsonResult, JsonRequestBehavior.AllowGet);
        }
    }
}

using Basic_Function.Service;

using Newtonsoft.Json;

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace Basic_Function.Controllers

{

public class HomeController : Controller

{

Basic_Function.Service.function myservice = new function();

public ActionResult Index()

{

return View();

}

public ActionResult SelectListing()

{

DataSet ds = new DataSet();

DataTable dt = new DataTable();

ds = myservice.SelectListing();

dt = ds.Tables[0];

String jsonResult = JsonConvert.SerializeObject(dt);

return Json(jsonResult, JsonRequestBehavior.AllowGet);

}

function.js

This script is used to update data to our html table in view. To create script file right click on the Scripts folder, Select Add then click on JavaScript File.

Add JavaScript File

Name your script as function.js

Script Name

Navigate to your file and copy and paste code below.

Script Folder

Note: “/Home/SelectListing”

Home-> Controller name
SelectListing-> Method from HomeController

Code:

var Controller_url = { SelectListing: '/Home/SelectListing' };
$(document).ready(function () {
    var select = $(function () {
        $.ajax({
            url: Controller_url.SelectListing,  //Address to controller
            type: 'GET',
            cache: false,
            success: function (list) {
                var parse_list = JSON.parse(list);
                $("#data").html(table(parse_list)); //Fill Table from Database
            }
        });
    });
});

function table(data) // Javascript function for Table template  
{
    var result = "";
    result += "      <thead>";
    result += "                      <tr>";
    result += "                          <th>itemNo</th>";
    result += "                          <th>FirstName</th>";
    result += "                          <th>LastName</th>";
    result += "                          <th>Address</th>";
    result += "                          <th>Contact Person</th>";
    result += "                          <th>Contact No.</th>";
    result += "                      </tr>";
    result += "                  </thead>";
    result += "                  <tbody>";
    for (var i = 0; i < data.length; i++) {
        result += "          <tr>";
        result += "              <td>" + (Number(i) + Number(1)) + "</td>";
        result += "              <td>" + data[i].FirstName + "</td>";
        result += "              <td>" + data[i].LastName + "</td>";
        result += "              <td>" + data[i].Address + "</td>";
        result += "              <td>" + data[i].Contact_Person + "</td>";
        result += "              <td>" + data[i].Contact_Number + "</td>";
        result += "          </tr>";
    }

    result += "";
    result += "          </tbody>";
    return result;
}

var Controller_url = { SelectListing: '/Home/SelectListing' };

$(document).ready(function () {

var select = $(function () {

$.ajax({

url: Controller_url.SelectListing, //Address to controller

type: 'GET',

cache: false,

success: function (list) {

var parse_list = JSON.parse(list);

$("#data").html(table(parse_list)); //Fill Table from Database

}

});

function table(data) // Javascript function for Table template

{

var result = "";

result += " <thead>";

result += " <tr>";

result += " <th>itemNo</th>";

result += " <th>FirstName</th>";

result += " <th>LastName</th>";

result += " <th>Address</th>";

result += " <th>Contact Person</th>";

result += " <th>Contact No.</th>";

result += " </tr>";

result += " </thead>";

result += " <tbody>";

for (var i = 0; i < data.length; i++) {

result += " <tr>";

result += " <td>" + (Number(i) + Number(1)) + "</td>";

result += " <td>" + data[i].FirstName + "</td>";

result += " <td>" + data[i].LastName + "</td>";

result += " <td>" + data[i].Address + "</td>";

result += " <td>" + data[i].Contact_Person + "</td>";

result += " <td>" + data[i].Contact_Number + "</td>";

result += " </tr>";

}

result += "";

result += " </tbody>";

return result;

}

To run your project simply hit f5 button from your keyboard to run in debugging mode or hit Ctrl + f5 to run without debugging mode.

[pt_view id=”2384ae03it”]

Leave a comment ASP.NET, MVC, Using SQL Stored Procedures

ASP.NET MVC File Architecture

30th September 2017 Regie Baquero ASP.NET MVC, BLOG, featured

ASP.NET Web application is created with the MVC template and is auto generated by the Development Environment of Visual studio. Unlike any other framework MVC has very strict guidelines about where to place different elements like a Model should be in the Model Folder, the controller must be in the controller folder, View must be in the View folder and there’s more to it than that. If you put it a wrong place, your application might not work as you expected.

MVC is also created for the purpose of having a clean and organized coding technique. For further knowledge on how this folder is being used in this framework, let’s go down the line and make an overview of each element and folder in our solution explorer.

Note: <em>I’m using Visual Studio 2013</em>

1	Note: <em>I’m using Visual Studio 2013</em>

(You can also see blog post How to start with MVC ASP.NET Web Application)

MVC Architecture C#

The image below is the folders and files generated for a newly created Visual Studio ASP.NET MVC Web Application project. Let’s see significance in each file in the solution explorer.

Solution Explorer

App_Data

This folder contains application data like local Database used by the application like .mdf file. This folder doesn’t have special meaning in the MVC framework.

App_Start

This contains code that helps configure MVC application. Generally, we don’t modify this part of the code unless you are already familiar with it and wanted to configure it manually. Like RouteConfig.cs which is responsible for the routing of your application web address. BundleConfig.cs which responsible for minification of your JavaScript and CSS files.

App_start

Content

Content folder contains style sheet for your sites like Site.css.

Content

Controller

This is the heart of MVC where you can find all the classes that are responsible for the processing of data. The controller is always tied to the View folder.

Controller

For example, if we have HomeController in the controller folder, then we also have a Home folder in the views folder and if we have AccountController in the controller folder then we also have Account Folder in the views folder. Home Controller must be named with a Controller at the end in order for it to work.

View

This folder contains User interface of your application. See image below.

Account, Home and Manage folder are the View of your Controller while Shared folder contains a template of your Web Application. _layout.cshtml, it’s like a master page and responsible of how all your pages will look like. _LoginPartial.cshtml contains code for partial menu .Error.cshtml is responsible for displaying error. View Start.cshtml it calls the default layout of the page which is _layout.cshtml. Web.config is an app configuration file that contains assemblies needed for the project.

Views

Fonts

Contains customize font you want to use in your project.

Font

Models

This folder contains classes that are responsible for the identification of data. This is where all application requirements are registered.

Script

Contains all JavaScript file of your application.

Script Folder

Favicon.ico -> default site logo icon

Packages.config -> this comes from nugget packages.

Web.config -> Configuration settings of your application

Default files

You can also refer to this link from DotNetmob.com for additional info on ASP.NET MVC Architecture.

Thank you for reading. Hope this helps. Enjoy Coding!!!

[pt_view id=”2384ae03it”]

5 comments ASP.NET, C#, featured, How to start with MVC ASP.NET, MVC

« 1 2 3 »

Category: ASP.NET MVC

Restful Web Services C# – ASP.NET Web API

Restful Web Services Tutorial with ASP.NET MVC

Let’s start: – Restful Web Services Tutorial

Code:

Rest API Application – ASP.NET MVC

Let’s Start: – Rest API Application

Rest API Application

Rest API Application

ASP.NET MVC Entity Framework:Code First Approach

How: Adding Entity Framework Reference using NuGet

Let’s Start: – Adding Entity Framework Reference

Entity Framework

You might want to check this thread..

ASP.NET Entity Framework: Model First Approach (MVC)

How: ASP.NET MVC using Entity Framework(Database First Approach)

Consuming SQL Stored Procedures (ASP.NET MVC Web Application)

OUTPUT VIEW:

Index.cshtml

function.cs

HomeController.cs

function.js

Related Post:

ASP.NET MVC File Architecture

MVC Architecture C#

App_Data

App_Start

Content

Controller

View

Fonts

Models

Script

Related Post: