Asp.Net MVC Razor View服务器端的动态div显示顺序

Question

在服务器端渲染视图页面时是否可以更改div的显示顺序？ 每个div都有不同的c＃和html内容，因此无法通过循环生成它们。

一种选择是按原样显示并在jQuery页面OnReady时在客户端重新排序。 但是重新分配div会有一些延迟时间。

另一个选择是为每个div生成视图页面，然后循环div id，使用@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>

当ViewOrder的Cookie值：c，b，a

预期产量：

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

请注意，还有一个使用FlexBox和CSS order:属性的CSS解决方案，如本答案所示 。

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>