Jquery – Loading partial view using AngularJS in asp.net MVC application

ajaxangularjsasp.net-mvcjquery

I am creating an ASP.net MVC application.

I am loading a partial view in a div using jQuery and AngularJS as following:

I am doing an ajax call using AngularJS and storing the result as the content in div "courseList" using jQuery. This happens when the user clicks on links.

  angular.module('Domain', []).controller('DomainCtrl', function (
    $http, $scope, $window) {
    $scope.GetCourseList = function (domain) {
      $http({
        method: 'GET',
        url: '/Showcase/CourseList',
        params: {
          domain: domain
        }
      }).then(function (obj) {
        $('#courseList').html(obj.data);    //jQuery code to load the content
      });
    };
  });

Html:

<nav ng-app="Domain">
  <h2>Domains</h2>
  <ul ng-controller="DomainCtrl" ng-init="domain=''">
    @foreach (var item in (List<string>)ViewBag.domains)
    {
      <li><a href="#" ng-click="GetCourseList('@item.ToString()')">@item.ToString() </a></li>
    }
  </ul>
</nav>

<div id="courseList">    </div>

The above code works fine. But I am using jQuery to populate the <div ID="courseList">.

How can I achieve this with AngularJS and no jQuery?

Best Answer

You can replace calls to jQuery $ dollar e.g.

$('#courseList').html(obj.data);

with Angular's equivalent which is angular.element

angular.element('#courseList').html(obj.data);

Under the hood though, Angular will use jQuery if it's available i.e. you are including a version of jQuery in a <script> tag somewhere. Otherwise Angular will use jqLite, which is internally available as part of Angular itself.

Related Solutions

Json – ASP.NET MVC controller actions that return JSON or partial html

In your action method, return Json(object) to return JSON to your page.

public ActionResult SomeActionMethod() {
  return Json(new {foo="bar", baz="Blech"});
}

Then just call the action method using Ajax. You could use one of the helper methods from the ViewPage such as

<%= Ajax.ActionLink("SomeActionMethod", new AjaxOptions {OnSuccess="somemethod"}) %>

SomeMethod would be a javascript method that then evaluates the Json object returned.

If you want to return a plain string, you can just use the ContentResult:

public ActionResult SomeActionMethod() {
    return Content("hello world!");
}

ContentResult by default returns a text/plain as its contentType.
This is overloadable so you can also do:

return Content("<xml>This is poorly formatted xml.</xml>", "text/xml");

Asp.net-mvc – Compile Views in ASP.NET MVC

From the readme word doc for RC1 (not indexed by google)

ASP.NET Compiler Post-Build Step

Currently, errors within a view file are not detected until run time. To let you detect these errors at compile time, ASP.NET MVC projects now include an MvcBuildViews property, which is disabled by default. To enable this property, open the project file and set the MvcBuildViews property to true, as shown in the following example:

<Project ToolsVersion="3.5" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <MvcBuildViews>true</MvcBuildViews>
  </PropertyGroup>

Note Enabling this feature adds some overhead to the build time.

You can update projects that were created with previous releases of MVC to include build-time validation of views by performing the following steps:

Open the project file in a text editor.
Add the following element under the top-most <PropertyGroup> element: <MvcBuildViews>true</MvcBuildViews>
At the end of the project file, uncomment the <Target Name="AfterBuild"> element and modify it to match the following:

<Target Name="AfterBuild" Condition="'$(MvcBuildViews)'=='true'">
    <AspNetCompiler VirtualPath="temp" PhysicalPath="$(ProjectDir)\..\$(ProjectName)" />
</Target>

Best Answer

Related Solutions

Json – ASP.NET MVC controller actions that return JSON or partial html

Asp.net-mvc – Compile Views in ASP.NET MVC

Related Topic