Create Edit View in ASP.NET MVC

131
edit view in mvc

Edit View in MVC

We have already created the Index view in the previous tutorial. In this section, we will create the Edit view in MVC using a default scaffolding template as shown below. The user can update existing student data using the Edit view.

The Edit view will be rendered on the click of the Edit button in the Index view. The following figure describes the complete set of editing steps.

The above figure illustrates the following steps.

1. The user clicks on the Edit link in Index view which will send HttpGET request Http://localhost/student/edit/{Id} with corresponding Id parameter in the query string. This request will be handled by HttpGET Edit action method. (by default action method handles HttpGET request if no attribute specified)

2. 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/Student/Edit with the Form data collection.

4. The HttpPOST Edit action method in StudentController 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.

So this will be the complete process in order to edit the data using Edit view in ASP.NET MVC.

So let’s start to implement the above steps.

We will be using the following Student model class for our Edit view.

Student Model – C#:

Step 1:
We have already created an Index view in the previous section using a List scaffolding template which includes an Edit action link as shown below.

An Edit link sends HttpGet request to the Edit action method of StudentController with corresponding StudentId in the query string. For example, an Edit link with student John will append a StudentId=1 query string to the request URL because John’s StudentId is 1. Likewise, all the Edit link will include a respective StudentId in the query string.

Step 2:
Now, create a HttpGET Edit action method in StudentController. The Index view shown above will send the StudentId parameter to the HttpGet Edit action method on the click of the Edit link.

The HttpGet Edit() action method must perform two tasks, first, it should fetch the student information from the underlying data source, whose StudentId matches with the StudentId in the query string. Second, it should render Edit view with the student information so that the user can update it.

So, the Edit() action method should have a StudentId parameter. MVC framework will automatically bind a query string to the parameters of an action method if the name matches. Please make sure that parameter name matches with the query string.

Example: HttpGet Edit() Action method – C#

As you can see in the above Edit method, we have used a LINQ query to get the Student from the sample studentList collection whose StudentId matches with supplied StudentId, and then we inject that Student object into View. In a real-life application, you can get the student from the database instead of sample collection.

Now, if you click on the Edit link from Index view then you will get the following error.

The above error occurred because we have not created an Edit view yet. By default, MVC framework will look for Edit.cshtml or Edit.vbhtml or Edit.aspx or Edit.ascx file in View -> Student or Shared folder.

Step 3:
To create Edit view, right-click inside the Edit action method and click on Add View. It will open Add View dialogue.

In the Add View dialogue, keep the view name as Edit. (You can change as per your requirement.)

Select Edit in the Template dropdown and also select Student for Model class as shown below.

Now, click Add to generate Edit.cshtml view under View/Student folder as shown below.

Edit.cshtml:

Now, click on the Edit link of any student in the Index view. Edit view will be displaying student information whose Edit link clicked, as shown below.

You can edit the Name or Age of Student and click on Save. Save method should send a HttpPOST request because the POST request sends form data as a part of the request, not in the query string. So write a POST method as the fourth step.

Step 4:
Now, write the POST Edit action method to save the edited student as shown below.

Example: POST Method in MVC

Now, clicking on the Save button in the Edit view will save the updated information and redirect it to the Index() action method.

In this way, you can provide edit functionality using a default scaffolding Edit template. However, you can also create an Edit view without using an Edit scaffolding template.

The following example demonstrates the StudentController class with all the action methods.

Example: Controller in C#

LEAVE A REPLY

Please enter your comment!
Please enter your name here