Download Sample Source Code-MVC Asynchronous Demo_ASP_NET_MVC CSharp


Introduction

In real-time scenarios we always want to accomplish something differently, effectively and efficiently. Using multiple models in single view is common requirement in most of application. I always prefer to use asynchronous methods for better performance.

Background

Here we are going to accomplish UI as shown below, consist of two modes rendered.

  AsynchronousRequest-ActionUsingJQuery-JavaScriptASPNETMVC

Using code

  1. Create ASP.NET MVC  Project

Open Visual studio and select ASP.NET MVC 4 Template

UsingMultipleModules_ASP_NET_MVC_2

  1. Select Project Template

    - I am are using Intranet template with Razor view engine.

UsingMultipleModules_ASP_NET_MVC_3

  1. Setting Up Test Data  and Models

Add Author.cs and Book.cs file in Models folder-

Author.cs:

public class Author
 {
 public Author(int authorID, string authorString, int authorRating, List bookPublished)
 {
  this.AuthorID = authorID;
  this.AuthorTitle = authorString;
  this.AuthorRating = authorRating;
  this.BookPublished = bookPublished;
 }

 [Key]
 [Required]
 public int AuthorID;
 public string AuthorTitle;
 public int AuthorRating;
 public List BookPublished { get; set; }
 }

Book.cs:

public class Book
 { 
 public Book(int bookID, string bookString, int bookRating)
 {
  this.BookID = bookID;
  this.BookTitle = bookString;
  this.BookRating = bookRating;
 }

 [Key]
 [Required]
 public int BookID;
  
 public string BookTitle;
 public int BookRating;
 }

Add datasource:

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

namespace MVCAsynchronousDemo.Models
{
 public class DataSource
 {
 public List<Book> GetBooks()
 {
  return new List<Book> { 
  new Book (1, "Life of Star", 5), 
  new Book (2, "Game of Star", 2),
  new Book (3, "TBD", 4) , 
  new Book (4, "Life of Moon", 5), 
  new Book (5, "Game of Moon", 2),
  new Book (6, "TBD", 4) 
  };
 }

 public async Task<List<Book>> GetBooksAsync()
 {
  return new List<Book> { 
  new Book (1, "Life of Star", 5), 
  new Book (2, "Game of Star", 2),
  new Book (3, "TBD", 4) , 
  new Book (4, "Life of Moon", 5), 
  new Book (5, "Game of Moon", 2),
  new Book (6, "TBD", 4) 
  };
 }

 public List<Author> GetAuthors()
 {
  return new List<Author> { 
  new Author (1, "John", 5, new List<int> {1, 2 }) ,
  new Author (2, "Tom", 5, new List<int> {3,6}) ,
  new Author (3, "Tim", 5, new List<int> {4,5}) 
  };
 }

 public List<Book> GetTop2Books()
 {
  return new List<Book> { 
  new Book (1, "Life of Star", 5), 
  new Book (5, "Life of Moon", 2),
  };
 }

 public class MyViewModel
 {
  public List<Book> Books { get; set; }
  public List<Author> Authors { get; set; }
  public List<Book> TopBooks { get; set; }
 }
 }
}
  1. Create Action method

Add BookListAsync Action method in Home controller as shown-

public async Task<List<Book>> BooksListAsync()
 {
  List data = await db.GetBooksAsync();
  return data;
 }
  1. Add placeholder to render data in view (e.g. index.cshtml)

add placeholder i.e. Partial view -"BooksListAsync", as shown below

 

<div class="row">@Html.Partial("BooksListAsync")</div>

 

  1. Add definition of partial view BooksListAsync.cshtml, as below-

 


@using MVCAsynchronousDemo.Controllers;

@{
 Layout = string.Empty;
 var bookList = new HomeController().BooksListAsync();
}

<table class="table">
 <tr>
 <th>Book ID</th>
 <th>Book Title</th>
 </tr>

 @foreach (var item in bookList.Result)
 {
 <tr>
  <td>
  @item.BookID
  </td>
  <td>
  @item.BookTitle
  </td>
 </tr>
 }

</table>


Summary

Is it simple approach for working with multiple models and creating dynamic user interface?


Download Sample Source Code-MVC Asynchronous Demo_ASP_NET_MVC CSharp


Thank you …Please like this article on social site if this worked for you… Coding is fun !!! Isn't it...