How to add Edit, Delete and Search functionality in single view in MVC?

Question

I'm new to MVC.

on MSDN i've studied that there should be folder in view with the same name of controller. For every Action Method in the controller we have to create a View in the same folder.

I'm creating a test application in which:

I have a homeController with an Index ActionMethod. Corresponding to it i have a View in View/home/Index, which simply show the listing of the employees.

I know i can add a [HTTP POST] Index ActionMethod in the homeController.

But i want to add the Delete and Search functionality on the view. So that a user can search the employees with there name and can delete an employee on the same page.

I don't know how can i move ahead for this functionality.

Still i'm using this code.

homeController

public ActionResult Index()
    {
        ViewBag.text = "Records Listing";
        var q = from p in objEmp.tbemployees select p;
        return View(q);
    }

Index.cshtml

        @model IEnumerable<MvcApplication6.Models.tbemployee>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>@ViewBag.text</h1>
<table style="font-size:15px;">
    <tr>
        <th>
            Name
        </th>
        <th>
            Address
        </th>
        <th>
            Sallary
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr >
            <td style="padding:7px;">
                @Html.DisplayFor(mm => item.ename)
            </td>
            <td style="padding:7px;">
              @Html.DisplayFor(mm => item.eadd)
            </td>
            <td style="padding:7px;">
              @Html.DisplayFor(mm => item.esal)
            </td>
              <td style="padding:7px; color:Blue; text-decoration:underline;">
            @Html.ActionLink("Edit", "Edit", new { id = item.empno })
            </td>

        </tr>
    }
</table>

Thanks.

Answer 1

For the Delete you could add a column in the table that will invoke a controller action and pass it the current record id:

<tr>
    <td style="padding:7px;">
        @Html.DisplayFor(mm => item.ename)
    </td>
    <td style="padding:7px;">
        @Html.DisplayFor(mm => item.eadd)
    </td>
    <td style="padding:7px;">
        @Html.DisplayFor(mm => item.esal)
    </td>
    <td style="padding:7px; color:Blue; text-decoration:underline;">
        @Html.ActionLink("Delete", "Delete", new { id = item.empno })
        @Html.ActionLink("Edit", "Edit", new { id = item.empno })
    </td>
</tr>

and your Delete action:

public ActionResult Delete(int id)
{
    ... use the passed id to delete the record from the database
    return RedirectToAction("Index");
}

for the Edit functionality you could have a controller action that will fetch the record and render a view that will allow for editing:

public ActionResult Edit(int id)
{
    var employee = objEmp.tbemployees.FirstOrDefault(x => x.Id == id);
    if (employee == null)
    {
        // no employee with the specified id was found
        return new HttpNotFound();
    }
    return View(employee);
}

and then you could have a corresponding ~/Views/Home/Edit.cshtml view:

@model Employee
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.ename)
        @Html.EditorFor(x => x.ename)
    </div>
    <div>
        @Html.LabelFor(x => x.eadd)
        @Html.EditorFor(x => x.eadd)
    </div>

    ...

    <button type="submit">Save</button>
}

and of course a corresponding action to update the record when this form is submitted:

[HttpPost]
public ActionResult Edit(Employee employee)
{
    ... update the employee record
    return RedirectToAction("Index");
}

Answer 2

You can add and implement a Delete action method in your controller. Then in your view, call @Html.ActionLink("Delete", "Delete", new { id = item.empno }). This will return a hyperlink which links to your Delete method in the controller.