Question

在服务器端渲染View Page时，是否可以更改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解决方案，如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>

Asp.Net MVC Razor View Server Side上的动态div显示顺序

2 个答案: