Post
Ask Question

Handling HTTP Patch Method in AngularJS and C#

HTML/AngularJS Frontend

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS HTTP PATCH 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>Partial Update Resource</h2>
    <form ng-submit="patchResource()">
        <label for="resourceId">Resource ID:</label>
        <input type="text" ng-model="resourceId" required>
        
        <label for="partialUpdate">Partial Update:</label>
        <input type="text" ng-model="partialUpdate" required>

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

AngularJS Frontend (JavaScript)

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

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

        $http.patch('https://ResourceController/api/resource/' + $scope.resourceId, data)
            .then(function (response) {
                console.log("Resource partially 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
{
    [HttpPatch]
    [Route("api/resource/{id}")]
    public IHttpActionResult PartialUpdateResource(int id, [FromBody] ResourcePartialUpdateModel model)
    {
        try
        {
            
            var updatedResource = new { Id = id, Key = model.Key };
            return Ok(updatedResource);
        }
        catch (Exception ex)
        {
            
            return InternalServerError(ex);
        }
    }
}

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

Conclusion

While both PUT and PATCH are used for updates, PUT is for complete updates, and PATCH is for partial updates. The choice between them depends on the use case and the nature of the update you want to perform.


Similar Articles