AngularJS with Asp.Net MVC

AngularJS
What is Angular?

AngularJS is a JavaScript framework that extends HTML attribute to help develop a dynamic Web application.

AngularJS with Asp.Net MVC

Definition of Angular JS from its Official Page:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

To help us understand how this framework works I create a simple asp.net MVC application that uses Angular JS framework to populate HTML table.

Output Preview:

AngularJS with Asp.Net MVC

Let’s Start:
Sample Angular JS project with asp.net MVC

First, create a fresh copy of asp.net MVC Application using Visual Studio. If this is first time creating one visit this blog post  How To Start with ASP.NET MVC Web Application.

AngularJS with Asp.Net MVC

AngularJS with Asp.Net MVC

Second, include AngularJS file inside your view (index.cshtml) to use Angular Framework

  • https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js

AngularJS with Asp.Net MVC

Third, create your HTML table view. If you are using default MVC template of ASP.NET MVC your default controller is HomeController and your default view is located at Home > index.cshtml. Open index file and replace code inside the file using the code below.

Code:

Third,  Create new action result in your controller. This will be used for the sample JSON data use to populate to our HTML table.  Refer to the code below. I used model binding for my sample JSON data.

Model – NameModel
  • Create class inside Model folder this will serve as our model properties for our sample data.

From your HomeController copy and paste code below.

Sample JSON

Fourth, From your view(Index.cshtml) create a script to call this action result (sample_JSON).

Code:

For a successful request your call response will look like this:

To get the value of the actual data we pass, you can call it using response.data  and stringtify( ex. JSON.stringtify(response.data  ))  to convert into string and output “[{\”Name\”:\”Regie\”,\”LastName\”:\”Baquero\”}]”.

And we’re done. Thank you for reading! Happy Coding!!

You can review your code using the Full Code summary below.

Model:

Home Controller

Index.cshmtl

 

ASP.NET MVC Entity Framework:Code First Approach

Populate HTML Table using JQUERY

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:

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.

Entity Framework

Add new item

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

Entity Framework

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:

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.

Entity Framework

Employee_ListingDBContext

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

Code:

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

Entity Framework

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:

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.

Entity Framework

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:

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.

Entity Framework

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:

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:

Entity Framework

Final output

 

 


Post you may like:

 

[pt_view id=”2384ae03it”]

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

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:

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.

Entity Framework

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.

Entity Framework

ADO.NET Entity Data Model

3. Choose Empty Model then click “Finish” .

Entity Framework

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.

Entity Framework

Designer

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

Entity Framework

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.

Entity Framework

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.

Entity Framework

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.

Entity Framework

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.

Entity Framework

Generate Database from Model

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

Entity Framework

Generate Database Wizard

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

Entity Framework

Data Definition Language

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

Entity Framework

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:

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.

Entity Framework

Execute Command

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

Entity Framework

Connect to server

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

Entity Framework

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

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”]

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

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.

Entity Framework

Application Final UI Output:

Entity Framework

Final Output

Let’s Start:

       Note:

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.

Entity Framework

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.

Entity Framework

Name Entity Model

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

Entity Framework

Generate from database

4. Create new connection by simply clicking New Connection button

Entity Framework

Create New Connection

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

Entity Framework

Choose SQL Server

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

Entity Framework

Choose Server and Database Name

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

Entity Framework

Test Connection

8. Click “Next” to proceed.

Entity Framework

Entity Model Wizard

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

Entity Framework

Choose Table

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

Entity Framework

Security Warning

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

Entity Framework

Project View

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

Entity Framework

Models folder

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

Entity Framework

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.

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.

Entity Framework

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:

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:

 

3. Layout.cshtml

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

Code:

Final Output:

Entity Framework

Final Output

This is a working application. Hopes this help!!

Thank you for reading!! Happy coding!!


Post you may like:

[pt_view id=”2384ae03it”]

How to Host ASP.NET Application in IIS

Internet Information Services (IIS) are used to host ASP.Net Web application for either used it to show your development progress or for a test run of your websites. Or if you are a freelancer and you want to show your sites to your customer, IIS might be your best and easiest way.

For beginners like me, I created simple instructions in publishing ASP.NET MVC Application in IIS.

 Note:

Let’s Start:

I. Go to IIS sites root folder and create new folder.

  1. First open your IIS Manager. By going to start menu and typing “IIS” and select Internet Information Services from the search result. Refer to the image shown below.

    Host ASP.NET Application

    Start Menu

  2. In your IIS manager expand sites folder and right click on Default Web Sites. Then select Explore to open root directory.

    Host ASP.NET Application

    Internet Information Services Manager

  3. wwwroot directory appear create a folder inside the directory. This is where we publish our Websites. In my case I name it as MySites. 

    Host ASP.NET Application

    wwwroot directory

II. Publish ASP.NET Website

My Site Preview:

Host ASP.NET Application

My Site

 

  1. Open your project in visual studio 2013 and go to solution explorer. Right click on your project name and select publish.

    Host ASP.NET Application

    Publish

  2. In the Publish Web Window choose Profile and then create new profile name for your publish profile.

    Host ASP.NET Application

    New Profile

 

  1. Enter your desired publish profile name. Then press “OK”.

    Host ASP.NET Application

    Name your profile

  2. Click “Next” to proceed. Use File System as your publish method.

    Host ASP.NET Application

    Publish Method

  3. Select your published directory. In my case it is C:\inetpub\wwwroot\MySites which the default website directory of IIS. Then click “Open”.

    Host ASP.NET Application

    Select Directory

  4. Lastly click on publish button.

    Host ASP.NET Application

    Publish Option

  5. Wait for Visual Studio to finish publishing.

    Host ASP.NET Application

    Successfully Published

III. Convert your website to IIS Application

  1. Go to your IIS Manager and navigate to Sites-> Default Web Sites. Then search for your folder name where we published our websites. In my case I name it MySites. Right click on MySites folder and select Convert to Application.

    Host ASP.NET Application

    Open IIS Manager

  2. You’re done!! To browse your site right click on MySites Select Manage Application then choose browse.

    Host ASP.NET Application

    IIS Manager

  3. Browser will appear with your site preview.

    Host ASP.NET Application

    My Sites

  4. You can also access your websites using your local IP ex. http://192.168.1.2/MySitesHost ASP.NET Application

Thank you for reading!

Hopes this help. Enjoy coding!!


Post you may like:

 

[pt_view id=”2384ae03it”]

ASP.NET MVC File Architecture

Solution Explorer

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.

(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.

MVC Architecture C#

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.

MVC Architecture C#

App_start

Content

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

MVC Architecture C#

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.

MVC Architecture C#

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.

MVC Architecture C#

View

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. 

MVC Architecture C#

Views

Fonts

Contains customize font you want to use in your project.

MVC Architecture C#

Font

Models

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

MVC Architecture C#

Script

Contains all JavaScript file of your application.

MVC Architecture C#

Script Folder

Favicon.ico -> default site logo icon

Packages.config -> this comes from nugget packages.

Web.config -> Configuration settings of your application

MVC Architecture C#

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!!!

 


Related Post:

 

[pt_view id=”2384ae03it”]

How to start with ASP.NET MVC Web Application – Development

Web Application

This blog demonstrates how to start with ASP.NET Web Application. For those who are struggling with how to start a simple ASP.NET Project, let me guide you throughout the process.

Before we start we need a Development Environment to start with the project.

You can download Visual Studio 2013 from this  https://www.visualstudio.com/downloads/

If you have already installed Visual Studio on your machine we can proceed with the steps to start a project.

Begin with opening visual studio Development Environment. There are two options in starting a new project you can start from the file menu located at the top navigation bar as shown below.

Web Application

Visual Studio Developement Environtment

Or you can select New Project link from the start page of Visual Studio development environment refer to the image shown below.

Web Application

Start Page link

After that expand Visual C# node on the left pane and navigate to Web option. Then search for ASP.NET Web Application on the middle pane. Name it as MVC-SimpleApp. You can also name your apps to your preference. If you want to use different directory of your project use the browse button right below your project name. If your done click OK to proceed to the next steps. Use the image below for your guide.

Web Application

Project Options

From the New ASP.NET project dialog select template for your project Choose MVC as shown below.

Web Application

Project Template

You can also change application authentication. It is set to Individual User Accounts in default but here we‘re going to use No Authentication.  Image below is set to its default value change it to No Authentication.

Web Application

Authentication

The application will go idle for some time. Wait for Visual Studio to load necessary files needed for your project.

To run the project press f5 to run in debugging mode or Ctrl + f5 to run without debugging mode

Web Application

Website Preview

ASP.NET MVC Application includes bootstrap CSS and JavaScript by default so your site already responsive. Below is the image of the website view in small screen.

Web Application

Mobile View

From this moment you can start your first ASP.NET MVC Project.

Thank you for reading. Enjoy Coding!!

 


Related Post:

[pt_view id=”2384ae03it”]

Basic ASP.NET MVC Web Application Implementation

What is MVC?

  • Model View Controller (MVC) is a framework, a Programming architecture where you designed your code in 3 different modules. Model, it is where all your logical properties or data are declared. View, it is where you designed or creates your Client user interface and lastly Controller, it is where you process data and connect model to view.

MVC Diagram:

To illustrate how MVC work in ASP.NET lets create a sample project.

To be guided with the sample Project. Below are the names I used for the function.

Note:  I’m using visual studio 2013 for this tutorial

  • MVCBasicModel.cs => Name of the Model Class(Located under Models Folder)
  • HomeController.cs => Default controller generated by Visual studio after Creation of new     MVC Application Project(Located under Controller folder)
  • Index.cshtml => Default view for HomeController(Located under Views/Home Folder)

Goal: 

  • Generate data from database
  • Save in a list with model binding
  • Pass to view and display in a table

Output Preview:

To begin let’s create a new Project in Visual studio. You can also refer to my blog how to start with ASP.NET MVC Web application for detailed instructions on how to start a project.

  1. First open your Visual Studio. Navigate to File/New and then Choose Project right on top of your Visual Studio IDE.
  • IDE => Integrated Development environment
  1. New Project options will popup. Select Visual C# from the left side panel and Search for ASP.NET Web Application from the right side panel, then Click OK.
  2. After that select a template, which is MVC then click ok to proceed
  3. Congratulation!! You have successfully created your MVC project.

Now let’s create a Database and table. There are two ways in creating a database; you can use a SQL management studio or via Visual Studio. Here I’m going to use Visual Studio.

Note:  You need to have SQL Server installed on your machine to proceed with these steps

  1. To open SQL Server Explorer in Visual Studio Navigate to View from the menu bar and then click on SQL Server Object Explorer. SQL Server Object Explorer will show on left side of your visual studio IDE.
  2. Navigate to your local SQL Server. Right click on the Database folder and then click Add New Database. You can name it whatever you like, for me I name it as sad_db.
  3. After that navigate to your local SQL server again and under that you can see you’re newly created Database. Open your newly created database and go to Table Right Click on it to see add new Table option.
  4. Then add columns to your table.
  • Id => int
  • Employee_Name => varchar(100)
  • EmpCode => varchar(100)
  • Position => varchar(100)
  • Location => varchar(100)
  1. To manually insert sample data. Right click on your table again and choose view data.
  • Id => 1
  • Employee_Name => John
  • EmpCode => j-123
  • Position => Cashier
  • Location => Place

And now let’s proceed with the coding part. Let’s add our model class. From your solution explorer located on the right side panel of your Visual Studio IDE, navigate to the Model folder, then right click on it and select add option, then select the class. Name it as MVCBasicModel. This model will be used to bind with a list in our controller.

Declare these properties from your MVCBasicModel class:

In our HomeController.cs (Located under Controller folder from the solution explorer) create a separate function/method that will fetch data from our database and return data as a list. Name it as GetData ();

Note: To view Database Connection String navigate to SQL Server Object Explorer, right click on your database and then click properties. Under properties go down to Connection string then copy and replace SQL Connection string from the code below.

Passing data to the View

In your HomeController Index call our function GetData() to get the data we fetch from our database and return it  into our view, which is index.cshtml located under view/Home Folder

Index.cshtml

  • @model IEnumerable<MVCBasic.Models.MVCBasicModel> => to gain access the list we pass from our HomeController
  • Use foreach loop to manually fill our data to our table

and we’re done.. Thank you for reading. Happy coding!!

 

Code Summary:

MVCBasicModel.cs

 HomeController.cs

Index.cshtml


Related Post:

 

[pt_view id=”2384ae03it”]