C# 在mvc中的另一个Webgrid排序中添加额外的Webgrid

我在同一视图中使用两个webgrid。当我单击第二个gridview列时，排序效果非常好，但当我单击第一个gridview进行排序时，第二个gridview的克隆会添加到第一个grid view之后

这是我的密码：

 <div class="x_content drop-shadow">
        @{
            var grid = new WebGrid(source: Model.MembershipList, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "checkableGrid1", fieldNamePrefix: "g1",pageFieldName: "p1");
            grid.Pager(WebGridPagerModes.All);
            int rowVal = 0;

            @grid.GetHtml(tableStyle: "table table-striped responsive-utilities jambo_table bulk_action", headerStyle: "headings", footerStyle: "webgrid-footer", alternatingRowStyle: "", rowStyle: "", htmlAttributes: new { id = "checkableGrid1" },
    columns: grid.Columns(
    grid.Column("Sr.No.", format: item => rowVal = rowVal + 1),
    grid.Column(columnName: "ShopName", header: "Store Location"),
    grid.Column(columnName: "MembershipTitle", header: "Membership Title"),
    grid.Column(columnName: "MembershipTimeFrame", header: "TimeFrame[Days]"),
    grid.Column(columnName: "MembershipMinVisit", header: "Minimum Visits"),
    grid.Column(header: "Status", format: @<span style="cursor:pointer" id="@item.MembershipID" class="editButton"><u><i class="fa fa-pencil"></i>Edit</u></span>)
))
     }
    </div>

@{
var grid=new WebGrid（来源：Model.MembershipList，canPage:true，rowsPerPage:10，canSort:true，ajaxUpdateContainerId:“checkableGrid1”，fieldname前缀：“g1”，pageFieldName:“p1”）；
Pager（WebGridPagerModes.All）；
int-rowVal=0；
@GetHtml（tableStyle:“table-table-striped-responsive-utilities jambo_-table bulk_action”，headerStyle:“headers”，footersstyle:“webgrid-footer”，alternatingRowStyle:，rowStyle:，htmlAttributes:new{id=“checkableGrid1”}，
列：grid.columns(
grid.Column（“Sr.No.”，格式：item=>rowVal=rowVal+1），
grid.Column（columnName:“ShopName”，header:“Store Location”），
grid.Column（列名称：“MembershipTitle”，标题：“MembershipTitle”），
grid.Column（columnName:“MembershipTimeFrame”，标题：“TimeFrame[Days]”，
grid.Column（columnName:“MembershipMinVisite”，标题：“最低访问量”），
网格列（标题：“状态”，格式：@Edit）
))
}

第二个GridView：

 <div class="x_content drop-shadow">
        @{
            var gridReward = new WebGrid(source: Model.RewardList, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "checkableGrid2", fieldNamePrefix: "g2",pageFieldName: "p2");
            gridReward.Pager(WebGridPagerModes.All);
            int rowVal1 = 0;

            @gridReward.GetHtml(tableStyle: "table table-striped responsive-utilities jambo_table bulk_action", headerStyle: "headings", footerStyle: "webgrid-footer", alternatingRowStyle: "", rowStyle: "", htmlAttributes: new { id = "checkableGrid1" },
             columns: gridReward.Columns(
             gridReward.Column("Sr.No.", format: item => rowVal1 = rowVal1 + 1),
             gridReward.Column(columnName: "Storename", header: "Store Location"),
             gridReward.Column(columnName: "MembershipTitle", header: "Membership Title"),
             gridReward.Column(columnName: "RewardPoints", header: "HighFive(s) Awarded"),
             gridReward.Column(header: "Status", format: @<span style="cursor:pointer" id="@item.RewardID" class="editButton"><u><i class="fa fa-pencil"></i>Edit</u></span>)
))
            }
        </div>

@{
var gridReward=new WebGrid（来源：Model.RewardList，canPage:true，rowsPerPage:10，canSort:true，ajaxUpdateContainerId:“checkableGrid2”，FieldName前缀：“g2”，pageFieldName:“p2”）；
gridReward.Pager（WebGridPagerModes.All）；
int rowVal1=0；
@GetHtml（tableStyle:“表格条带化响应实用程序jambo_表格批量_操作”，headerStyle:“标题”，footerStyle:“webgrid页脚”，alternatingRowStyle:，rowStyle:，htmlAttributes:new{id=“checkableGrid1”}，
列：gridReward.columns(
gridReward.Column（“Sr.No.”，格式：item=>rowVal1=rowVal1+1），
gridReward.Column（columnName:“Storename”，header:“Store Location”），
gridReward.Column（columnName:“MembershipTitle”，标题：“MembershipTitle”），
gridReward.Column（columnName:“RewardPoints”，标题：“HighFive（s）Dewarded”），
gridReward.Column（标题：“状态”，格式：@Edit）
))
}

这里我附上了GridView的快照： 排序第一个GridView后：