Display data in form on AnchorLink Click using AngularJS in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I have menu bar with relevat n no of child pages from database.

currently my probelm is that if i am trying to navigate child page (any page) is not working.

in that i am fetching menu names dynamically

if i am trying to navigate to any page it was not working just it was displaying form.

Could you please help me 

@{ 
    Layout = null;
}
<html>
<head>

    <script src="~/scripts/angular.js"></script>
    <script src="~/scripts/angular.min.js"></script>
    <script>
        var app = angular.module("MyApp", []);
        app.controller("MyControll", ['$scope', '$http', function ($scope, $http) {
            Getall();
            function Getall() {
                debugger;
                $http({
                    method: "get",
                    url: "/menuselection/getAll/"
                }).then(function (response) {
                    $scope.employees = response.data;
                }, function () {
                    alert("Error Occur");
                })
            };
        }]);
    </script>

</head>
<body ng-app="MyApp" ng-controller="MyControll">
    <h4>An Unordered List:</h4>
    <div ng-repeat="employee in employees">
        <ul>
            <li><a href="{{employee.Url}}">{{employee.ControllerName}}</a></li>
        </ul>
    </div>
</body>
</html>

 

Posted one month ago

Hi mahesh213,

You need to verify your $http service that are used to populate the form.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Namespaces

using System.Configuration;
using System.Data.SqlClient;

Controller

Home

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

Report

public class ReportController : Controller
{
    // GET: /Report/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployees()
    {
        List<object> employees = new List<object>();
        string sql = "SELECT TOP 5 EmployeeID,FirstName,LastName,City,Country FROM Employees ORDER BY EmployeeID ASC";
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand(sql))
            {
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        employees.Add(new
                        {
                            EmployeeId = sdr["EmployeeID"],
                            FirstName = sdr["FirstName"],
                            LastName = sdr["LastName"],
                            City = sdr["City"],
                            Country = sdr["Country"]
                        });
                    }
                }
                conn.Close();
            }

            return Json(employees, JsonRequestBehavior.AllowGet);
        }
    }
}

Report1

public class Report1Controller : Controller
{
    // GET: /Report1/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployees()
    {
        List<object> employees = new List<object>();
        string sql = "SELECT TOP 4 EmployeeID,FirstName,LastName,City,Country FROM Employees ORDER BY EmployeeID DESC";
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand(sql))
            {
                cmd.Connection = conn;
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        employees.Add(new
                        {
                            EmployeeId = sdr["EmployeeID"],
                            FirstName = sdr["FirstName"],
                            LastName = sdr["LastName"],
                            City = sdr["City"],
                            Country = sdr["Country"]
                        });
                    }
                }
                conn.Close();
            }

            return Json(employees, JsonRequestBehavior.AllowGet);
        }
    }
}

View

Home

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyControll", function ($scope, $http) {
            $scope.employees = [
            { Id: 1, ControllerName: "Report", Url: "/report/Index/" },
            { Id: 2, ControllerName: "Report1", Url: "/report1/Index/"}];
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyControll">
    <h4>An Unordered List:</h4>
    <div ng-repeat="employee in employees">
        <ul>
            <li><a href="{{employee.Url}}">{{employee.ControllerName}}</a></li>
        </ul>
    </div>
    <div class="content">
    </div>
</body>
</html>

Report

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $http, $window) {
            $http({
                method: "get",
                url: "/Report/GetEmployees/"
            }).then(function (response) {
                $scope.Employees = response.data;
            });
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in Employees">
                    <td>{{ employee.EmployeeId }}</td>
                    <td>{{ employee.FirstName }}</td>
                    <td>{{ employee.LastName }}</td>
                    <td>{{ employee.City }}</td>
                    <td>{{ employee.Country }}</td>
                </tr>
            </tbody>
        </table>
        <br />
        <%:Html.ActionLink("Back","Index","Home") %>
    </div>
</body>
</html>

Report1

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $http, $window) {
            $http({
                method: "get",
                url: "/Report1/GetEmployees/"
            }).then(function (response) {
                $scope.Employees = response.data;
            });
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in Employees">
                    <td>{{ employee.EmployeeId }}</td>
                    <td>{{ employee.FirstName }}</td>
                    <td>{{ employee.LastName }}</td>
                    <td>{{ employee.City }}</td>
                    <td>{{ employee.Country }}</td>
                </tr>
            </tbody>
        </table>
        <br />
        <%:Html.ActionLink("Back","Index","Home") %>
    </div>
</body>
</html>

Screeenshot