AngularJs cope undefined issue while adding a partial view through fetch api.

mehmood tekfirst 771 Reputation points
2022-06-15T15:46:03.803+00:00

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: &pound;{{car.Price.toFixed(2)}}</h2>  
                                                    <h3>Per Day: &pound;{{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.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,772 questions
0 comments No comments
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 71,101 Reputation points
    2022-06-15T18:30:53.083+00:00

    net 6 is the server side. it has no effect on client javascript code support.

    I use react instead of angular, and don't know why you are not using angular components instead of partial views.

    anyway, it looks like you replaced jQuery .html() with set innerHTML. jQuery has support to run the javascript in the html fragment, but the native innerHTML does not.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.