在視圖中的每條記錄中添加刪除圖標「x」

Question

我有一個列出學生的視圖。我想在每個學生的前面添加一個刪除圖標（紅色的「x」）。點擊刪除圖標將刪除該學生。

我知道如何通過在文本框中輸入學生ID並添加按鈕來完成此操作。但是我想通過點擊每個學生前面的刪除圖標來做同樣的事情。

這裏是我的視圖代碼：

<%@ 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> 

這裏是我的控制器操作：

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"); 
} 

在此先感謝

Answer 1

首先，你需要添加圖像

<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> 

和a小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 */ 
} 

這可以更詳細，但你明白了。您可以通過表單提交刪除，傳遞用戶ID ......等。