Edit view in ASP.NET

In the previous tutorials, we already created the index view and had a look about Model binding in ASP.NET. In this section, we will create the edit view using a default scaffolding template as shown below. The user can update existing activities data using the edit view.

asp.net edit activites

The Edit view above will be rendered on the click of the Edit button in Index view, as shown in the figure below.

asp.net your activites

The following happens when a user clicks on the edit link in the index view

1. A click on the edit link in the index view will send a Http GET request http://localhost:61856/Activities/Edit/{id} with corresponding Id parameter in the query string. This request will be handled by HttpGET Edit action method.

2. This HttpGet Edit action method will fetch student data from the database, based on the supplied Id parameter and render the Edit view with that particular Student data.

3. The user can edit the data and click on the Save button in the Edit view. The Save button will send a HttpPOST request http://localhost:61856/Activities/Edit with the Form data collection.

4. The HttpPOST Edit action method in ActivitiesController will finally update the data into the database and render an Index page with the refreshed data using the RedirectToAction method as a fourth step.

This is a complete process required in order to edit the data using Edit view in ASP.NET MVC.

Consider the following code snippet below:

// GET: Activities/Edit/5
        public ActionResult Edit(int? id)
            if (id == null)
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	   var activity = activityList.Where(a => a.Id == Id).FirstOrDefault();

            if (activity == null)
                return HttpNotFound();
            return View(activity);

As shown in the above code snippet of the Edit method, we have quired the Activities collection to return the activity whose id matches the supplied id, and then we passed the activities collection to the view. In a real-life applications, we can get the activities from the database instead of sample collection.

We will quickly create the Edit view, right click on the Edit action method and click on Add View. A dialog box will be open, fill all the fields as shown in the snapshot below

asp.net add view1

On click of the Add button, the Edit.cshtml view located at View/Activities will be scaffolded.

Now, lets create another Edit function to save the edit data to our assumed database.

public ActionResult Edit(Activity activity)
    //save activites to DB
    return RedirectToAction("Index");

From the code snippet above, we used action verb and model binding to quickly map the activity data submitted by the form to the activity model. Thus, we have created an edit view for our activities in our ActivitesTab application.