Consume PUT Method in ASP .NET MVC with C#

Consume PUT Method in ASP .NET MVC with C#

Introduction:

In ASP.NET MVC, the PUT method is used to update an existing resource on the server. It is typically used when you want to modify the state of an entity in the application. This documentation will guide you on how to consume the PUT method in ASP.NET MVC using C#.

Prerequisites:

Before proceeding, make sure you have the following prerequisites in place:

1. Visual Studio (2015 or later) installed on your system.
2. Basic knowledge of ASP.NET MVC and C# programming language.

Step 1: Create an ASP.NET MVC Project

To get started, follow the steps below to create a new ASP.NET MVC project:

1. Open Visual Studio and click on "Create a new project."
2. Select "ASP.NET Web Application" from the templates.
3. Choose the desired project name and location, then click "Create."
4. In the project template selection window, choose "MVC" and click "Create."

Step 2: Create a Controller

In this step, we'll create a controller that will handle the PUT request. Follow the steps below:

1. Right-click on the "Controllers" folder in the Solution Explorer.
2. Select "Add" > "Controller" from the context menu.
3. Choose "MVC 5 Controller - Empty" and click "Add."
4. Name the controller (e.g., "ProductsController") and click "Add."

Step 3: Implement the PUT Action

Next, we'll implement the PUT action in the controller. This action will handle the PUT request and update the resource. Follow these steps:

1. Open the "ProductsController.cs" file.
2. Add the following code snippet:

csharp
[HttpPut]
public ActionResult Update(int id, ProductViewModel model)
{
    // Retrieve the existing product from the database
    var existingProduct = _productRepository.GetProduct(id);

    if (existingProduct == null)
    {
        // Handle the scenario when the product doesn't exist
        return HttpNotFound();
    }

    // Update the existing product with the data from the model
    existingProduct.Name = model.Name;
    existingProduct.Price = model.Price;

    // Save the changes to the database
    _productRepository.SaveChanges();

    // Redirect to the product details page or return a success message
    return RedirectToAction("Details", new { id = existingProduct.Id });
}

Step 4: Create a View for the Update Action

To provide a user interface for updating the resource, we need to create a view associated with the Update action. Follow the steps below:

1. Right-click on the "Update" action method in the "ProductsController.cs" file.
2. Select "Add View" from the context menu.
3. Set the view name (e.g., "Update") and choose the desired options.
4. Click "Add" to create the view.

Step 5: Consume the PUT Method

To consume the PUT method from the client side, you can use various methods like AJAX, jQuery, or a form submission. Here, we'll provide an example using a simple HTML form and JavaScript/jQuery.

1. Open the "Update.cshtml" view.
2. Add the following code snippet:

html
@model ProductViewModel

@using (Html.BeginForm("Update", "Products", FormMethod.Put))
{
    @Html.HiddenFor(model => model.Id)
    <div>
        <label for="Name">Name:</label>
        @Html.TextBoxFor(model => model.Name)
    </div>
    <div>
        <label for="Price">Price:</label>
        @Html.TextBoxFor(model => model.Price)
    </div>
    <div>
        <input type="submit" value="Update" />
    </div>
}

3. Additionally, include the necessary jQuery library in your view or layout file.

Explanation:

In this example, we've created a PUT action named "Update" in the "ProductsController" to handle the PUT request. The action takes two parameters: the id of the resource to update and a ProductViewModel object containing the updated data.

Inside the action, we retrieve the existing product from the database using the id parameter. If the product doesn't exist, we return a "Not Found" error. Otherwise, we update the properties of the existing product with the data from the model and save the changes to the database.

The view associated with the "Update" action contains an HTML form that allows users to input the updated data. When the form is submitted, the PUT method is invoked, sending the updated data to the server.

Conclusion:

By following this documentation, you have learned how to consume the PUT method in ASP.NET MVC using C#. You can now update existing resources in your application by sending PUT requests to the appropriate controller action.