Utilizing BackboneJs to Access and Fetch Data from an asmx Webservice

Could someone please help me with a code snippet to understand how to call asmx web services from a backbone collection? The provided example is very simple.

Collection

 window["Persons"] = Backbone.Collection.extend({
        model: Person,
        url: "service.asmx/GetPeople"
    });

Note: I have the service.asmx file in place.

Asmx End point

 [WebMethod]
    [ScriptMethod]
    public static List<Person> GetPeople()
    {
        List<Person> people = new List<Person>(10);
        for (int i = 0; i < 10; i++)
        {
            people.Add(new Person(i.ToString()));
        }
        return people;
    }

The Model

public class Person
{
    public string Name { get; set; }
    public Person(string name)
    {
        Name = name;
    }
}

When I execute the below code, Chrome XHR inspector shows an error:

var family = new Persons();family.fetch();

Request format is unrecognized for URL unexpectedly ending in '/GetPeople'

Answer №1

To personalize how models are saved and retrieved from the server, it is recommended to override the Backbone.sync() function.

For detailed insight into customizing the Backbone.sync() function for local storage, you can refer to the annotated source code.

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

Node.js encountering req.body as undefined when using form-data as the content-type

After creating a small demonstration for this form-data passing API, I attempted to test it using Postman. However, I encountered an issue where no data was being retrieved. Code const http = require("http"); const express = require("expres ...

Following a POST request, the redirection functionality in Next.js seems to be malfunctioning

I am facing an issue with redirecting the user after submitting a form. I have a button that triggers a post request to my API route, which then inserts a row in the database. The goal is to redirect the user to / once everything is done. However, the retu ...

The error occurring in the React app is a result of the page rendering prior to the API data being fetched

Utilizing the following component for my Nav, I aim to showcase the current weather based on the user's location. However, an issue arises as the page is being rendered before retrieving data from the openWeather API. import React, { useState, useEffe ...

The AJAX calendar control remains unchanged after a reset

I am currently facing an issue with my ajax calendar control used in a form for selecting dates. The problem arises when I select a date from the previous year and then click on the reset button. Even though the text box is cleared, the calendar control s ...

SSR not working properly in Nuxt 3

Currently facing an issue where I am unable to access my private environment variables. I understand that I can only retrieve them when my page is server-side rendered (SSR). Strangely, even though I have never disabled SSR, when I log console.log(process. ...

I am facing an issue where the table in my Laravel Vue component is not displaying the data from

Recently, I've been diligently following an instructional series on VUE applications by a highly recommended YouTuber. Every step was meticulously executed until I hit a roadblock out of nowhere. The data from my database refuses to display on the fro ...

The data visualization tool Highchart is struggling to load

As I try to integrate highcharts into my website, I encounter an unexpected error stating TypeError: $(...).highcharts is not a function. Below is the code snippet in question: @scripts = {<script src="@routes.Assets.at("javascripts/tracknplan.js")" ty ...

Rearrange lists by dragging and dropping them according to specific criteria

In my AngularJS project, I am utilizing the angular-drag-and-drop-lists library from here to create two lists with the following functionalities: Dragging items from list A to list B Dragging items from list B to list A Reordering items in list A Reorder ...

The function .play() cannot be executed on document.getElementById(...) - it is not a

There is an error in the console indicating that document.getElementById(...).play is not a valid function. import React from 'react'; const musicComponent=(props)=>{ const style={background:props.color} return( <div classN ...

Prevent title flickering in Android using Ionic

I am attempting to create a tab content page using the "standard" method recommended by the ionic template example. However, I have noticed that when switching between tabs on Android, the view title flickers. This issue is not present on iOS or desktop b ...

Verify user credentials during login in a React application

My current challenge involves setting up a hardcoded authentication in React for user login using a form. Despite meeting the requirements for the "if" statement, it always returns the "else" statement. I am attempting to pass both the handleSubmit functi ...

Following the upgrade to version 6.3.3, an error appeared in the pipe() function stating TS2557: Expected 0 or more arguments, but received 1 or more

I need some assistance with rxjs 6.3.3 as I am encountering TS2557: Expected at least 0 arguments, but got 1 or more. let currentPath; const pipeArgs = path .map((subPath: string, index: number) => [ flatMap((href: string) => { con ...

Struggling to modify a document in a MongoDB collection with an HTTP Put request?

I've recently started working with AngularJS and I encountered an issue while trying to update my MongoDB Database. I'm facing a problem when attempting to update an object within my collection. The code snippet below showcases my approach: //li ...

React form submissions result in FormData returning blank data

I am having trouble retrieving the key-value pair object of form data when the form is submitted, using the new FormData() constructor. Unfortunately, it always returns empty data. Despite trying event.persist() to prevent react event pooling, I have not ...

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...

Is there a way for me to retrieve dynamic text?

I used an "IF" statement to display dynamic text - if it's null, show something, otherwise show something else. However, I am getting a blank result. What did I do wrong? <View style={styles.rightContainer}> { () =>{ if(t ...

Cross-domain AJAX requests do not allow cookies to be set

I have implemented a JavaScript on my webpage to send a POST request to a webservice located at . The response from the webservice sets cookies that are necessary for authentication. Accept-Ranges:bytes Access-Control-Allow-Credentials:true Access-Contro ...

Empty Data Returned After Sending AJAX Request

Currently, I am delving into the world of ajax in order to simplify my life going forward. I successfully managed to implement an example where a constant array was posted to my controller without any issues. However, when attempting to fetch data from an ...

Leverage Ajax to dynamically refresh content on a webpage by fetching data from a text file using PHP

I am facing an issue with updating data on my webpage using Ajax. The data is fetched through a PHP script and I need the refresh function to run every 5 seconds. However, it seems like this functionality is not working as expected. This is the JavaScript ...

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Seeking a solution to use a custom table as the dropdown portion for a DropDownList in my project. My goal is for users to see the custom table when they click on the DropDownList, rather than the default dropdown menu. I expected to be able to achieve th ...