Post
Ask Question

Handling HTTP Put Method in AngularJS and C#

HTML/AngularJS Frontend

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS HTTP PUT Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="myController">
    <h2>Update Resource</h2>
    <form ng-submit="updateResource()">
        <label for="resourceId">Resource ID:</label>
        <input type="text" ng-model="resourceId" required>
        
        <label for="updatedValue">Updated Value:</label>
        <input type="text" ng-model="updatedValue" required>

        <button type="submit">Update Resource</button>
    </form>
</body>
</html>

AngularJS Frontend (JavaScript)

var app = angular.module('myApp', []);

app.controller('myController', function ($scope, $http) {
    $scope.updateResource = function () {
        var data = {
            key: $scope.updatedValue
        };

        $http.put('https://ResourceController/api/resource/' + $scope.resourceId, data)
            .then(function (response) {
                console.log("Resource updated successfully:", response.data);
            })
            .catch(function (error) {
                console.error("Error updating resource:", error);
            });
    };
});

C# Backend (Controller using ASP.NET Web API)

using System.Web.Http;

public class ResourceController : ApiController
{
    [HttpPut]
    [Route("api/resource/{id}")]
    public IHttpActionResult UpdateResource(int id, [FromBody] ResourceUpdateModel model)
    {

        var updatedResource = new { Id = id, Key = model.Key };
        return Ok(updatedResource);
    }
}

public class ResourceUpdateModel
{
    public string Key { get; set; }
}

Conclusion

This example demonstrates a straightforward implementation of the HTTP PUT method in an AngularJS frontend, communicating with a C# backend using ASP.NET Web API. The AngularJS controller captures user input, sends a PUT request with updated data to the backend, and the C# controller processes the request, updating the resource.


Similar Articles