Question

我有一个模型，其中包含有关每个客户端的信息，以及存储其图像的byte []。我想在图像周围放置一个边框，只有当该特定客户端存在某个值时。例如，如果Jack Sparrow船长的“状态ID”等于2，则他的照片周围会显示一个红色边框。有人能为我提供一个如何做到这一点的例子吗？我已经尝试过搜索一个示例或教程，但我没有发现任何看似相关的内容，或者我没有正确理解。

这是我的控制器：

    // GET: Client
    public ActionResult Index(string searchString)
    {
        var clients = from z in db.client__information
                      select z;
        if (!String.IsNullOrEmpty(searchString))
        {
            clients = clients.Where(n => n.FirstName.Contains(searchString));
        }

        var avatar = (from d in db.client__information
                      select d).ToList();

        return View(clients);
    }

这是我的索引页面：

@model IEnumerable<MedPassFinal.Models.dbTables.client__information>

@{
ViewBag.Title = "Nurse - Manage Clients";
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />

</head>
 <body>
   <br />
     @Html.ActionLink("Create New", "Create")

   @using (Html.BeginForm("Index", "Client", FormMethod.Get))
   {
    <p>
        Search by First Name: @Html.TextBox("searchString") <br />
        <input type="submit" value="Search" />
    </p>
    } 

<style>
    th, td {text-align: center;}
</style>

<table class="table">

    <tr>

        <th>
            @Html.DisplayNameFor(model => model.Content)
        </th>
@*...more Display items continue....*@

@foreach (var item in Model)
{


   <tr>

       <td>
           @{
               var base64 = Convert.ToBase64String(item.Content);
               var imgsrc = string.Format("data:image/gif;base64,{0}", base64);
           }

           <img src='@imgsrc'  style="max-width:120px;max-height:120px"/>

       </td>


       <td>
           @Html.DisplayFor(modelItem => item.SID.StatusDescription)
       </td>

....more items continued.....

我会根据状态ID的数据值在哪里进行更改或添加代码来为照片创建边框？

Answer 1

使用您想要的任何样式创建css类

.red-status {
    border: 2px solid red;
}

现在，您可以使用三元运算符有条件地为元素添加此css类。例如，如果要添加到图像，

<img src='@imgsrc' class='@(item.StatusId==2 ?"red-status":"")' />

虽然这有效，但我个人不会这样做（将statutsId检查为幻数），我会尝试获取相关的StatusCode / Name（如果存在）并从中创建css clases。

例如，如果视图模型项中有StatusCode属性，我只需使用它来呈现格式为myimg-{{statuscode}}的类（例如：myimg-active，myimg-closed）

<img src='@imgsrc' class='myimg-@item.StatusCode' />

现在您可以为每种状态定义css类

.myimg-active
{
   border: 2px solid green;
}
.myimg-closed
{
   border: 2px solid red;
}

如何根据该行中的数据在项目周围添加红色边框？

1 个答案: