Twitter Bootstrapメディアクエリを使用してRazorビュー変数を設定する

Question

私のRazorビューには、ページをレイアウトする次のコードがあります。しかし、私はnumberOfColumnsの値を変更したいメディアクエリに基づいています。 MDが2のときとSMのときは1を使います。メディアクエリに基づいて出力する列の数を変更します。これは可能ですか？

これを行う別の方法がない場合は、

bool inRow = false; 
int numberOfColumns = 3; //<---- Change based on media query 
int columnNumber = 0; 
foreach (OzCpCruiseListItem cruiseItem in Model.CruisesBrief) 
{ 
    columnNumber++; 
    if (columnNumber == 1) 
    { 
     inRow = true; 
    } 

    if (inRow && columnNumber == 1) 
    { 
     @Html.Raw("<!-- START Row --><br />") 
     @Html.Raw("<div class=\"row\">") 
    } 

    <div class="col-lg-4 col-md-6 col-sm-12"> //<--- 3 col for large, 2 for medium, 1 small 
    </div> 

    if (columnNumber == numberOfColumns) 
    { 
     inRow = false; 
     @Html.Raw("</div>") 
     @Html.Raw("<!-- END Row --><br />") 
     columnNumber = 0; 
    } 
} 

//Close row if needed 
if (inRow) 
{ 
    @Html.Raw("<!-- END AT END Row --><br />") 
    @Html.Raw("</div") 
} 

Answer 1

@DavidGのおかげで、私が何を知りましたか。以下は、私が求めようとしていたものに対する私の解決策です。言い換えれば、「特定のメディアクエリで行の列が次の行に折り返されることは決してありませんでした」経由して、私は期待していた列の数に基づいて

私はこれを行うために考え出すことができる唯一の方法は、出力にメディアクエリーごとにいくつかのHTMLで、（列のための）クラスを変える：

result += $"<div class=\"col-{aMediaValue.ToLower()}-{columnSize}\">"; 

の場合私が同じデータのために4つのロットのHTMLを出力しているという事実が気に入らないので、私はそれを聞きたいという良い方法があります。

@functions { 
    HtmlString CardViewOutput(string aMediaValue) 
    { 
     string result = ""; 
     int columnCount; 

     switch (aMediaValue.Trim().ToUpper()) 
     { 
      case "LG": 
       columnCount = 3; 
       break; 
      case "MD": 
       columnCount = 2; 
       break; 
      case "SM": 
      case "XS": 
       columnCount = 1; 
       break; 
      default: 
       columnCount = 1; 
       break; 
     } 
     int columnSize = 12/columnCount; 


     bool inRow = false; 
     int columnNumber = 0; 
     foreach (OzCpCruiseListItem cruiseItem in Model.CruisesBrief) 
     { 
      columnNumber++; 
      if (columnNumber == 1) 
      { 
       inRow = true; 
      } 

      if (inRow && columnNumber == 1) 
      { 
       result += "<!-- START Row --><br />"; 
       result += "<div class=\"row\">"; 
      } 

      result += $"<div class=\"col-{aMediaValue.ToLower()}-{columnSize}\">"; 
      result += "</div>"; 


      if (columnNumber == columnCount) 
      { 
       inRow = false; 
       result += "</div>"; 
       result += "<!-- END Row --><br />"; 
       columnNumber = 0; 
      } 
     } 

     //Close row if needed 
     if (inRow) 
     { 
      result += "<!-- END AT END Row --><br />"; 
      result += "</div>"; 
     } 

     return new HtmlString(result); 
    } 
} 

@*-- Card View -----------------------------------------------------------------------------------------------------------*@ 
@if (Model.CruisesBrief.Count == 0) 
{ 
    @Html.Raw("<div class=\"row\"><div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">No cruises to display.</div></div>") 
} 
else 
{ 
    @Html.Raw("<div class=\"visible-lg\">") 
    @Html.Raw("LARGE") 
    @Html.Raw(CardViewOutput("LG")) 
    @Html.Raw("</div>") 
    @Html.Raw("<div class=\"visible-md\">") 
    @Html.Raw("MEDIUM") 
    @Html.Raw(CardViewOutput("MD")) 
    @Html.Raw("</div>") 
    @Html.Raw("<div class=\"visible-sm\">") 
    @Html.Raw("SMALL") 
    @Html.Raw(CardViewOutput("SM")) 
    @Html.Raw("</div>") 
    @Html.Raw("<div class=\"visible-xs\">") 
    @Html.Raw("EXTRA SMALL") 
    @Html.Raw(CardViewOutput("XS")) 
    @Html.Raw("</div>") 
} 
@*-- /Card View ----------------------------------------------------------------------------------------------------------*@