Download Sample Source Code-MVC Asynchronous Demo_ASP_NET_MVC C#


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 AuthorList Action method as shown-

public ActionResult AuthorsList()
    {
      return View(db.GetAuthors());
    }
  1. Placeholder to render data

Make sure your code should have reference to Jquery, if not add jquery reference as shown

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 

add placeholder 'Section_Authors'

 

<div id="Section_Authors" class="row"></div>

 

  1. Add JQuery Call

 


	<script type="text/javascript">
      $(document).ready(function () {
        $.get("/Home/AuthorsList",
          (function (data) {
            $("#Section_Authors").empty().html(data);
          }));
      });
    </script>

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 C#


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