その行のデータに基づいてアイテムの周囲に赤い枠線を追加するにはどうすればよいですか？

私はそれぞれのクライアントに関する情報と、その画像を格納するバイト[]を持つモデルを持っています。特定のクライアントに特定の値が存在する場合にのみ、イメージの周りに境界線を配置したいと考えています。例えば、Captain Jack Sparrowの「ステータスID」が2の場合、赤い枠が彼の写真の周りに表示されます。誰かが私にこれを行う方法の例を教えてもらえますか？私は例やチュートリアルを検索しようとしましたが、関連すると思われるものが見つからず、正しく理解できません。私は変更を加えたり、ステータスのデータ値に基づいて、写真の境界線を作成するためのコードを追加しますその行のデータに基づいてアイテムの周囲に赤い枠線を追加するにはどうすればよいですか？

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

：ここ

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

が私のインデックスページである：ここで

は私のコントローラであり、イド？

出典

2017-11-26 ineoki

ジャスト（item.StatusId == 2） 'ビューにどのように私は内部の「場合」を使用して行くでしょうボーダー –

で' '要素のスタイルを'場合に使用します''の要素ですか？私は 'style ='と仮定します。構文は何でしょうか？ – ineoki

ちょうどShyjuの答え（しかし、 ''要素ではなく ''に適用） –

あなたは

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

は今、あなたは条件付きであなたの要素のために、このCSSクラスを追加するために、三項演算子を使用することができ、好きなスタイルでCSSクラスを作成します。たとえば、あなたがイメージに追加したい場合は

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

これは動作しますが、私は個人的にこの（マジックナンバーにstatutsIdをチェック）をしないだろう、私は、関連のStatusCode /名前を取得しようと使用しますもし存在すればそれからcss clasesを作ります。

たとえば、あなたはあなたのビューモデル項目でのStatusCodeプロパティを持っている場合、私は単に形式myimg-{{statuscode}}を持つクラスをレンダリングすることを使用します（例：myimg-active、myimg-closed）

<img src='@imgsrc' class='[email protected]' />

今、あなたが定義することができます各ステータスのためのCSSクラス

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

出典

2017-11-26 01:43:39 Shyju

ありがとう。そのクライアントの単一オブジェクトではなく、行全体（写真、名前などを含む）に赤い枠線を表示したい場合、それは可能ですか？ – ineoki

ああ、気にしない。私は今、 ''に追加するのではなく、 '' – ineoki

その行のデータに基づいてアイテムの周囲に赤い枠線を追加するにはどうすればよいですか？

答えて

関連する問題