Использование мультимедийного запроса 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 для тех же данных - 1 для каждого медиа-запроса.

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