ASP.NET MVC模式：已完成的作业应向下(在前端页面上排序)

frebpwbc 于 2022-12-27 发布在 .NET

关注(0)|答案(1)|浏览(86)

型号

public class Jobs
{
    public List<string> JobNames { get; set; }
}

控制器

public class HomeController : Controller 
{
    public static List<string> sorteddailyreports= new List<string>();
    static Jobs jobnames;

    public static List<string> dailyreports = new List<string>();
    
    public ActionResult GetJobs()
    {
        jobnames =new Jobs();
        dailyreports = new List<string> { "M2I|0705","FGI|1220","SDI|0100" };
        sorteddailyreports=dailyreports.ToList().OrderBy(x=> x.Split('|')[1].Trim()).ToList();
        jobnames.JobNames = sorteddailyreports;           
        return View(jobnames);
    }

    public static int IsJobRan(string job)
    {
        int completed = 0;

        if (true)  //some condition 
        {
            completed = 1;
        }
        else
        {
            completed = -1;
        }

        return completed;
    }
}

视图

@model WebApplication1.Models.Jobs

<body>
    @foreach(string jobdetails in Model.JobNames)
    {
        string job = jobdetails.Split('|')[0].Trim();
        string runtime = jobdetails.Split('|')[1].Trim();
        string fruntime = runtime.Substring(0, 2) + ":" + runtime.Substring(2, 2);

        if (WebApplication1.Controllers.HomeController.IsJobRan(jobdetails)==1)
        {
            <tr>
                @Html.Label(job)
            </tr>
            <tr>
                @Html.Label(fruntime)
            </tr>
        }
        <br />
    }
</body>

我期望在view中，如果method return 1意味着作业完成，那么completed job should go down，如果方法返回的不是1，那么job is sorted on the basis of runtime。
例如：如果M2I作业成功运行并返回1，则视图中预期的Output。已完成作业M2I应关闭，other jobs（如SDI and FGI）将根据运行时进行排序。

SDI 0100
FGI 1220
M2I 0705

我正在尝试但未获得所需结果的代码

sorteddailyreports = dailyreports.ToList()
                                 .OrderBy(x => x.Split('|')[1].Trim())
                                 .ToList();

Please amend the code, I am new in Asp.net MVC Thanks in advance.
我正在尝试通用移动方法移动已完成的列表到最后的前端页面。
添加此logic in Controller以将完成的列表移动到最后一个索引，但仍无法在前端获得排序。在视图中调用此方法，但仍不确定此Move方法是否是用于前端排序的可行解决方案。

public static void Move(List<string> list, int newIndex, int oldIndex)
       {
           var item = list[oldIndex];
           list.RemoveAt(oldIndex);
           if (newIndex > oldIndex) newIndex--;
           list.Insert(newIndex, item);
       }

asp.net

来源：https://stackoverflow.com/questions/74908133/asp-net-mvc-completed-job-should-go-down-sorting-on-front-end-page

1条答案

按热度按时间

7rfyedvj1#

您可以先查看前端gif图片。

还有这里的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3 dynamic</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        font-size: 12px;
    }
    .box{
        width: 600px;
        height: 500px;
        margin: 100px auto;
    }
    .skill {
        width: 100%;
        list-style: none;
    }
    .skill li {
        position: relative;
        margin-bottom: 25px;
    }
    .skill li .expand-box{
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        height: 15px;
        border-radius: 3px;
        border: 1px solid #092c99;
        position: relative;
    }
    .skill li em:first-child {
        position: absolute;
        top: -15px;
        left: 0;
    }
    .skill li em:last-child {
        position: absolute;
        top: -15px;
        right: 0;
    }
    .expand {
        height: 13px;
        margin: 0;
        top: 0;
        background: #2187e7;
        position: absolute;
        border-radius: 3px;
        box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.4);
    }
</style>
<body>

<div class="box">
    <ul class="skill" id="chart"></ul>
</div>

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function(){
        let listdata = [
        {"data1":"Job 1","data2":54},
        {"data1":"Job 2","data2":3},
        {"data1":"Job 3","data2":12},
        {"data1":"Job 4","data2":65},
        {"data1":"Job 5","data2":3}
        ];

        const compareData2 = (arrayItemA, arrayItemB) => {
            if (arrayItemA.data2 < arrayItemB.data2) {
                return 1
            }
            if (arrayItemA.data2 > arrayItemB.data2) {
                return -1
            }
            return 0
        }

        const objectComparisonCallback = (arrayItemA, arrayItemB) => {
            // first sort by data2
            return compareData2(arrayItemA, arrayItemB)
        }
        listdata.sort(objectComparisonCallback)

        loadData(listdata);

        
        var job3 = setInterval(function(){
            //find Job3
            const index = listdata.findIndex(object => {
                return object.data1 === "Job 3";
            }); // 👉️ 1

            if (index !== -1) {
                if(listdata[index].data2< 100){
                    listdata[index].data2 += 1;
                    $('#chart').empty();
                    listdata.sort(objectComparisonCallback);
                    loadData(listdata);
                    //clear all the css style about the .animations2
                    $(".animations"+index).css("width",listdata[index].data2+"%")
                }
                else{
                    console.log("Job 3 COMPLETED!");
                    clearInterval(job3);
                }
            }
        }, 100);
        
    })

    function loadData(listdata){
        
        let _html = '';
        let len = listdata.length;
        if(len > 0){
            for(let i = 0; i < len; i++){
                _html += '<li>';
                _html += '<em>'+listdata[i]['data1']+'</em>';
                _html += '<div class="expand-box"><span class="expand animations'+i+'"></span></div>';
                _html += '<em>'+listdata[i]['data2']+'%</em>';
                _html += '</li>';

                let newStyle=document.styleSheets[0];
                
                newStyle.insertRule(
                    ".animations"+i+" { " +
                    "width: "+listdata[i]['data2']+"%;" +
                    "-moz-animation:animations"+i+" 0s ease-out;" +
                    "-webkit-animation:animations"+i+" 0s ease-out;" +
                    "}", 0);
                newStyle.insertRule(
                    "@keyframes animations"+i+"{ " +
                    "0% { width: 0; } " +
                    "100% { width:"+listdata[i]['data2']+" % }" +
                    "}",0);
                $('#chart').html(_html);
            }
        }else{
            $('#chart').html('No Data');
        }
    }

</script>
</body>
</html>

你应该学学the signalr in asp.net core。
Signalr的使用可以很好的进行实时通讯，后台任务执行过程可以通过WebSocket实时发送到前端页面，您可以根据需要实现前端页面的排序。
这里是一个完整的示例代码，你可以参考博客来实现你的需求。
Communicate the status of a background job with SignalR

赞(0）回复(0）举报 2022-12-27

我来回答

ASP.NET MVC模式：已完成的作业应向下(在前端页面上排序)

1条答案

相关问题

热门标签

最新问答