AngularJS & Partial View

Main Home Page (Shell Page)

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

JavaScript Part-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>

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

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

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....";
            connection.Open();
            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");
                contents.Add(content);
            }
        }
    }
    return Json(new {success=true,data=contents }, JsonRequestBehavior.AllowGet);
}

Partial View: ContentList

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Publish Date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="content in contents">
            <td>{{content.ContentTitle}}</td>
            <td>{{content.ContentTypeName}}</td>
            <td>{{content.PublishDate}}</td>
            <td><a href="/NewContent/EditContent?contentid={{content.ContentId}}">  Edit</a>&nbsp;&nbsp; 
                <a href="/NewContent/DeleteContent?contentid={{content.ContentId}}">  Delete</a> 
             </td>
        </tr>
    </tbody>
</table>
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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