How to handle an edit and delete button on the same form in ASP.NET MVC?

Forums ASP.NET MVCHow to handle an edit and delete button on the same form in ASP.NET MVC?
Staff asked 1 year ago

Answers (1)

Add Answer
krishna kukadiya Marked As Accepted
Staff answered 1 year ago

To handle an edit and delete button on the same form in ASP.NET MVC, you can follow these steps:

  1. Create an Edit action: In your controller, create an Edit action that handles the form submission when the user wants to edit the data. This action will typically display the form with pre-filled data for editing and allow the user to make changes.
public ActionResult Edit(int id)
{
    // Retrieve the data based on the id
    YourModel model = RetrieveDataById(id);

    if (model == null)
    {
        // Handle the case when the data doesn't exist
        return HttpNotFound();
    }

    return View(model);
}

[HttpPost]
public ActionResult Edit(YourModel model)
{
    if (ModelState.IsValid)
    {
        // Update the data in the database
        UpdateData(model);

        // Redirect to a success page or show a success message
        return RedirectToAction("Index");
    }

    // If the model is not valid, redisplay the form with validation errors
    return View(model);
}
  1. Create a Delete action: Similarly, create a Delete action that handles the form submission when the user wants to delete the data. This action will typically prompt the user for confirmation and then delete the data from the database.
public ActionResult Delete(int id)
{
    // Retrieve the data based on the id
    YourModel model = RetrieveDataById(id);

    if (model == null)
    {
        // Handle the case when the data doesn't exist
        return HttpNotFound();
    }

    return View(model);
}

[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{
    // Delete the data from the database
    DeleteData(id);

    // Redirect to a success page or show a success message
    return RedirectToAction("Index");
}
  1. Create a form in the View: In your view file, create a form that includes both the Edit and Delete buttons. The form will be submitted to the respective actions based on the button clicked by the user.
@model YourModel

@using (Html.BeginForm("Edit", "YourController", FormMethod.Post))
{
    @Html.HiddenFor(m => m.Id) <!-- Assuming Id is a property of YourModel -->

    <!-- Other form fields for editing the data -->

    <input type="submit" value="Edit" />

    @Html.ActionLink("Delete", "Delete", new { id = Model.Id }, new { @class = "delete-button" })
}

In the above example, the form is submitted to the Edit action when the user clicks the “Edit” button. Additionally, an anchor tag is used for the “Delete” button, which is styled as a button using CSS class “delete-button”. Clicking the “Delete” button will redirect the user to the Delete action with the corresponding data’s id.

  1. Add JavaScript for confirmation (optional): If you want to show a confirmation dialog before performing the delete action, you can add JavaScript code to handle the click event of the “Delete” button.
@section scripts {
    <script>
        $(document).ready(function() {
            $(".delete-button").click(function(e) {
                if (!confirm("Are you sure you want to delete this item?")) {
                    e.preventDefault();
                }
            });
        });
    </script>
}

 

This JavaScript code adds a confirmation dialog to the delete button. If the user cancels the confirmation, the form submission will be prevented.

By following these steps, you can handle both the edit and delete functionalities on the same form in ASP.NET MVC.

Subscribe

Select Categories