Angular js partial view page not loading after the button click. I have loaded the initial rendering page, once we click the button. Partial view page will render, at this time angular modules are not triggered and not returning the proper text. How can I achieve this type of scenario?
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="~/Scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div id="content"><button onclick="clicked()">Click Here</button></div>
</div>
@RenderBody()
<script>
function clicked() {
$.ajax({
type: "GET",
url: "/Home/About",
data: null,
dataType: "html",
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('#content').append(data);
},
error: function (ex) {
console.log(ex);
}
});
}
</script>
</body>
</html>
app.js
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function ($scope) {
// Function to be called on page load
$scope.firstFunction = function ($scope) {
$scope.text = "GeeksForGeeks"
}
}]);
HomeController.cs
public PartialViewResult About()
{
ViewBag.Message = "Your application description page.";
return PartialView(@"~/Views/Home/About.cshtml");
}
Partial View Page: About.cshtml
<div ng-controller="MyController">
<center ng-init="firstFunction(this)">
<h1 style="color: green;">{{text}}</h1>
</center>
</div>
Note: While clicking the button, GeeksForGeeks needs to display, here {{text}} is appending in UI element
try to remove wrong data and content type from you ajax
$.ajax({
type: "GET",
url: "/Home/About",
success: function (data) {
$('#content').append(data); //or try $('#content').html(data);
},
error: function (ex) {
console.log(ex);
}
});