I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
If you have to completed your WebAPI then must to know , how to use it in web application. Now , you can see , how to use WebAPI in WebApplication.
WEBAPI Project
Step-1 : Create Model first
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
}
Step-2 : Create Data Context Class
public class Context : DbContext
{
public Context(DbContextOptions<Context> options) : base(options)
{
}
public DbSet<Student> Students { get; set; }
}
Step-3 : Add Connection String into your Application Setting File
{
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-WebApplication1-6550C064-027F-4939-822B-5B4620D08657;Trusted_Connection=True;MultipleActiveResultSets=true"
},
"Logging": {
"IncludeScopes": false,
"LogLevel": {
"Default": "Warning"
}
}
}
Step-4 : Add Connection String in Startup file
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
Step-5 Do Migration
Step-6 : Create Controller
namespace WebApiTestApplication.Controllers
{
[Route("api/[controller]")]
public class StudentController : Controller
{
private Context _context;
public StudentController(Context context)
{
_context = context;
}
[HttpGet]
public List<Student> Get()
{
return _context.Students.ToList();
}
public IActionResult Index()
{
return View();
}
}}
Step- 7: Add new project Web Application in the same solution
Step-8 : Add Helper Class also add View Model class
namespace WebApplication1.Helper
{
public class StudentAPI
{
public HttpClient Initial()
{
var Client = new HttpClient();
Client.BaseAddress = new Uri("http://localhost:56562/");
return Client;
}
}
}
If you Know what is "56562" then must to watch the video
And the model class
namespace WebApiTestApplication.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Step-9 : Add A controller
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
StudentAPI _api = new StudentAPI();
public async Task<IActionResult> Index()
{
List<Student> student = new List<Student>();
HttpClient client = _api.Initial();
HttpResponseMessage res = await client.GetAsync("api/Student");
if (res.IsSuccessStatusCode)
{
var result = res.Content.ReadAsStringAsync().Result;
student = JsonConvert.DeserializeObject<List<Student>>(result);
}
return View(student);
}
}
}
Step-10 : Generate View as list type
@model IEnumerable<WebApiTestApplication.Models.Student>
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</tbody>
</table>
WEBAPI Project
Step-1 : Create Model first
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
}
Step-2 : Create Data Context Class
public class Context : DbContext
{
public Context(DbContextOptions<Context> options) : base(options)
{
}
public DbSet<Student> Students { get; set; }
}
Step-3 : Add Connection String into your Application Setting File
{
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-WebApplication1-6550C064-027F-4939-822B-5B4620D08657;Trusted_Connection=True;MultipleActiveResultSets=true"
},
"Logging": {
"IncludeScopes": false,
"LogLevel": {
"Default": "Warning"
}
}
}
Step-4 : Add Connection String in Startup file
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
Step-5 Do Migration
Step-6 : Create Controller
namespace WebApiTestApplication.Controllers
{
[Route("api/[controller]")]
public class StudentController : Controller
{
private Context _context;
public StudentController(Context context)
{
_context = context;
}
[HttpGet]
public List<Student> Get()
{
return _context.Students.ToList();
}
public IActionResult Index()
{
return View();
}
}}
Step- 7: Add new project Web Application in the same solution
Step-8 : Add Helper Class also add View Model class
namespace WebApplication1.Helper
{
public class StudentAPI
{
public HttpClient Initial()
{
var Client = new HttpClient();
Client.BaseAddress = new Uri("http://localhost:56562/");
return Client;
}
}
}
If you Know what is "56562" then must to watch the video
And the model class
namespace WebApiTestApplication.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Step-9 : Add A controller
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
StudentAPI _api = new StudentAPI();
public async Task<IActionResult> Index()
{
List<Student> student = new List<Student>();
HttpClient client = _api.Initial();
HttpResponseMessage res = await client.GetAsync("api/Student");
if (res.IsSuccessStatusCode)
{
var result = res.Content.ReadAsStringAsync().Result;
student = JsonConvert.DeserializeObject<List<Student>>(result);
}
return View(student);
}
}
}
Step-10 : Generate View as list type
@model IEnumerable<WebApiTestApplication.Models.Student>
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</tbody>
</table>
I read your blog it's very nice and very helpful, I learn something new every time from this website, Thanks for sharing this information with us
ReplyDeleteWE are providing Mobile App Development Services