MVC 用图标替换编辑/详细信息/删除答案

【问题标题】：MVC replacing Edit/Details/Delete with IconsMVC 用图标替换编辑/详细信息/删除
【发布时间】：2016-10-10 23:30:58
【问题描述】：

我想用我刚刚下载的图标替换编辑/详细信息/删除这三个字段。图标大小为 512x512，会不会有问题？我可以在代码中调整它们的大小（如何），或者我应该使用一些程序调整它们的大小。我一直在网上搜索，发现了一些很长的 C# 代码，但我不知道放在哪里以便用图标替换这些属性的文本。

这是我的 HTML：

@using PagedList.Mvc;
@model PagedList.IPagedList<Rating_System.Models.tblTeacher>
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
@{
    ViewBag.Title = "Teachers List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Teachers</h2>    
<p>
    @Html.ActionLink("Add new", "Create")
</p>
@using (Html.BeginForm("Index", "Teachers", FormMethod.Get))
{

<p>
   Търсене: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
    <input type="submit" value="Search" />
</p>
}
<table class="table">    
    <tr>
        <th>                
        </th>
        <th>  
            @Html.DisplayNameFor(model => model.First().FirstName)      
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().SecondName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.First().Title)
        </th>                      
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <img src="@Url.Action("GetImage", "Teachers", new {item.ID})" width="45" height="45" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FirstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SecondName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>              
            <td>
                @Html.ActionLink("Редактирай", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Детайли", "Details", new { id = item.ID }) |
                @Html.ActionLink("Изтрий", "Delete", new { id = item.ID })
            </td> 
        </tr>
    }    
</table>

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, pageSize = Model.PageSize }))
Results @Model.FirstItemOnPage - @Model.LastItemOnPage от общо @Model.TotalItemCount Teachers

【问题讨论】：

将 @Html.ActionLink("Редактирай", "Edit", new { id = item.ID }) 更改为 <img src="[image URL/Url.Action]" width="45" height="45" /> 或创建自定义 HTML 帮助程序来呈现图像。所有提供的图像都应通过设置宽度和高度属性来调整大小。

标签： c# asp.net-mvc icons

【解决方案1】：

试试这段代码

<a href="@Url.Action("ActionName", "ControllerName", new { id = item.ID })">
  <img src="@Url.Content("~/Content/imgname.jpg")" />
</a>

【讨论】：

【解决方案2】：

如果要使用图标（图片），请使用以下代码：

@Html.ActionLink("Редактирай", "Edit", new { id = item.ID },  new { @class="class" })

然后编写你的 css 类来包含背景图片

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

但是，我建议例如使用引导字形图标

<a href="@Url.Action("Action", "Controller")" class="btn btn-info">
Your link text 
<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
</a>

或者

<span class="glyphicon glyphicon-ok" style="cursor:pointer" onclick="JavascriptFunction()"></span>

在 Javascript 中

function JavascriptFunction() {
window.location.href = encodeURI("/Controller/Action/");
}

你可以通过javascript函数传递ID

【讨论】：