Question

I have a view which lists students. I want to add a delete icon( a red “x”) in front of each student. clicking on the delete icon will delete that student.

I know how to do it by entering a student id in a text box and adding a button to doing this. But I want to do the same by clicking a delete icon in front of each student.

Here is my view code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="Student.Models" %>

<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
    Student
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">

<form id="Form1" method="get" action="/Student/RemoveStudent/" runat="server">
    <label for="id">
        Student ID:
    </label>
    <input type="text" name="studentID" value="<%=HttpContext.Current.Request.QueryString["studentID"]%>" />

    <input type="submit" value="Remove Student"/>

    </form>

    <h2>Students</h2>
        <table>
          <% foreach (Student in (IEnumerable)ViewData.Model)

          { %>
         <tr>
            <td>
               <%= s.StudentID %> 
            </td>
        </tr>
          <% } %>
    </table>

</asp:Content>

Here is my controller Action:

public ActionResult Index()
{

    return View(_repository.ListAll().OrderByDescending(s => s.StudentName));
}

public ActionResult RemoveStudent(int studentId)
{

    StudentDataContext student = new StudentDataContext();

    var std = student.Students.Single(s => s.StudentID == studentId);
    student.Students.DeleteOnSubmit(std);
    student.SubmitChanges();
    return Content("Student" + studentId + " Removed");
}

Thanks in advance

Answer 1

For starters, you need to add the image

    <table>
      <% foreach (Student in (IEnumerable)ViewData.Model)

      { %>
     <tr>
        <td>
            <%= Html.ActionLink("RemoveStudent",                // Action
                                "Students",                     // Controller
                                new { id = Student.studentId }, // Route Args
                                new { @class="deleteButton" }   // HTML Args
            ) %>
        </td>
        <td>
           <%= s.StudentID %> 
        </td>
    </tr>
      <% } %>
</table>

and a little css

a.deleteButton
{
    background: url(../Images/delete.gif) no-repeat top left;
     display: block;
     width: 50px;
     height: 50px;
     text-indent: -9999px; /* hides the link text */
}

This can be much more detailed, but you get the point. You can submit the delete via a form, pass the userID with it… etc.