Click here to Skip to main content
15,881,812 members
Articles / Web Development / ASP.NET

Learn MVC (Model view controller) Step by Step in 7 days – Day 4

,
Rate me:
Please Sign up or sign in to vote.
4.94/5 (123 votes)
1 Aug 2014CPOL11 min read 324.1K   210   40
In day 4 we will look in to JSON ,Jquery ,Aysnch controllers and session management.

MVC 2 is quiet old and this article was written long years back. We would recommend you to start reading from our fresh Learn MVC 5 step by step series from here: -http://www.codeproject.com/Articles/866143/Learn-MVC-step-by-step-in-days-Day

Contents

So, what’s the agenda?.

In day 4 we will look in to JSON, Jquery ,Aysnch controllers and session management with MVC.

Get links of other parts of ASP.NET MVC tutorials as below: -

Day 1: -Controllers, strong typed views and helper classes

http://www.codeproject.com/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7

Day 2: - Unit test, routing and outbound URLS

http://www.codeproject.com/Articles/259560/Learn-MVC-Model-view-controller-Step-by-Step-in-7

Day 3:- Partial views, Data annotations,Razor, Authentication and Authorization

http://www.codeproject.com/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-4

Day 4:- JSON, JQuery, State management and Asynch controllers

http://www.codeproject.com/Articles/667841/Learn-MVC-Model-view-controller-Step-by-Step-in-3

Day 5:- Bundling , Minification , ViewModels,Areas and Exception handling

http://www.codeproject.com/Articles/724559/Learn-MVC-Model-view-controller-Step-by-Step-in-7

Day 6: - Display Modes,MVC OAuth,Model Binders,Layout and Custom view engine

http://www.codeproject.com/Articles/789278/Learn-MVC-Model-view-controller-Step-by-Step-in-d

Lab 15:- JSON , MVC and Jquery

In case you are new to JSON please read this before moving ahead with this lab ,What is JSON ?.

So in this lab we will expose a simple “Customer” object from MVC in JSON format and consume the same using Jquery.

For this lab please ensure that the project is created by using basic project template so that the necessary Jquery libraries are included with the MVC project.

Image 1

Step 1 :- Create a simple Customer model

So the first step is to create a simple “Customer” class in the MVC project.

HTML
public class Customer
    {
        private string _CustomerCode;
        public string CustomerCode
        {
            get { return _CustomerCode; }
            set { _CustomerCode = value; }
        }
    } 

Step 2 :- Expose Customer object as JSON

To expose the customer object in JSON format we need to use “JsonResult” as shown in the below code snippet.

  • HTML
    public JsonResult getJson()
    {
                Customer obj = new Customer();
                obj.CustomerCode = "c001";
                return Json(obj,JsonRequestBehavior.AllowGet);
    }

    Please do once run the controller withthe above JSON action to check if the JSON result is displayed properly. If you are using chrome the display comes on the browser , if its internet explorer it spits out a file.

    Image 2

    Step 3 :- Consume the JSON controller in jquery

    In case you are new to Jquery , please read this What is jquery ?

    The next step is to consume the JSON data in Jquery using MVC view. So go ahead and add a view for example my view name is “LearnJquery.aspx”.

    First thing add the Jquery library at the top of the ASPX page. In case you do not find jquery library in your project that means you have not created the MVC project using the basic template.

    HTML
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    You can then make a call the controller which is exposing in JSON format using “getJson” method as shown below. Its takes three parameters:-
    HTML
     $.getJSON("/Json/getJson", null, Display);
    function Display(data)
    {
    alert(data.CustomerCode);
    }

    The complete MVC view HTML looks as shown below. I have created a simple HTML button and on the click event I am calling a “getJson” javascript method which makes a call to the JSON controller and displays the JSON data in a javascript alert.

    HTML
    <script language="javascript">
            function getJson() {
                $.getJSON("/Json/getJson", null, Display);
                return true;
            }
            function Display(data)
            {
                alert(data.CustomerCode);
            }
    </script>
    <input type="button" value="See Json data" onclick="return getJson();"/>  

    This view I have invoked by using “DisplayJson” action.

    HTML
    public class JsonController : Controller
    {
            public ActionResult DisplayJson()
            {
                return View("LearnJquery");
            }
    } 

    Step 4 :- Run the application and see the data

    After you have done all the hardwork its time to hit the “DisplayJson” action to see the beauty running.

    Image 3

    Lab 16:- Session management in MVC (ViewData,ViewBag,TempData and session variables)

    The primary goal of MVC is to create web applications and web applications use HTTP protocol. Now HTTP protocol is a stateless by nature. So when you send a request to MVC application it serves the request and forgets about the request. Next time when the same user sends the request MVC treats that as a complete new request.

    Now think about the below situation:-

    In short we need to have some kind of mechanism which will help us to remember states between request and response of MVC.

    There are 3 ways of maintaining states in MVC and these ways can be used depending from which layer to which layer you navigate.

    Temp data: -Helps to maintain data on redirects for a single request and response. Now the redirects can be from controller to controller or from controller to view.

    Image 4

    View data: - Helps to maintain data when you move from controller to view.

    View Bag: - It’s a dynamic wrapper around view data. When you use “Viewbag” type casting is not required. It uses the dynamic keyword internally.

    Image 5

    Session variables: - By using session variables we can maintain data until the browser closes.

    Let’s demonstrate the above fundamental with a demo.

    Step 1:- Create two controllers “DefaultController1” and “DefaultController2”.

    Add two controllers “DefaultController1” and “DefaultController2”.

    Image 6

    Step 2 :- Set Session , tempdata , viewdata and viewbag

    In the “Default1Controller” in “Action1” we set session,tempdata,viewdata and viewbag values as shown in the below code snippet. Once we set the values we do a redirect to the action “SomeOtherAction” which belongs to “Controller2”.

    HTML
    public class Default1Controller : Controller
        {
            //
            // GET: /Default1/
            public ActionResult Action1()
            {
                Session["Session1"] = "UntilBrowserCloses";
                TempData["FortheFullRequest"] = "FortheFullRequest";
                ViewData["Myval"] = "ControllertoView";
                ViewBag.MyVal = "ControllertoView";
                return RedirectToAction("SomeOtherAction","Default2");
            }    } 

    Step 3:- Read Session,tempdata ,viewdata and viewbag values

    In “Default2Controller” we will try to read values set in “Default1Controller”. Once the values are read we invoke a view called as “SomeView”.

    Please note I am setting “ViewData” and “ViewBag” before redirecting to the view.

    HTML
    public class Default2Controller : Controller
        {
            //
            // GET: /Default2/
            public ActionResult SomeOtherAction()
            {
               string str = Convert.ToString(TempData["FortheFullRequest"]);
               string str2 =  Session["Session1"].ToString();
               string str3 = Convert.ToString(ViewData["Myval"]);
               ViewData["Myval"] = "ControllertoView";
    ViewBag.MyVal = "ControllertoViewCollection";
                return View("SomeView");
            }
        } 

    The “SomeView”view justdisplays the data present in “TempData” ,”ViewData” , “ViewBag” and “Session” .

    HTML
    <%= TempData["FortheFullRequest"] %><br />
    <%= ViewData["Myval"] %><br />
    <%=  Session["Session1"] %>
    <%=  ViewBag.MyVal %>
    <a href="/Default1/Action1">Click</a> 

    So let’s put debug points in both the controller actions and let’s hit Default1 controller and Action1 action http://localhost:1203/Default1/Action1 . So in this action session,tempdata ,viewdata and viewbag are loaded. Below is how the watch window looks with data.

    Image 7

    Now from here we are redirecting to controller2 action “SomeOtherAction”.

    In controller2 you can see get “TempData” and “Session” variables but not “ViewBag” and “ViewData”( See “str3” and “str4” are set to null). In other words “ViewData” and “ViewBag” do not persist data in redirects while “TempData” and “Session” variables do.

    I have set “ViewData” and “ViewBag” with some data again before invoking the view “SomeView”.

    Image 8

    When the view gets invoked we can see all the data. In other words “ViewData” and “ViewBag” persist data from controller to view. And also tempdata and session have persisted data.

    Image 9

    Now when the view invokes I have kept a click hyper link which invokes “Action1” from “Controller1”. This is to simulate a fresh request.

    Image 10

    When we click on the link. All the other variables go off only session variables persist, see the below figure. It means “Session” variables can persist between requests.

    Image 11

    Below is a summary table which shows different mechanism of persistence.

    Maintains data between ViewData/ViewBag TempData ( For single request) Session
    Controller to Controller No Yes Yes
    Controller to View Yes Yes Yes
    View to Controller No No Yes

    Lab 17:- Asynch controllers

    MVC applications at the end of the day are web applications which are hosted inside IIS.Now when any request comes to MVC controller it pulls up a thread from thread pool and serves that request. In other words IIS web server maintains a pool of threads rather than creating threads from scratch again and again to gain performance benefits.
    Let’s assume that a web server has a thread pool size of 2. Now this is just an assumption because a pool size of two is very much hypothetical. But to make things simple consider that the thread pool size is 2.

    Image 12

    So let’s say first request comes to the site, IIS pulls up a readymade thread object from the thread pool and starts serving that request. In the meantime let’s say second request comes in so again IIS pulls up a thread from the thread pool and starts serving the second request.

    Now the fun starts when third request comes in. The IIS webserver does not have any more thread objects in the pool as those are already serving “request1” and “request2”. So he just moves the third request in to a waiting mode or the server can send “503 busy” message to the client.

    This situation is termed as “Thread Starvation”. Thread starvation situations can be overcome by making the request “Asynchronous”. So the request comes in and immediately the request is processed in an “Asynch” manner and releasing the thread serving the request immediately.

    So to avoid this we can achieve the same by making our controllers “Asynch”.

    Below is a nice video which demonstrates MVC Thread starvation.

    Image 13

    So let’s understand step by step how to implement MVC Asynch controllers.

    Step 1 :- Inherit from AsyncController class

    Consider the below controller class “HeavyController” which has an action “SomeHeavyMethod” and this action waits for 20 seconds. So let understand how we can make this simple controller aasynch controller.

    HTML
    public class HeavyController : Controller
    {
            //
            // GET: /Heavy/
            public ActionResult SomeHeavyMethod()
            {
                Thread.Sleep(20000);
                return View();
            }
    } 

    So the first step is to inherit from “AsyncController” class.

    HTML
    public class HeavyController : AsyncController
    {
    }

    Step 2 :- Mark methods with Async appended

    The next step is to append “Async” word after the methods. So you can see “SomeHeavyMethod” has been changed to “SomeHeavyMethodAsync”.

    The heavy logic code i.e. “Thread.Sleep” is moved to a different method and that method is invoked using task parallel library from the “SomeHeavyMethodAsync”.

    Every time a “Task” or a “Thread” is started we increment the outstanding operations counter by using “AsynchManager” and every time a multi-threaded task is completed we decrement the counter.

    HTML
     public class HeavyController : AsyncController
    {
    public void SomeHeavyMethodAsync()
    {
    AsyncManager.OutstandingOperations.Increment();
    Task.Run(new Action(Heavy));
    }
    public void Heavy()
    {
    Thread.Sleep(20000);
    AsyncManager.OutstandingOperations.Decrement();
    }
    } 

    Step 3 :- Create the completed method

    Now once all the multi-threaded tasks complete and the outstanding operations are zero we need to return the view. So for the same we need to create an action result method with “Completed” word appended. This method gets called when all outstanding operations are zero.

    HTML
    public ActionResult SomeHeavyMethodCompleted()
    {
           return View();
    }

    Step 4:- Ensure to create “SomeHeavyMethod.aspx” view

    Also ensure you add “SomeHeavyMethod” view with some text on it.

    HTML
    <html>
    <head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Some heavy method</title>
    </head>
    <body>
    <div>
            This is loaded after some time....
    </div>
    </body>
    </html> 

    Step 5 :- Run and enjoy

    Now try hitting “Heavy/SomeHeavyMethod” and see the output. I would suggest you to measure “Thread queued” to see the benefit of asynch controller. Watch this video to see how to measure “Thread Queued” http://www.youtube.com/watch?v=wvg13n5V0V0.

    What’s for Fifth day?

    Still working on it.

    Final note, you can watch my c# and MVC training videos on various sections like WCF, Silver light, LINQ, WPF, Design patterns, Entity framework etc. By any chance do not miss my .NET and c# interview questions and answers book from www.questpond.com .

    For technical training related to various topics including ASP.NET, Design Patterns, WCF, MVC, BI, WPF contact SukeshMarla@gmail.com or visit www.sukesh-marla.com

    Start with MVC 5

    In case you want to start with MVC 5 start with the below video Learn MVC 5 in 2 days.

    Image 14

    50 MVC Interview questions with answers

    In case you are going for interviews you can read my 50 Important MVC interview questions with answer article http://www.codeproject.com/Articles/556995/Model-view-controller-MVC-Interview-questions-and

    Are you completely new to MVC?

    In case you are completely a fresher I will suggest to start with the below 4 videos which are 10 minutes approximately so that you can come to MVC quickly.

    Lab 1:- A simple Hello world ASP.NET MVC application.

    Image 15

    Lab 2:- In this Lab we will see how we can share data between controller and the view using view data.

    Image 16

    Lab 3 :- In this lab we will create a simple customer model, flourish the same with some data and display the same in a view.

    Image 17

    Lab 4 :- In this lab we will create a simple customer data entry screen with some validation on the view.

    Image 18

    • The first parameter in “getJson” is the MVC JSON URL with complete controller/action path format.
    • The second parameter is the data to be passed. For now its NULL as we are more interesting in getting JSON data rather posting data.
    • The last parameter is the call back method (“Display”) which will be invoked once we get the JSON data from the controller. The “Display” function is also available in the below code snippet. I am just putting an alert with the property name. FYI you can see how I have just typed “data.CustomerCode” , no parsing nothing the JSON data is automatically translated to javascript object.
    • End user sends request to a MVC site.
    • MVC sends a login page.
    • User enters proper details and sends data to the MVC application.
    • MVC validates the user and sends home page of the site. MVC application now forgets everything about the user as it’s stateless.
    • Now user clicks on one of the home page links. This is sent to the MVC application and because MVC application has forgotten everything about the user, he sends a login page again for authentication….User would feel Weird…

For further reading do watch the below interview preparation videos and step by step video series.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect https://www.questpond.com
India India

Written By
Founder Just Compile
India India
Learning is fun but teaching is awesome.

Who I am? Trainer + consultant + Developer/Architect + Director of Just Compile

My Company - Just Compile

I can be seen in, @sukeshmarla or Facebook

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 1189221825-Oct-15 22:25
Member 1189221825-Oct-15 22:25 
GeneralMy vote of 5 Pin
Sibeesh KV3-Oct-14 1:55
professionalSibeesh KV3-Oct-14 1:55 
QuestionA help needed Pin
Sibeesh KV3-Oct-14 0:58
professionalSibeesh KV3-Oct-14 0:58 
AnswerRe: A help needed Pin
CodeLocked28-Jan-15 5:49
CodeLocked28-Jan-15 5:49 
GeneralThanks Notes Pin
Akshay Bohra198830-Aug-14 8:29
professionalAkshay Bohra198830-Aug-14 8:29 
GeneralRe: Thanks Notes Pin
Marla Sukesh6-Sep-14 8:11
professional Marla Sukesh6-Sep-14 8:11 
QuestionAsync Await Would Be Grate Pin
debdeep chaudhuri30-Jun-14 1:56
debdeep chaudhuri30-Jun-14 1:56 
GeneralGreat Tutorial Pin
ram aguilar19-May-14 22:55
ram aguilar19-May-14 22:55 
GeneralMy vote of 5 Pin
sandeepk.techie20-Feb-14 23:12
sandeepk.techie20-Feb-14 23:12 
QuestionVery Nice article on MVC Pin
Member 1019928619-Feb-14 2:21
professionalMember 1019928619-Feb-14 2:21 
QuestionHave query on TempData Pin
Murali Gowda13-Feb-14 19:41
professionalMurali Gowda13-Feb-14 19:41 
Questionissue Pin
Member 1059443713-Feb-14 4:41
Member 1059443713-Feb-14 4:41 
AnswerRe: issue Pin
Shivprasad koirala13-Feb-14 17:46
Shivprasad koirala13-Feb-14 17:46 
GeneralRe: issue Pin
Member 1059443713-Feb-14 18:40
Member 1059443713-Feb-14 18:40 
GeneralRe: Pin
Member 1059443713-Feb-14 18:40
Member 1059443713-Feb-14 18:40 
QuestionWhen will the rest be released? Pin
Member 1055288527-Jan-14 5:01
Member 1055288527-Jan-14 5:01 
AnswerRe: When will the rest be released? Pin
Shivprasad koirala13-Feb-14 17:47
Shivprasad koirala13-Feb-14 17:47 
QuestionNot getting basic template in visual studio 2010. Pin
Kushagra Pal7-Jan-14 2:37
Kushagra Pal7-Jan-14 2:37 
AnswerRe: Not getting basic template in visual studio 2010. Pin
Shivprasad koirala7-Jan-14 6:01
Shivprasad koirala7-Jan-14 6:01 
GeneralRe: Not getting basic template in visual studio 2010. Pin
Kushagra Pal7-Jan-14 8:01
Kushagra Pal7-Jan-14 8:01 
GeneralGreat Job - Looking forward to the rest of the series... Pin
jcoons29-Dec-13 2:57
jcoons29-Dec-13 2:57 
GeneralRe: Great Job - Looking forward to the rest of the series... Pin
Shivprasad koirala29-Dec-13 5:27
Shivprasad koirala29-Dec-13 5:27 
QuestionThanks for your excellent work sir Pin
Raju Mukherjee12-Dec-13 8:45
professionalRaju Mukherjee12-Dec-13 8:45 
Generalvery gud article Pin
Member 100167203-Dec-13 22:26
Member 100167203-Dec-13 22:26 
GeneralMy vote of 5 Pin
roscler26-Nov-13 18:37
professionalroscler26-Nov-13 18:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.