How to read JSON file data using AngularJS HTTP Get method.

In this blog I am going to show you how you can read JSON content from file and display in ASP.NET MVC view.


  1. Create Empty ASP.NET MVC application

    As a first step create an empty Web application with MVC configuration.

    Open your Visual Studio -> from file menu select -> New -> Project

    From New Project window -> Select Web -> ASP.NET Web Application -> Click Ok

    From Select Template window Select Empty and from Add folders and core references for select MVC -> click Ok

    It creates a new ASP.NET MVC application with basic configuration.

    For more details see Getting Started with ASP.NET MVC


  2. Create JSON content file

    In this step you will add simple text file which contents categories data in JSON format.

    Right click on Project -> Select Add -> New Item

    From left pane of window select C# -> General and then select Text File.

    Give name category.txt. Make sure this file is get added in root directory of project.

    Add below JSON contents to category.txt file.

    [
        {
        "CategoryID" : 1,
        "CategoryName" : "Beverage"
        },
        {
        "CategoryID" : 2,
        "CategoryName" : "Condiment"
        },
        {
        "CategoryID" : 3,
        "CategoryName" : "Confection"
        },
        {
        "CategoryID" : 4,
        "CategoryName" : "Beverage"
        },
        {
        "CategoryID" : 5,
        "CategoryName" : "Dairy"
        },
        {
        "CategoryID" : 6,
        "CategoryName" : "Grains"
        },
        {
        "CategoryID" : 7,
        "CategoryName" : "Seafood"
        }
    
    ]
                    
  3. Add controller and Action method

    Add new folder with name Controllers under project.

    Right click on Controller folder -> Select Add -> Controller -> Select MVC 5 - Empty -> click Ok.

    Give name HomeController and click ok. You can see action method with name Index.

    If you do not have the Index action method in HomeController then add below code.

        public class HomeController : Controller
        {   
            public ActionResult Index()
            {
                return View();
            }
    }
                    

    For more detail understanding see ASP.NET MVC Controller and Action methods

  4. Add Index View

    Open HomeController and right click on Index select Add View.

    It adds a new view under Views -> Home folder.

    In Index.cshtml, you will add AngularJS controller and directives like ng-app. See basic Hello world example with AngularJS and ASP.NET MVC.

  5. AngularJS ng-app and ng-controller

    ng-app: is AngularJS directive. Which specifies the root element of application. It usually used with root element with of page like body or html tags.

    ng-controller: is AngularJS directive which attaches Angular controller to view.

    Add below code in index.cshtml file.

    <html>
    <head>
        <title>Angular JS Includes</title>
        <style>
            table, th, td {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }
    
                table tr:nth-child(odd) {
                    background-color: #f2f2f2;
                }
    
                table tr:nth-child(even) {
                    background-color: #ffffff;
                }
        </style>
    </head>
    <body>
        <h2>AngularJS Sample Application</h2>
        <div ng-app="" ng-controller="categoryController">
            <table>
                <tr>
                    <th>Category ID</th>
                    <th>Category Name</th>
                </tr>
                <tr ng-repeat="category in categories">
                    <td>{{ category.CategoryID }}</td>
                    <td>{{ category.CategoryName }}</td>
                </tr>
            </table>
        </div>
        <script>
            function categoryController($scope, $http) {
                var url = "http://localhost:65028/category.txt";
                $http.get(url).success(function (response) {
                    $scope.categories = response;
                });
            }
        </script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/
                            1.2.15/angular.min.js"></script>
    </body>
    </html> 
                    

    This code adds required AngularJS library. Associate ng-app and ng-controller with div.

    Code adds categoryController which reads JSON contents from Category.txt file. Notice the url uses localhost with port number you might require to change that port number.

    It uses $http.get to call url. The response of $http.get is assigned to $scope which can be used in div where controller is assigned.

    $http.get response is assigned to $scope.categories and it is used in div to display contents.

    It shows below outptut

    AngularJS http get example with JSON file


Download source code

Speak your mind :
Leave a comment for this article on dotnetbloogers.com