juipnet/Host/Views/LineList/Index2.cshtml

@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using Hncore.Pass.Vpn.Service
@inject ProductService m_ProductService
@model List<ProductRouteEntity>
@{
    var pid = this.Context.Request.GetInt("ProductId");
    var product = ViewData["products"] as List<ProductEntity>;
    var currentProduct =(await m_ProductService.GetById(pid)) ?? new ProductEntity();

    var lineTotalCount = Model.Count;
    var lineCount = Model.Where(m=>m.Status== "正常").Count();
}
<style>
    .blueLine img {
        display: inline !important;
    }
</style>
<div class="container-fluid softBg">
    <div class="container">
        <div class="row">
            <form asp-action="index2" asp-controller="linelist" method="get">
                <div class="col-lg-3 zxbz">
                    <img src="~/img/img_xinalu.png">
                </div>
                <div class="col-lg-5 searchInput">                   
                    <input type="text" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" />
                </div>
                <div class="col-lg-2 searchBtn text-left">
                    <button type="submit" class="btn btn-search">搜索全部</button>
                </div>
                <div class="col-lg-2">
                    <span class="btnZhilian cursor"><a asp-index="" asp-controller="article" asp-route-Catalog="4" style="color:white"><img src="~/img/zhilian.png">直连教程</a></span>
                </div>
            </form>
        </div>
        <div class="row">
            <div class="col-lg-3">

            </div>
            <div class="col-lg-9">
                <p class="hot"><img src="~/img/shuju.png">实时总线路：@(lineTotalCount)条<img src="~/img/shuju.png">实时可用线路：@(lineCount)条 所有线路均支持：【电脑/安卓/苹果】【IP/L2TP/SSTP】</p>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <a  style="margin-left: 45%;" href="/linelist/index" class="btn btn-primary">*返回新版本服务器*</a>
    <p class="xianluIntro" style="text-align: center;font-size: 25px;">*线路表和账号必须为同一产品才能使用。@*（已购产品：<span>老鹰b组</span>）*@</p>
    <div class="xianlu">
        @foreach (var item in product.Where(m => m.Id != 3 && m.Id != 7 && m.Id != 9))
        {
        <div class="item @(item.Id==pid?"blueLine":"")" a-pid="@item.Id" a-name="@item.Name">
            <span>@item.Name</span><img src="~/img/check.png">
        </div>
        }
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-2 miyao">
            <p><img src="~/img/miyao.png"> L2TP密钥：<b style="color:red;">@currentProduct.L2TPPwd</b></p>
            <p><img src="~/img/dk.png"> SSTP端口：<b style="color:red;">@currentProduct.SSTPPort</b></p>
        </div>
        <div class="col-lg-2 fanwei">
            搜索范围：<span id="pName">@currentProduct.Name</span>
        </div>
        <div class="col-lg-8">
            <form asp-action="index2" asp-controller="linelist" method="get">
                <input type="hidden" name="ProductId" id="ProductId" value="@pid" />
                <input type="text" name="KeyWord" class="searchDq" placeholder="输入地区/名称/服务器" id="KeyWord" />
                <button type="submit" class="btn btn-primary">搜索当前线路表</button>
                <span class="daochu"><img src="~/img/excel.png">导出Excel</span>
            </form>

        </div>
    </div>
</div>

<div class="container">
    <table class="table table-striped xianluTable">
        <tr>
            <th><img src="~/img/chengshi.png">产品</th>
            <th><img src="~/img/chengshi.png">城市</th>
            <th><img src="~/img/yunyingshang.png"> 运营商</th>
            <th><img src="~/img/yuming.png"> 服务器域名</th>
            <th><img src="~/img/daikuan.png"> 实时带宽</th>
            <th><img src="~/img/ipliang.png"> IP量</th>
            <th><img src="~/img/zhuangtai.png"> 状态</th>
            <th><img src="~/img/xianlushuoming.png"> 线路说明</th>
        </tr>
        @foreach (var group in Model.GroupBy(m => m.Province))
        {
            <tr><td style="background:#dedede;"></td><td colspan="7" style="background:#dedede;text-align:left;padding-left: 50px;">@group.Key</td></tr>
            @foreach (var item in group)
            {
                <tr style="@(item.Status=="正常"?"":"color:red")">
                      <td>@item.ProductName</td>
                    <td>@item.City</td>                   
                    <td>@item.Name</td>
                    <td class="blueT">@item.ServerUrl</td>
                    <td>@item.BandWidth</td>
                    <td>@item.IpRemark</td>
                    <td class="greenT">@item.Status</td>
                    <td>评分★★★★★</td>
                </tr>
            }
        }


    </table>
</div>
<script type="text/javascript">
    var pid =@pid;
    var productName=""
			$(function(){
				$(".xianlu .item").click(function(){
					$(this).addClass("blueLine");
					$(this).siblings().removeClass("blueLine");
                    pid = $(this).attr("a-pid");
                    productName = $(this).attr('a-name')
                    $("#pName").text(productName);
                    $("#ProductId").val(pid);
                    window.location.href = "/linelist/index2?ProductId="+pid;
                })
                $(".daochu").click(function () {
                    var p = $("#ProductId").val()||0;
                    var KeyWord = $("#KeyWord").val() || "";
                    window.location.href = "/linelist/Excel?ProductId=" + p + "&KeyWord=" + KeyWord;
                })
			})
</script>