AngularJS & Partial View

Main Home Page (Shell Page)

            <li><a href="#/ViewContent">View Contents</a></li>
    <section id="dynamic-content">
        <ng-view> <!--partials are injected here--></ng-view>

JavaScript Part-

<script src=""></script>
<script src=""></script>
<script src=""></script>

    var app = angular.module("app", ['ngRoute', 'ngResource']);
    app.config(function ($routeProvider) {
                  templateUrl: "/Admin/ContentList",
                  controller: "ContentListController"

    app.controller('ContentListController', function ($scope, $http) {
        $http.get('/Admin/GetContentList').success(function (response) {
                $scope.contents =;

MVC Controller- Admin

//This returns only html without any data.
public ActionResult ContentList()
    return View("ContentList");

//Returns data
public JsonResult GetContentList()
    List<Content> contents = new List<Content>();
    using (OleDbConnection connection=new OleDbConnection(ConnectionString))
        using (OleDbCommand command=new OleDbCommand())
            command.Connection = connection;
            command.CommandText = "SELECT....";
            OleDbDataReader reader = command.ExecuteReader(CommandBehavior.CloseConnection);
            while (reader.Read())
                Content content = new Content();
                content.ContentId = reader["ContentId"].ToString();
                content.ContentTitle = reader["ContentTitle"].ToString();
                content.ContentTypeName = reader["ContentTypeName"].ToString();
                content.PublishDate = Convert.ToDateTime(reader["PublishDate"]).ToString("dd MMM yyyy");
    return Json(new {success=true,data=contents }, JsonRequestBehavior.AllowGet);

Partial View: ContentList

            <th>Publish Date</th>
        <tr data-ng-repeat="content in contents">
            <td><a href="/NewContent/EditContent?contentid={{content.ContentId}}">  Edit</a>&nbsp;&nbsp; 
                <a href="/NewContent/DeleteContent?contentid={{content.ContentId}}">  Delete</a> 

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s