How to Perform Edit Operation In Asp.Net MVC

In this article we will understand How to Perform Edit Operation in Asp.Net MVC By Sagar Jaybhay.

How to Perform Edit Operation In Asp.Net MVC

Created Edit method in EmployeeController which is shown below and strongly typed EditView for this.

[HttpGet]
 public ActionResult Edit(string EmpID)
 
 var Employye = new BusinessLogic.Business().GetEmployee(EmpID);
 return View(Employye);

 

Edit Model In Asp.net MVC

Now after creating a view and click on edit link you will find below the window

Edit Employee In Asp.Net MVC

But if you see above image gender will display in textbox but we want dropdown list so we need to modify this as per our requirement. We modify our view, but in this, you should rename DropDownList Name to EmpGender as our model property is EmpGender so it will bind value directly.

@model WebApplication1.Models.Employee

@
 ViewBag.Title = "Edit";


<h2>Edit</h2>

@using (Html.BeginForm())

 @Html.AntiForgeryToken()
 
 <div class="form-horizontal">
 <h4>Employee</h4>
 <hr />
 @Html.ValidationSummary(true, "", new @class = "text-danger" )
 <div class="form-group">
 @Html.LabelFor(model => model.EmpID, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.EditorFor(model => model.EmpID, new htmlAttributes = new @class = "form-control" )
 @Html.ValidationMessageFor(model => model.EmpID, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 @Html.LabelFor(model => model.EmpName, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.EditorFor(model => model.EmpName, new htmlAttributes = new @class = "form-control" )
 @Html.ValidationMessageFor(model => model.EmpName, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 @Html.LabelFor(model => model.EmpSalary, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.EditorFor(model => model.EmpSalary, new htmlAttributes = new @class = "form-control" )
 @Html.ValidationMessageFor(model => model.EmpSalary, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 @Html.LabelFor(model => model.EmpGender, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.DropDownList("EmpGender", new List<SelectListItem> new SelectListItem Text="Male" ,Value="Male",
 new SelectListItem Text="Female" ,Value="female", "Select Gender")
 @Html.ValidationMessageFor(model => model.EmpGender, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 @Html.LabelFor(model => model.EmpCity, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.EditorFor(model => model.EmpCity, new htmlAttributes = new @class = "form-control" )
 @Html.ValidationMessageFor(model => model.EmpCity, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 @Html.LabelFor(model => model.EmpEmail, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.EditorFor(model => model.EmpEmail, new htmlAttributes = new @class = "form-control" )
 @Html.ValidationMessageFor(model => model.EmpEmail, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 @Html.LabelFor(model => model.DepartmentID, htmlAttributes: new @class = "control-label col-md-2" )
 <div class="col-md-10">
 @Html.EditorFor(model => model.DepartmentID, new htmlAttributes = new @class = "form-control" )
 @Html.ValidationMessageFor(model => model.DepartmentID, "", new @class = "text-danger" )
 </div>
 </div>

 <div class="form-group">
 <div class="col-md-offset-2 col-md-10">
 <input type="submit" value="Save" class="btn btn-default" />
 </div>
 </div>
 </div>


<div>
 @Html.ActionLink("Back to List", "Index")
</div>

Gender Edit Model

But when we click on the save button it will throw an error resource that can not found. Why because EmployeeController class does not have Edit Method which responds to Post a request for Edit. Below is an error is thrown when we click on the Save button.

Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The
resource you are looking for (or one of its dependencies) could have been
removed, had its name changed, or is temporarily unavailable.  Please
review the following URL and make sure that it is spelled correctly.



Requested URL: /Employee/Edit

---

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.8.4075.0

Error in Asp.Net MVC

To Update Employee, we create one stored procedure in our database which is below,

Create Procedure [dbo].[spUpdateEmployee]
@emptid int,
@name nvarchar(20),
@salary float,
@gender nvarchar(20),
@city nvarchar(20),
@email nvarchar(30),
@deptid int
as
begin

Update Employee set EmpEmail=@email,EmpName=@name,EmpSalary=@salary,EmpGender=@gender,
DepartmentID=@deptid where EmpID=@emptid;
End
Now we need to call this Procedure in our database class the method is below
 public void UpdateEmployee(int EmpId, string Name, string Email, string Gender, double salary, int deptid, string city)
 
 using (var con = new SqlConnection(this._ConnectionString))
 
 con.Open();
 var cmd = new SqlCommand("spUpdateEmployee", con);
 cmd.CommandType = CommandType.StoredProcedure;
 cmd.Parameters.Add(new SqlParameter("name", SqlDbType.NVarChar, 20));
 cmd.Parameters.Add(new SqlParameter("salary", SqlDbType.Float, 50));
 cmd.Parameters.Add(new SqlParameter("gender", SqlDbType.NVarChar, 50));
 cmd.Parameters.Add(new SqlParameter("city", SqlDbType.NVarChar, 50));
 cmd.Parameters.Add(new SqlParameter("email", SqlDbType.NVarChar, 50));
 cmd.Parameters.Add(new SqlParameter("deptid", SqlDbType.Int, 50));
 cmd.Parameters.Add(new SqlParameter("emptid", SqlDbType.Int, 50));


 cmd.Parameters["name"].Value = Name;
 cmd.Parameters["salary"].Value = salary;
 cmd.Parameters["gender"].Value = Gender;
 cmd.Parameters["city"].Value = city;
 cmd.Parameters["email"].Value = Email;
 cmd.Parameters["deptid"].Value = deptid;
 cmd.Parameters["emptid"].Value = EmpId;

 cmd.ExecuteNonQuery();
 

 

After this, we create a method in business class, which is shown below

public void UpdateEmployee(Employee employee)
 
 this.dataAccess.UpdateEmployee(employee.EmpID,employee.EmpName, employee.EmpEmail, employee.EmpGender, employee.EmpSalary, employee.DepartmentID, employee.EmpCity);
 

Now we create a method in our EmployeeController for handling post request of Edit method which is shown in below

[HttpPost]
 public ActionResult Edit(Employee employee)
 
 if (ModelState.IsValid)
 
 new BusinessLogic.Business().UpdateEmployee(employee);
 return RedirectToAction("DisplayCompleteEmployee");
 
 return View(employee);

 

First, we see all Employee from our list and click on Edit link for this display all Employee UI looks like below

Edit Link Click In Asp.Net MVC

After clicking on edit we edit details Ui looks like below

Edit In Asp.net MVC

After clicking on Save we return to DisplayEmployee List and our updated values reflected on UI as expected.

Completed Edit in Asp.Net MVC

Now our edit functionality is completed.

GitHub Pages :- https://github.com/Sagar-Jaybhay/AspNetRazor