Here are the steps,

Step 1: Create the basic structure of your project, View and View Model.

View and View Model

Step 2: Create Controller add Action which will return the JSON result, My Controller is as below. Note I have added action which return the JSON result.
  1. using DropdownGrid.Models;
  2. using System;
  3. using System.Web.Mvc;
  4. namespace DropdownGrid.Controllers
  5. {
  6. public class JSONANDAJAXDemoController: Controller
  7. {
  8. public ActionResult Index()
  9. {
  10. MyMultipleUpdateViewModel obj = new MyMultipleUpdateViewModel();
  11. obj.myTest1ViewModel = new MyTest1ViewModel();
  12. obj.myTest1ViewModel.MyTestUpdate = "Test1";
  13. obj.myTest2ViewModel = new MyTest2ViewModel();
  14. obj.myTest2ViewModel.MyTestUpdate = "Test2";
  15. return View(obj);
  16. }
  17. public JsonResult GetJSONObject()
  18. {
  19. MyMultipleUpdateViewModel obj = new MyMultipleUpdateViewModel();
  20. obj.myTest1ViewModel = new MyTest1ViewModel();
  21. obj.myTest1ViewModel.MyTestUpdate = "Test1" + DateTime.Now.ToString();
  22. obj.myTest2ViewModel = new MyTest2ViewModel();
  23. obj.myTest2ViewModel.MyTestUpdate = "Test2" + DateTime.Now.ToString();
  24. return Json(obj, JsonRequestBehavior.AllowGet);
  25. }
  26. }
  27. }
Step 3: Include jQuery and AJAX in your project.

Include Jquery

Case 4: Give call for your JSON action as in the following way,

JSON action

This is my AJAX call to JSON action.
  1. <script type="text/javascript">
  2. $(document)
  3. .ready(function ()
  4. {
  5. $('#Submit')
  6. .click(function ()
  7. {
  8. $.ajax(
  9. {
  10. url: '/JSONANDAJAXDemo/GetJSONObject/',
  11. type: 'get',
  12. dataType: "json",
  13. success: successFunc,
  14. error: errorFunc
  15. });
  17. function successFunc(data)
  18. {
  19. $("#Div1")
  20. .html('')
  21. $("#Div1")
  22. .html("Call using JSON Object : " + data.myTest1ViewModel.MyTestUpdate);
  23. $("#Div2")
  24. .html('')
  25. $("#Div2")
  26. .html("Call using JSON Object : " + data.myTest2ViewModel.MyTestUpdate);
  27. }
  29. function errorFunc()
  30. {
  31. alert('MVC controller call failed.');
  32. }
  33. });
  34. });
  35. </script>
Note: You may add table or design in any form of HTML.

Step 5: Include div’s in your code .
  1. <div id="Div1"> Initial State : @Model.myTest1ViewModel.MyTestUpdate </div>
  2. <div id="Div2"> Initial State : @Model.myTest2ViewModel.MyTestUpdate </div>
  3. <input type="submit" value="Load Json Object Data" id="Submit" />
Step 6: Run the project and click on button you will find the JSON data displaying in the Initial view state.

Run the project

On click load button:

Index