Порядок отображения динамического div на странице Asp.Net MVC Razor View Server

Question

Возможно ли изменить порядок отображения divs при рендеринге Просмотр страницы на стороне сервера? Каждый отдельный div имеет разные C# и html-контент, поэтому их невозможно генерировать по циклу.

Одним из вариантов является отображение как есть и переупорядочение на стороне клиента, когда страница OnReady выполняется jQuery. Но у него есть некоторое время задержки для перераспределения div.

Другой вариант - сгенерировать страницу просмотра для каждого div, затем выполнить идентификацию цикла div, отобразить содержимое с помощью @Html.Action или @Html.RenderPartial. Это невозможно, если предметы> 20 и страницы> 100

Любое решение на стороне сервера было бы оценено.

Foo.cshtml страница:

<div class="container"> 
    <div id="a"> 
     //some c# codes to render html 
    </div> 
    <div id="b"> 
    //some other c# codes to render html 
    </div> 
    <div id="c"> 
    //some another c# codes to render html 
    </div> 
</div> 

Если значение Cookie для ViewOrder: C, B,

Ожидаемые результаты: с

<div class="container"> 
    <div id="c"> 
    //some another c# codes to render html 
    </div> 
    <div id="b"> 
    //some other c# code to render html 
    </div> 
    <div id="a"> 
     //some c# codes to render html 
    </div> 
</div> 

Возможное решение на стороне клиента с JQuery

$.fn.orderChildren = function(order) { 
    this.each(function() { 
     var el = $(this); 
     for(var i = order.length; i >= 0; i--) { 
      el.prepend(el.children(order[i])); 
     } 
    }); 
    return this; 
}; 


$(".user").orderChildren(["c","b","a"]); 

Answer 1

Для стороны сервера переупорядочения в cshtml, разделить ViewOrder в массив строк и итерации через него:

foreach(var div in ViewOrder.Split(",".ToCharArray()) { 
    switch (div) { 
     case "a": 
      <div id="a"> 
      //some c# codes to render html 
      </div> 
      break; 
     case "b": 
      <div id="b"> 
      //some c# codes to render html 
      </div> 
      break; 
     ... etc ... 
}} 

Обратите внимание, что есть также решение с использованием CSS Flexbox и атрибута CSS order:, как показано на this answer.

Answer 2

Если вы не хотите, чтобы создать партиалы (который я бы до сих пор считаю возможным, так как у вас есть разметка в любом случае на вашей странице), вы можете перебирает поиск предикаты и использовать switch, чтобы сделать ваши части:

Ваш контроллер будет добавить заказ к вашей модели:

//Model 
class MyModel { 
    //... 
    public string[] DivOrder { get; set; }; 
    //... 
} 

//Controller Action 
MyModel model = new MyModel(); 
//... 
model.DivOrder = new { "c", "b", "a" }; 
//... 

Ваше мнение будет переставлять вывод на основе заказа:

<div class="container"> 
    @foreach(string key in Model.DivOrder) { 
     switch (key) { 
      case "a": 
       <div id="a"> 
        //some c# codes to render html 
       </div> 
       break; 
      case "b": 
       <div id="b"> 
        //some other c# codes to render html 
       </div> 
       break; 
      case "c": 
       <div id="c"> 
        //some another c# codes to render html 
       </div> 
       break; 
     } 
    } 
</div>