C# Asp.NETMVC Razor视图服务器端的动态div显示顺序

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

一个选项是，当jQuery打开页面时，按原样显示并在客户端重新排序。但是重新排列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>

---

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

foreach（ViewOrder.Split（“，”.ToCharArray（）中的var div）{
开关（div）{
案例“a”：
//一些用于呈现html的c#代码
打破
案例“b”：
//一些用于呈现html的c#代码
打破
等
}}

---

请注意，还有一个使用FlexBox和CSS

order:

属性的CSS解决方案，如中所示。

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

foreach（ViewOrder.Split（“，”.ToCharArray（）中的var div）{
开关（div）{
案例“a”：
//一些用于呈现html的c#代码
打破
案例“b”：
//一些用于呈现html的c#代码
打破
等
}}

---

注意到还有一个使用FRISBOX和CSS <代码>顺序：属性的CSS解决方案，如

> P >如果你不想创建部分（我仍然认为可行的话，因为你的页面中有标记），你可以循环你的搜索谓词，并使用<代码>开关< /C>来渲染你的部分：

您的控制器将向您的模型添加订单：

//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>

@foreach（Model.DivOrder中的字符串键）{
开关（钥匙）{
案例“a”：
//一些用于呈现html的c#代码
打破
案例“b”：
//用于呈现html的其他一些c#代码
打破
案例“c”：
//还有一些c#代码用于呈现html
打破
}
}
< /代码> 如果您不想创建泛型（我仍然认为可行的话，因为您的页面中有标记），则可以循环搜索谓词，并使用<代码>开关< /代码>来呈现您的部分：

您的控制器将向您的模型添加订单：

//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>


@foreach（Model.DivOrder中的字符串键）{
开关（钥匙）{
案例“a”：
//一些用于呈现html的c#代码
打破
案例“b”：
//用于呈现html的其他一些c#代码
打破
案例“c”：
//还有一些c#代码用于呈现html
打破
}
}