Introduction

Many times, while working with JavaScript, we need to display the result to html controls. The data may be single text, or multiple values, or list, or anything.

Now, we are using AJAX and jQuery. So, it makes it very easy to show the data on html controls, like label, div, partial view etc.
  1. JSON result returns a single list from the action of controller and binds it to the label. It creates one controller with two actions, and creates a list of employees and initializes the data using constructor.
    1. public class TestController: Controller {
    2. List < string > employee = new List < string > ();
    3. public TestController() {
    4. employee.Add("Vithal Wadje");
    5. employee.Add("Pankaj Bajaj");
    6. employee.Add("Jeetendra Gund");
    7. }
    8. public ActionResult Index() {
    9. return View();
    10. }
    11. public ActionResult ActionName() {
    12. return Json(new {
    13. emp = employee, JsonRequestBehavior.AllowGet
    14. });
    15. }
    16. }

    Create View for the action method, Index, as shown below.
    1. @ {
    2. Layout = null;
    3. } < !DOCTYPE html > < html > < head > < meta name = "viewport"
    4. content = "width=device-width" / > < title > Index < /title> < script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" > < /script> < /head> < body > < div > < button onclick = "testClick()" > Click here < /button> < /div> < br / > < br / > < label id = "Content" > < /label> < /body> < /html> < script type = "text/javascript" > function testClick() {
    5. $.ajax({
    6. url: "/Test/ActionName",
    7. type: "POST",
    8. data: JSON.stringify(),
    9. dataType: "json",
    10. traditional: true,
    11. contentType: "application/json; charset=utf-8",
    12. success: function(result) {
    13. var name;
    14. $.each(result.emp, function(index, record) {
    15. name = ' <label>' + record.toString() + '</label> <br/>';
    16. $("#Content").append(name);
    17. });
    18. },
    19. error: function() {
    20. alert("An error has occured!!!");
    21. }
    22. });
    23. } < /script>
    Here is the result after clicking on the button:


  2. JSON result returns multiple lists from action of controller and binds them to two different labels.
    1. public class HomeController: Controller {
    2. List < string > employee = new List < string > ();
    3. List < string > designation = new List < string > ();
    4. public HomeController() {
    5. employee.Add("Vithal W.");
    6. employee.Add("Pankaj B");
    7. employee.Add("Jeetendra G.");
    8. employee.Add("Rupesh K.");
    9. designation.Add("Manager");
    10. designation.Add("Tech Lead");
    11. designation.Add("Sr. Soft Dev");
    12. designation.Add("Software Dev");
    13. }
    14. public ActionResult Index() {
    15. return View();
    16. }
    17. public ActionResult GetAllInformation() {
    18. var myResult = new {
    19. Name = employee,
    20. Information = designation
    21. };
    22. return Json(new {
    23. myResult,
    24. JsonRequestBehavior.AllowGet
    25. });
    26. }
    27. }
    Add View with JavaScript as,
    1. @ {
    2. Layout = null;
    3. } < !DOCTYPE html > < html > < head > < meta name = "viewport"
    4. content = "width=device-width" / > < title > Index < /title> < script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" > < /script> < /head> < body > < div > < button onclick = "testClick()" > Click here < /button> < /div> < br / > < br / > < div style = "width:30%; margin-left:5%;" > < div style = "width:23%; float:left;" > < label id = "Names" > < /label> < /div> < div style = "width:25%; float:left;" > < label id = "Possition" > < /label> < /div> < /div> < /body> < /html> < script type = "text/javascript" > function testClick() {
    5. $.ajax({
    6. url: "/Home/GetAllInformation",
    7. type: "POST",
    8. data: JSON.stringify(),
    9. dataType: "json",
    10. traditional: true,
    11. contentType: "application/json; charset=utf-8",
    12. success: function(result) {
    13. debugger;
    14. var name = result.myResult.Name;
    15. var designamtion = result.myResult.Information;
    16. $.each(name, function(index, record) {
    17. name = ' <label>' + record.toString() + '</label> <br/>';
    18. $("#Names").append(name);
    19. });
    20. $.each(designamtion, function(index, record) {
    21. designamtion = ' <label>' + record.toString() + '</label> <br/>';
    22. $("#Possition").append(designamtion);
    23. });
    24. },
    25. error: function() {
    26. alert("An error has occured!!!");
    27. }
    28. });
    29. } < /script>
    Again, here is the result after clicking on button.

  3. JSON result returns the html data and binds that data to a partial View.

    Create two actions. In one action method, add ViewData. This action method returns a partial View with this ViewData,
    1. @ {
    2. Layout = null;
    3. } < !DOCTYPE html > < html > < head > < meta name = "viewport"
    4. content = "width=device-width" / > < title > DemoOfHtml < /title> < script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" > < /script> < /head> < body > < div > < button onclick = "testClick()" > Click here < /button> < /div> < br / > < br / > < div id = "htmlData"
    5. style = "width:50%" > @Html.Partial("_HomePartial") < /div> < /body> < /html> < script type = "text/javascript" > function testClick() {
    6. $.ajax({
    7. url: "/Home/GetData",
    8. type: "POST",
    9. data: JSON.stringify(),
    10. dataType: "html",
    11. traditional: true,
    12. contentType: "application/json; charset=utf-8",
    13. success: function(data) {
    14. $("#htmlData").html(data);
    15. },
    16. error: function() {
    17. alert("An error has occured!!!");
    18. }
    19. });
    20. } < /script>
    Here is the result after clicking on button.