Hi,
I am migrating some of my old views into new asp.net mvc core 6 views.
Can I use angularjs in .net 6 ?
If so then guide me
My old views were using below plugin and I am using jquery V3.5.1.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js
If I remove angularjs logic from my views then I 'll have to re-write the logic which would be based in jquery and razor view.
It will increase my development time and due to the lack of time, I want to use the angularjs logic as same.
Previously, This view contained the combined jquery and angularjs controller logic.
But now there is a bit different with new logic, I am now calling through fetch api to load the partial view.
and this is the major cause of issue. Now angularjs is not working as expected.
See my below code
<div id="FindBranchPage">
</div>
and the loading mechanism is as follow
const loadFindBranch = async (data) => {
hidePagesById(2);
const settingsFindBranch = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
};
debugger;
//affixScriptToBody("/lib/apis/vehiclelistctrl.js", function () { alert("The script \"vehiclelistctrl.js\" has been correctly loaded."); })
const responseFindBranch = await fetch(REACT_APP_FINDBRANCH, settingsFindBranch);
if (responseFindBranch && !responseFindBranch.ok) {
resultPages = [];
}
else {
resultPages = await responseFindBranch.text();
document.querySelector('#FindBranchPage').innerHTML = resultPages;
//debugger;
if (angular.element(document.getElementById('divIdFrmCarData')).scope()) {
angular.element(document.getElementById('divIdFrmCarData')).scope().getCarsData();
angular.element(document.getElementById('divIdFrmCarData')).scope().$apply();
}
/* let vhscriptElement = document.createElement("script");
vhscriptElement.src = "/lib/apis/vehiclelistjs.js";
//vhscriptElement.async = true;
document.body.appendChild(vhscriptElement); */
}
}
and this is the controller action
public IActionResult FindBranch(/*int franchiseId = 0*/[FromBody] BookingVM model)
{
int franchiseId = model != null && model.HomeSearch != null &&
model.HomeSearch.FranchiseId.HasValue ? model.HomeSearch.FranchiseId.Value:0;
ViewBag.SrvDtTime = DateTime.Now.ToString("MM/dd/yyyy HH:mm");
ViewBag.Booking = lObjBooking;
ViewBag.FranchiseId = franchiseId;
return PartialView(model);
}
and this is the FindBranch.cshtml
@using System
@model BookingVM;
@using Microsoft.Extensions.Configuration
@using CarRentalWidget.BLL.Services
@using System.Net.Http
@using System.Text.Json
@inject IConfiguration Configuration
@{
BookingVM? bd = Model;
}
<div id="divIdFrmCarData" ng-app="myapp" ng-controller="CarsController" class="ng-scope">
<div id="dropdown-bar" ng-cloak="">
<div class="dropdown-barholder">
<ul>
<li class="option1"><a href="javascript:void(0)">{{ALLCARS}}</a></li>
<li class="option2"><a href="javascript:void(0)">{{FUELTYPE}}</a></li>
<li class="option3"><a href="javascript:void(0)">{{TRANSMISSION}}</a></li>
</ul>
<div class="options">
<ul class="option1">
<li ng-click="Group = ''; ALLCARS = 'ALL CARS'"><a href="javascript:void(0)">ALL</a></li>
<li ng-click="Group = 'economy'; ALLCARS = 'ECONOMY'"><a href="javascript:void(0)">ECONOMY</a></li>
<li ng-click="Group = 'small'; ALLCARS = 'SMALL'"><a href="javascript:void(0)">SMALL</a></li>
<li ng-click="Group = 'small5door'; ALLCARS = 'SMALL5DOOR'"><a href="javascript:void(0)">SMALL5DOOR</a></li>
<li ng-click="Group = 'medium'; ALLCARS = 'MEDIUM'"><a href="javascript:void(0)">MEDIUM</a></li>
<li ng-click="Group = 'large'; ALLCARS = 'LARGE'"><a href="javascript:void(0)">LARGE</a></li>
</ul>
<ul class="option2">
<li ng-click="FuelType = ''; FUELTYPE = 'FUEL TYPE'"><a href="javascript:void(0)">All</a></li>
<li ng-click="FuelType = 'p'; FUELTYPE = 'PETROL'"><a href="javascript:void(0)">PETROL</a></li>
<li ng-click="FuelType = 'd'; FUELTYPE = 'DIESEL'"><a href="javascript:void(0)">DIESEL</a></li>
</ul>
<ul class="option3">
<li ng-click="Transmission = ''; TRANSMISSION = 'TRANSMISSION' "><a href="javascript:void(0)">All</a></li>
<li ng-click="Transmission = 'Manual'; TRANSMISSION = 'MANUAL' "><a href="javascript:void(0)">MANUAL</a></li>
<li ng-click="Transmission = 'Automatic'; TRANSMISSION = 'AUTOMATIC' "><a href="javascript:void(0)">AUTOMATIC</a></li>
</ul>
</div>
</div>
</div>
<main>
<div class="main-holder" ng-cloak="">
<form id="frm-Select-Vehicle" name="frm-Select-Vehicle" method="POST" action="/home/extras">
<input type="hidden" id="SelectedCar" name="SelectedCar" value="" />
<input type="hidden" id="UpgradeCar" name="UpgradeCar" value="" />
<div class="vehicles">
<p style="text-align: center" ng-show="NoData == true">Sorry, No vehicle is Found</p>
<div class="vehicle-detail" ng-repeat="car in CarsData | filter : { FuelType : FuelType, Transmission: Transmission, Group : Group}" ng-show="CarsData.length > 0" data-isavailable="{{car.IsAvailable}}">
<div class="vehicle-img" style="text-align: center">
<img src="{{car.GroupIcon}}" class="searchFleetImages selected-car" alt="{{car.Group}}">
</div>
<div class="vehicle-info">
<div class="cost-holder find-vehicles">
<div class="vehicle-cost">
<div class="content">
<div class="cost">
<div class="title">{{car.Group}} </div>
<h2>Total: £{{car.Price.toFixed(2)}}</h2>
<h3>Per Day: £{{car.PerDayPrice}}</h3>
<input type="hidden" id="Id" value="{{car.GroupId}}" />
<input type="hidden" id="Tariff" value="{{car.Tariff}}" />
<input type="hidden" id="IsSeasonExists" value="{{car.IsSeasonExists}}" />
</div>
<a href="javascript:void(0)" ng-show="{{car.IsAvailable == true}}" class="btn-blue btn-block select-car">BOOK NOW!</a>
<a href="javascript:void(0)" class="btn-blue btn-block car-enquiry" style="margin-top: 10px;">Enquiry</a>
</div>
</div>
</div>
<div class="holder">
<ul>
<li ng-repeat="ex in car.Extras" class="{{ex.ClassName}}"><img ng-src="{{ex.Icon}}" /> {{ex.Name}}</li>
</ul>
<div class="dropdown">
<span></span>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</main>
</div>
<script type="text/javascript">
$(document).ready(function () {
window.onload = function () {
angular.element(document.getElementById('divIdFrmCarData')).scope().getCarsData();
angular.element(document.getElementById('divIdFrmCarData')).scope().$apply();
}
});
var app = angular.module('app', []);
app.controller('CarsController', function ($scope, $http) {
$scope.ALLCARS = 'ALL CARS';
$scope.FUELTYPE = 'FUEL TYPE';
$scope.TRANSMISSION = 'TRANSMISSION';
$scope.AIRCONDITIONING = 'AIR CONDITIONING';
$scope.CarsData = [];
$scope.NoData = false;
$scope.loading = true;
let outOfHoursObj = getElement("OutOfHoursParam");
let openingHrsSurcharge = 0;
if (outOfHoursObj && outOfHoursObj.item3) {
openingHrsSurcharge = outOfHoursObj.item3;
}
let data = { HomeSearch: getElement("SelectedParamInSearch"), PaymentDetails:{vatpercentage:0,openinghrssurcharge:openingHrsSurcharge} };
$http.post('/api/Rental/getdata',data)
.success(function (data) {
debugger;
if (data == null || data == '') {
$scope.NoData = true;
} else {
$scope.NoData = false;
$scope.CarsData = data;
$scope.ALLCARS = 'ALL CARS';
$scope.FUELTYPE = 'FUEL TYPE';
$scope.TRANSMISSION = 'TRANSMISSION';
$scope.AIRCONDITIONING = 'AIR CONDITIONING';
$scope.$apply();
}
})
.catch(function (err) {
// Log error somehow.
})
.finally(function () {
// Hide loading spinner whether our call succeeded or failed.
$scope.loading = false;
//hideProgress();
});
});
Now this line is the issue ,
document.querySelector('#FindBranchPage').innerHTML = resultPages;
after assigning in FindBranchPage div, Angular and jquery have stopped working.
and if somehow , I try to create a js plugin in parent view then
angular.element(document.getElementById('divIdFrmCarData')).scope()
It always returned undefined.
Help is appreaciated.