Sending a boolean value from C# to an Angular view

This is a snippet of my code:

Code written in C#:

 public bool isAllowed { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        isAllowed = false;
    }    

Angular controller:

<script>
var myApp = angular.module('myApp', []);    
myApp.value('allowed', <%= isAllowed %>);//myApp.value('allowed', False);

myApp.controller('TestController', ['$scope', function ($scope, allowed) {
    $scope.result = allowed;
}]);
</script>

View:

<body data-ng-app="myApp">
 <div data-ng-controller="TestController">{{result}}</div>
</body>

After implementing, I encountered:
Uncaught ReferenceError: False is not defined

and

myApp.value('allowed', False);

Can someone assist in passing a boolean value to $scope.result?

Answer №1

When using ASP.NET MVC, the default behavior is to convert the value true to True and false to False when returning model values to the view.

In this scenario, the value False is being interpreted as a JavaScript variable, leading to the error message

Uncaught ReferenceError: False is not defined
(boolean values should be either true or false).

To resolve this issue, you can convert it to a boolean value using the following operation:

myApp.value('allowed', <%= isAllowed == 'True' %>); 

Additionally, make sure to include the allowed dependency for injection in the DI inline array:

                     //dependency added here VVVVVVVVVV
myApp.controller('TestController', ['$scope', 'allowed', function ($scope, allowed) {

Answer №2

Give this a shot:

myApp.constant('permission', <%= hasPermission.ToString().ToLower() %>);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

The request from localhost:3000 to localhost:3003 could not be proxied by ReactJS

Currently, I am working on developing a Single Page Application (SPA) using create-react-app with an expressjs server as the backend. During development, my frontend test server runs on port 3000 while my backend expressjs test server runs on port 3003. T ...

having difficulty preserving the edited HTML document with JSoup and Java

I am facing an issue with modifying and saving changes to an existing HTML file. I can make modifications, but when it comes to saving the changes back to the HTML file, I encounter difficulties. https://i.sstatic.net/CRhUV.jpg The specific modification ...

Encountered a problem initializing Rangy.js on Internet Explorer

Currently, I am developing an angular application that utilizes textAngular along with rangy-core and rangy-selectionsaverestore. However, I am encountering some errors specifically on the latest version of Internet Explorer: Module 'WrappedSelection ...

Grab and deliver the particular tab that is currently in view

Within my background.js file, I am aiming to capture a specific area within a div. Here is a snippet of my code: function main() { chrome.tabs.query( {'active': true}, check_tab ); } function check_tab( tabs ) { for (i = 0; i < tabs. ...

Utilizing ng-transclude in combination with nested directives

I have been facing a challenge when it comes to working with 2 directives, where the template of one directive contains the second directive. My goal is to utilize ng-transclude within the nested directive. How can I achieve this? Check out this example ...

Learn how to establish a state using an array and effectively utilize the setState() method in React

For my latest project, which is API based, I am working with arrays that contain sub-arrays. How can I define a state with an array and utilize the setState() method to work with the entire array? ...

Step-by-step guide on how to have an AngularJS controller run continuously every 5 seconds once it has been initially called

My angular js file (app.js) contains the uuidCtrl controller, which triggers when called. When I want to call the controller 2 times, I have to load the page twice. However, I am looking for a solution to run it continuously after the first time it is call ...

One way to verify the existence of an item in a JSON object before pushing it

I am currently working on incorporating offline add to cart functionality. Below is the add to cart function I have: $scope.payloadData = []; $scope.add_to_cart = function(MRP, ProductId, ProductVariantId) { $scope.dt = { //This is a JSON st ...

AngularJS: Modifying values in one div updates data in all other divs

The webpage appears as shown below: https://i.sstatic.net/IxcnK.png HTML <li class="list-group-item" ng-repeat="eachData in lstRepositoryData"> <div class="ember-view"> <div class="github-connection overflow-hidden shadow-oute ...

Pagination with React Material UI is a user-friendly and visually

Requirement Within the Material UI framework, I need to implement pagination functionality by clicking on the page numbers (e.g., 1, 2) to make an API call with a limit of 10 and an offset incrementing from 10 after the initial call. https://i.stack.imgur. ...

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

Steps for deactivating tab stops on the primary webpage in the presence of a snackbar

On my web page, there are multiple drop-down menus, input fields, and buttons that can be interacted with using both the tab key and mouse. After entering certain data, I trigger a snackbar (source: https://www.w3schools.com/howto/howto_js_snackbar.asp) t ...

Key steps for effectively implementing a Substring-Filter on a JSON array in d3

Trying to apply filtering on a JSON data array structured like this: var data = [ { "key": "FirstGroup", "color": "#1f77b4", "values": [ { "label ...

Retrieving information from an array and displaying it dynamically in Next.js

I've been diving into the Next.js framework lately and I've hit a roadblock when it comes to working with dynamic routes and fetching data from an array. Despite following the basics of Next.js, I'm still stuck. What am I looking for? I ne ...

Retrieve the store location value when clicked (Javascript)

I'm currently struggling to capture the value of a click in my Javascript code and I could use some help understanding how to achieve this. <span class="s-link"> <a class="s-link-pim-data" href="javascript:void(0);" target="_blank" title="O ...

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

Show the information stored in an array using Angular

I have recently transitioned from using React to learning Angular, and now I am facing the challenge of displaying data from an array. My goal is to implement a dropdown menu where users can select an ID and see the corresponding address displayed. I bel ...

Messages are not being received despite no errors occurring in the PHP form

I am facing a challenge with a PHP script that is supposed to send a form, but it keeps saying the email has been sent while nothing actually shows up. Do you have any insights on what might be causing this issue? Also, there's nothing in the spam fol ...

How does Facebook access the new hashtags when they are clicked on?

I've been developing a website recently and I'm really impressed with the way a popup page appears when you click on a hashtag. I've been wanting to incorporate a similar feature for a while now, but I'm not sure how to do it. Could thi ...