juipnet/Host/Views.Mobile/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();
}

<div class="quanjushousuo">
    <form asp-action="index2" asp-controller="linelist" method="get">
        <p><input type="text" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" /><button type="submit" class="btnOrange">搜索全部</button></p>
        <p><img src="~/m/img/shuju.png"> 实时总线路：@(lineTotalCount)条 <img src="~/m/img/shuju.png"> 实时可用线路：@(lineCount)条</p>
        <p>所有线路均支持：【电脑/安卓/苹果】【IP/L2TP/SSTP】</p>
    </form>
</div>

<div class="zhilian">
    <div class="item">
        <span class="btnZhilian">
            <a asp-index="" asp-controller="article" asp-route-Catalog="4"><img src="~/m/img/zhilian.png">直连教程</a>
        </span>
    </div>
    <div class="item">
        @*<p class="blueText">已购产品：<span>老鹰b组</span></p>*@
        <p class="grayText" style="font-size: 25px;">线路表与账号必须为同一产品才能使用</p>
        <a href="/linelist/index" style="font-size: 25px;">查看新版本服务器</a>
    </div>
</div>

<div class="lineBar"></div>

<div class="cpList">
    <ul>
        @foreach (var item in product.Where(m => m.Id != 3 && m.Id != 7 && m.Id != 9))
        {
            <li class="item @(item.Id==pid?"cpActive":"")" a-pid="@item.Id" a-name="@item.Name">@item.Name</li>
        }
    </ul>
</div>

<div class="dangqianshousuo">
    <form asp-action="index2" asp-controller="linelist" method="get">
        <p>
            <input type="hidden" name="ProductId" id="ProductId" value="@pid" />
            <input type="text" name="KeyWord" placeholder="输入地区/名称/服务器" id="KeyWord" />
            <button type="submit" class="btnBlue">搜索当前</button>
        </p>
    </form>
</div>

<div class="daochu">
    <div class="item">
        <p><img src="~/m/img/miyao.png"> L2TP密钥：@currentProduct.L2TPPwd</p>
        <p><img src="~/m/img/dk.png"> SSTP端口：@currentProduct.SSTPPort</p>
    </div>
    <div class="item">
        <span><img src="~/m/img/excel.png"> 导出Excel</span>
    </div>
</div>

<div class="tableTit">
    <div class="item">
        地区
    </div>
    <div class="item">
        运营商
    </div>
    <div class="item">
        服务器域名
    </div>
    <div class="item">
        详情
    </div>
</div>

@foreach (var group in Model.GroupBy(m => m.Province))
{
    <p class="city">@group.Key</p>
    @foreach (var item in group)
    {
        <div class="cityData" style="@(item.Status=="正常"?"":"color:red")">
            <div class="item">
                @item.City
            </div>
            <div class="item">
                @item.Name
            </div>
            <div class="item">
                @item.ServerUrl
            </div>
            <div class="item">
                <button type="button" class="btnDetail"
                 a-City="@item.City"
                 a-Name="@item.Name"
                 a-ServerUrl="@item.ServerUrl"
                 a-BandWidth="@item.BandWidth"
                 a-IpRemark="@item.IpRemark"                          
                 a-Status="@item.Status">详情</button>
            </div>
        </div>
    }
}

<!-- 弹窗详情 -->
<div class="layerTable">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>城市：</td>
            <td id="layer_city"></td>
        </tr>
        <tr>
            <td>运营商：</td>
            <td id="layer_name"></td>
        </tr>
        <tr>
            <td>服务器域名：</td>
            <td id="layer_server"></td>
        </tr>
        <tr>
            <td>实时带宽：</td>
            <td id="layer_brand"></td>
        </tr>
        <tr>
            <td>IP量：</td>
            <td id="layer_ip"></td>
        </tr>
        <tr>
            <td>状态：</td>
            <td id="layer_status"></td>
        </tr>       
    </table>
    <div class="back">
        <img src="~/m/img/arrowback.png"> 返回列表
    </div>
</div>


<script type="text/javascript">
    var pid =@pid;
    var productName=""
    $(function () {
				$(".cpList ul li").click(function(){
					$(this).addClass("cpActive");
                    $(this).siblings().removeClass("cpActive");
                    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;
                })
                $(".btnDetail").click(function () {      
                    $(".layerTable").show();
                    $("#layer_city").text($(this).attr("a-City"));
                    $("#layer_name").text($(this).attr("a-Name"));
                    $("#layer_server").text($(this).attr("a-ServerUrl"));
                    $("#layer_brand").text($(this).attr("a-BandWidth"));
                    $("#layer_ip").text($(this).attr("a-IpRemark"));
                    $("#layer_status").text($(this).attr("a-Status"));
           
                })
        $(".back").click(function () { $(".layerTable").hide(); }); 
			})
</script>