+91-90427 10472
         
Dot net training in Chennai

Asp.net MVC Course content

Document by Vairavan – enquiry@softwaretraininginchennai.com – + 919042710472

  1. MVC Architecture
  2. Benefits of Asp.net MVC
  3. Explanation on Model, View and Controller.
  4. Filters in MVC
  5. View models
  6. JQuery and JavaScript
  7. Entity Framework with Asp.net
  8. Code First Approach
  9. Database First Approach
  10. POCO Generator
  11. Data Annotation in MVC
  12. Custom Data Annotation
  13. Textbox, Option button ,List box ,Dropdown controls in MVC
  14. Ajax call in MVC
  15. Dependency Injection
  16. MVC with Bootstrap controls
  17. Layered Architecture in MVC
  18. Working with Areas
  19. Partial Views
  20. Working with Web api
  21. WCF Consumption in ASP.net MVC
  22. Convert Asp.net web application to MVC application
  23. MVC with Angular JS
  24. Sample Project on MVC

Consume Web api Http service in MVC solution

Document by Vairavan – ganesanva@hotmail.com – + 919042710472

Create a MVC solution using Code First Approach MVC Entity framework.
Add a Web Api Controller Class as below,

Look on the WebApiConfig.cs how the Routes are made.

The API URL can be routed as both API/Controller/Id and Api/Controller/Action/Id by registering the Routes in Web api config.
Add the Below code in Api Controller(Used for CRUD),

private UsersContext db = new UsersContext();
// GET api/values
public IEnumerable<StudentDetails> GetallStudents()
{
return db.StudentDbset.ToList();
}
// GET api/values/5
public StudentDetails GetStudents(int id)
{
StudentDetails studentdetails = db.StudentDbset.Find(id);
return studentdetails;
}
[HttpPost]
[ActionName(“Delete”)]
// Post api/values/Delete/5
public string DeleteStudents(int id)
{
StudentDetails studentdetails = db.StudentDbset.Find(id);
db.StudentDbset.Remove(studentdetails);
db.SaveChanges();
return “Deleted”;
}
// POST api/values
[HttpPost]
[ActionName(“Post”)]
public void Post([FromBody]string value)
{
}
// PUT api/values/5
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/values/5
public void Delete(int id)
{
}


Screen clipping taken: 02-09-2016 18:44
The Above Api methods can be accessed using below URL,
http://localhost:16842/api/Values
http://localhost:16842/api/Values/5
http://localhost:16842/api/Values/Delete/5
The data can be returned as JSON,Xml or any other format depends on the attribute.

Create a new HTML page in the Solution as index.html

Put below code in Index.html,

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Product App</title>
</head>
<body>
<div>
<h2>All Products</h2>
<ul id=”products” />
</div>
<div>
<h2>Search by ID</h2>
<input type=”text” id=”prodId” size=”5″ />
<input type=”button” value=”Search” onclick=”find();” />
<p id=”product” />
</div>
<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js”></script>
<script>
var uri = ‘/api/values’;
$(document).ready(function () {
// Send an AJAX request
$.getJSON(uri)
.done(function (data) {
// On success, ‘data’ contains a list of products.
$.each(data, function (key, item) {
// Add a list item for the product.
$(‘<li>’, { text: formatItem(item) }).appendTo($(‘#products’));
});
});
});
function formatItem(item) {
return item.studentName + ‘: $’ + item.Age;
}
function find() {
var id = $(‘#prodId’).val();
$.getJSON(uri + ‘/’ + id)
.done(function (data) {
$(‘#product’).text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$(‘#product’).text(‘Error: ‘ + err);
});
}
</script>
</body>
</html>

Now the MVC Application Works with Controller web api repository and a HTML page.
The output will be,

Click below to download the solution,
https://1drv.ms/u/s!ArddhCoxftkQg6hMmGfATxDIT2rtJw
Reference
http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api
http://www.asp.net/web-api/overview/web-api-routing-and-actions/routing-in-aspnet-web-api

POCO Generator to generate Model Class files

Document by Ganesan – Ganesanva@hotmail.com – + 919600370429

Download POCO Generator EXE from the below URL.
It can be used for Reverse Engineering to change DB first approach to Code First Approach.

http://www.codeproject.com/Articles/892233/POCO-Generator
Connect to the DB.

Select the Table that you want to Generate POCO Classes.

You can even generate Required attribute and Error field as EF Code First annotation as highlighted below.

Areas in MVC

Document by Ganesan – ganesanva@hotmail.com – + 919600370429

-Create a MVC Application

Click OK

– Add Connection in web.config file as below,

<connectionStrings>
<add name=”TestConnection” connectionString=”Data Source=(LocalDb)\v11.0;Initial Catalog=TestDB;Integrated Security=True;Pooling=False” providerName=”System.Data.SqlClient” />
</connectionStrings>


Add Area in the solution with name Admin
Create a Table in TestDB with AdminDetails Table as below.

CREATE TABLE [dbo].AdminDetails
(
[AdminId] INT NOT NULL PRIMARY KEY IDENTITY,
[FirstName] VARCHAR(50) NOT NULL,
[Lastname] VARCHAR(50) NOT NULL,
[Email] VARCHAR(50) NULL,
[Password] VARCHAR(50) NULL
)

Create Employee Table in TestDB as below,

CREATE TABLE [dbo].[Employee] (
[AdminId] INT NOT NULL,
[employee name] VARCHAR (100) NULL,
[Age] INT NULL,
[Email] VARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([AdminId] ASC)
);

Add AdminDetails.cs in Admin Areas model as below,

AdminDetails.Cs snippet as below,

public class AdminDetails
{
[Key]
public int AdminId { get; set; }
public string FirstName { get; set; }
public string Lastname { get; set; }
public string Email { get; set; }
public string Password { get; set; }
}
public class AdminContext : DbContext
{
public AdminContext()
: base(“TestConnection”)
{
}
public DbSet<AdminDetails> AdminDetailsDB { get; set; }
}

Right Click on Controller and Add Controller as below,

Now CRUD operation generated using Scaffolding.
Similarly Add Student Area by Right clicking on the solution and Add Areas.
Add StudentDetails.cs model in the Student Area.

Copy the below snippet in StudentDetails.cs file,

public class StudentDetails
{
[Key]
public int Id { get; set; }
public string StudentName { get; set; }
public int? Age { get; set; }
}
public class StudentContext : DbContext
{
public StudentContext()
: base(“TestConnection”)
{
}
public DbSet<StudentDetails> StudentDetailsDB { get; set; }
}

Add Scaffolding for StudentController as below,

Now the Solution Explorer looks as below,

In AdminAreaRegistration and StudentAreaRegistration we can see the routing for Pages,

The OUTPUT for AREA Pages will be as below,

http://localhost:11837/Admin/Admin/Create

http://localhost:11837/Student/Student/Create
It allows to separate the modules in application development. This also helps for Link Building with relevant keywords.
Click below to download the solution,
https://1drv.ms/u/s!ArddhCoxftkQg6hXj8wspGLO_44ifQ