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>

AngularJS – A Simple Form Submission

HTML Part –

        <form ng-submit="processForm()">
            <input type="text" name="loginName" ng-model="formData.loginName" />
            <input type="password" name="loginPassword" ng-model="formData.loginPassword" />
            <input type="submit" class="button" value="Submit" />
        </form>

JavaScript Part-

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script>
   var formApp = angular.module('formApp', []);
   function formController($scope, $http) {
      // create a blank object to hold our form information
      // $scope will allow this to pass between controller and view
      $scope.formData = {};

      // process the form
      $scope.processForm = function () {
      $http({
           method: 'POST',
           url: '/Admin/ProcessLogin',
           data: $.param($scope.formData),  // pass in data as strings
           headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
            .success(function (response) {
                 console.log(response);
                 if (response.result=="success") {
                      if (response.loginresult == "failed") {
                          alert(response.message);
                      }
                      else {
                            window.location = response.redirecturl;
                      }
                 }

                });
            };
        }

    </script>

Server-side Part-

public JsonResult ProcessLogin(String loginName, String loginPassword)
{
    return Json(new { result = "success", loginresult = "success", redirecturl = "/Admin/AdminHome"}, JsonRequestBehavior.AllowGet);
}