Encountering a 400 status error when making an HTTP put request in AngularJS and TypeScript within the context of DNN

I have created a controller using AngularJS and TypeScript within DotNetNuke 7. I am attempting to call my web API method using http.put but am encountering a 400 error status. Here is the code for my controller:

var customerapp = angular.module('CustomerSearch');
module CustomerSearch.controllers
{
    export class CustomerCtrl {
        static $inject = ['$scope', '$http', '$templateCache'];
        debugger;
        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.search = this.search;
            console.log(angular.element($scope).scope());
        }
        public search = (search: any) => {
            debugger;
           var Search = {
                ActId: search.txtAct,
                checkActiveOnly: search.checkActiveOnly,
                checkParentsOnly: search.checkParentsOnly,
                listCustomerType: search.listCustomerType
            };

            this.$scope.customer = [];
            this.$scope.ticket = [];
            this.$scope.services = [];


            this.$http.put('<%=ResolveUrl("~/API/Search/PutDoSearch")%>', Search).
                success((data, status, headers, config) => {
                debugger;
                this.$scope.cust_File = data[0].customers;
                this.$scope.ticket_file = data[0].tickets;
                this.$scope.service_file = data[0].services;
            }).
                error((data, status) => {
                debugger;
                console.log("Request Failed");
                alert(status);
                });

        }
    }
    var customerapp = angular.module("CustomerSearch", []);
    customerapp.controller('CustomerCtrl', CustomerSearch.controllers.CustomerCtrl);
}

Answer №1

The recommendation is to remove

this.$http.put('<%=ResolveUrl("~/API/Search/PutDoSearch")%>', Search)

and replace it with:

this.$http.put("/API/Search/PutDoSearch", Search)

Answer №2

To make it easier for yourself, you should have the server interpret

<%=ResolveUrl("~/API/Search/PutDoSearch")%>
.

An effective way to accomplish this is by placing it in a script tag like so:

<script>
       var doSearchUrl = '<%=ResolveUrl("~/API/Search/PutDoSearch")%>';
</script>

Then, within your TypeScript file, include the following:

// At the beginning of your file
declare var doSearchUrl:string; 

// And later on
this.$http.put(doSearchUrl, Search)

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

What is the best approach for implementing component composition in AngularJS that resembles the render props pattern seen in React?

I'm currently working on developing a grid component in AngularJS that dynamically populates its grid items at runtime, similar to the render props pattern in React. My goal is to achieve this by utilizing the latest AngularJS components API along wi ...

What is Prettier's reasoning for suggesting the use of `;` before a destructuring assignment declaration?

I am facing an issue with the if block within my Angular component: if (desc.length > 0) { [this.errorMsg] = desc } The problem arises as Prettier suggests adding a ; at the start of the destructuring assignment: if (desc.length > 0) { ;[thi ...

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

Navigating through jSON in Angular using iteration

Struggling with using Angular to loop through city names from a JSON file in MongoDB. Need help extracting only the citynames. The JSON data stored in MongoDB looks like this: { "_id" : ObjectId("592409faf1f5831ca882ad39"), "city" : "Aalsmeer", "phone ...

Using JSON as a variable solely for determining its type and guaranteeing that the import is eliminated during compilation

In my TypeScript backend project with Node as the target runtime, I have a JSON file that is auto-generated within my repository. I use the following code to import the JSON file in order to get the type of the JSON object: import countries from '../g ...

Solving the error message "Cannot find module '@angular/router/src/utils/collection' or its corresponding type declaration"

How do I troubleshoot this Error: src/app/metronic/orderByLocation/locationsByOneOrder/locationsByOneOrder.component.ts:7:25 - error TS2307: Cannot find module '@angular/router/src/utils/collection' or its corresponding type declarations.m 7 imp ...

Best practices for creating a factory module in AngularJS

A snippet of a controller function I'm working on: $scope.localTimezone = function (userTimezone,datetime) { // .... return data; } I've been attempting to convert this into a factory module. However, my attempts have resulted in errors. He ...

Changing the state of a form field to "dirty" using Angular.js programmatically

When updating fields on my form programmatically with a value, I want to set the field state to $dirty. However, trying $scope.myForm.username.$dirty = true; doesn't seem to have any effect. I noticed that there is a $setPristine method available to ...

Encountering an AOT error while running ng build using Angular CLI

After successfully creating an application using Angular CLI with JIT compilation, I decided to optimize its performance by converting it to AOT compilation. Following the instructions provided on angular.io, I made the necessary changes to convert all fi ...

Value entered is not being connected to the ngmodel variable

I am working on an Angular project and I need to pass one of my input values to a TypeScript function. However, when I try to console.log it, the updated value is not displayed. <div class="form-group"> <input type="number" [name]="'sec_chln ...

Incorporate form information into an array in Angular Version 2 or higher

This form is where I craft my questions https://i.sstatic.net/93781.png When composing a question, the ability to include multiple alternatives is available. There will also be an option to edit these alternatives. The desired format for my array is as ...

Tips for implementing React-Email & Resend feature using Firebase Cloud Functions

I am working on a Next.js application that combines React-Email, Resend, and Firebase Cloud Functions. The structure of the directories is as follows: https://i.sstatic.net/v8RUR5co.png My goal is to send an email to a user every time a document is creat ...

Display a still image using the image tag within Angular 2

I am struggling to attach an image to the image tag in Angular 2. My application has the following structure: https://i.sstatic.net/svBE1.png In the choice.Component.html view, I want to display the UserDefaultImage.png image within an image tag. I hav ...

The ng-show directive is failing to update properly after changes are made to the scope values

I'm experiencing some issues with the ng-show method. I have set it up like this: Even though the username string length is checked, the ng-show method doesn't seem to hide/show the extra text until after another keystroke. How can I make it upd ...

Retrieve data from TypeScript file (.ts) and use it in an HTML document

Recently I started learning Typescript and HTML as I work on building an Angular2 application. At the moment, I have a TypeScript file that resembles the following structure: import {Http, Headers} from 'angular2/http'; import {Component} from & ...

Deactivate the button permanently upon a single click

In the project I'm working on, there is a verification page for e-mail addresses. When new users register, they are sent an e-mail with a link to verify their e-mail. If the link is not clicked within a certain time frame, a button appears on the page ...

Top picks for ReactJS Typescript accounts

As a novice programmer, I am working on learning ReactJS/NodeJS/Typescript through project-based practice. Currently, I am developing a social media platform and have encountered an issue. I want to display different random users from my MySQL database in ...

Is it possible to invoke a method beyond a directive's scope?

I am new to using directives in Angular and I have encountered an issue that I need help with. I have a file called common.js which contains the following method: function showAlert(value) { alert(value); } Within my directive: app.directive('cc ...

Encountering difficulties with the installation of Angular and Node on Ubuntu 16 operating system

After attempting various methods to install the latest version of Node on Ubuntu 16, I was consistently getting stuck with version 4. However, after following a helpful guide, I finally managed to update to version 8.X. Following this, I installed npm succ ...

Encountering difficulties compiling Angular project

Error : PS C:\toolbox\intern-page> tsc C:\toolbox\intern-page\src\app\homepage\homepage.component.ts node_modules/@types/core-js/index.d.ts:829:20 - error TS2304: 'PromiseConstructor' cannot be foun ...