Javascript 仅刷新包含分页的侧栏

我有一个网页，其中包含一个侧栏，我使用PagedList分页显示数据

因此，我想转到下一页或上一页，而不刷新所有页面，只刷新有分页的侧栏。 下面是控制器中的代码：

public ActionResult Index(string sortOrder, string searchString, string currentFilter, int? page)
 {

  IEnumerable<CheckpointsModel> checkpoints = (from ch in dbcontext.checkPoint select new CheckpointsModel { checkpointID = ch.checkpointsid, adress = ch.city, lattitude = ch.lattitude, longidue = ch.longitude, indice = ch.id }).ToList();       
        IEnumerable<AlertsModel> alerts = (from al in dbcontext.Alert where(al.isReported=="No") select new AlertsModel { cinDr = al.cinDr, permitNumber = al.permitNumDr, name = al.nameDr, Drpicture = al.pictureDr, cinOw = al.cinOw, OwpermitNumber = al.PermitNumOw, Owname = al.nameOw, Owpicture = al.pictureOw, carNumber = al.carNum, brand = al.brand, model = al.model, carpicture = al.carPicture, alertType = al.alertType, lattitude = al.lattitude, longitude = al.longitude, speed = al.carSpeed }).ToList();



        var AlertsCheckpoints = new AlertViewModel
            {
                alerts=alerts,
                checkpoints=checkpoints
            };
        if (Request.HttpMethod == "GET")
        {
            searchString = currentFilter;
        }
        else
        {
            page = 1;
        }

        switch (sortOrder)
        {
            case "cin":
                AlertsCheckpoints.alerts = AlertsCheckpoints.alerts.OrderByDescending(s => s.cinOw);
                break;
            case "Prenom":
                AlertsCheckpoints.alerts = AlertsCheckpoints.alerts.OrderBy(s => s.Owname);
                break;
            default:

                AlertsCheckpoints.alerts = AlertsCheckpoints.alerts.OrderBy(s => s.Owname);
                break;
        }
        switch (sortOrder)
        {
            case "City":
                AlertsCheckpoints.checkpoints = AlertsCheckpoints.checkpoints.OrderByDescending(s => s.adress);
                break;
            case "ID":
                AlertsCheckpoints.checkpoints = AlertsCheckpoints.checkpoints.OrderBy(s => s.checkpointID);
                break;
            default:
                AlertsCheckpoints.checkpoints = AlertsCheckpoints.checkpoints.OrderBy(s => s.checkpointID);
                break;
        }
        int pageSize = 1;
        int pageNumber = (page ?? 1);
        var paginatedmodel = new AlertViewModel(alerts.ToPagedList(pageNumber, pageSize), checkpoints.ToPagedList(pageNumber, pageSize));
        return View(paginatedmodel);
    }

public ActionResult索引（字符串排序器、字符串搜索字符串、字符串当前筛选器、int？页）
{
IEnumerable checkpoints=（从dbcontext.checkPoint中的ch选择新的checkpoints模型{checkpointID=ch.checkpointsid，address=ch.city，latitude=ch.latitude，longidue=ch.longitude，indice=ch.id}）；
IEnumerable alerts=（来自dbcontext.Alert中的al，其中（al.isReported==“否”）选择new AlertsModel{cinDr=al.cinDr，permitNumber=al.permitNumDr，name=al.nameDr，Drpicture=al.pictureDr，cinOw=al.cinOw，OwpermitNumber=al.PermitNumOw，Owname=al.nameOw，Owpicture=al.pictureOw，carNumber=al.carNum，brand=al.model，carpicture=al.carpicture，alertType=al.alertType，latitude=al.latitude=al.latitude，long=al.long=al.long=al.longgitude，speed=al.carSpeed}）.ToList（）；
var AlertsCheckpoints=新的AlertViewModel
{
警报=警报，
检查点=检查点
};
if（Request.HttpMethod==“GET”）
{
searchString=currentFilter；
}
其他的
{
page=1；
}
开关（分拣机）
{
案例“cin”：
AlertsCheckpoints.alerts=AlertsCheckpoints.alerts.OrderByDescending（s=>s.cinOw）；
打破
案例“Prenom”：
AlertsCheckpoints.alerts=AlertsCheckpoints.alerts.OrderBy（s=>s.Owname）；
打破
违约：
AlertsCheckpoints.alerts=AlertsCheckpoints.alerts.OrderBy（s=>s.Owname）；
打破
}
开关（分拣机）
{
案例“城市”：
AlertsCheckpoints.checkpoints=AlertsCheckpoints.checkpoints.OrderByDescending（s=>s.Address）；
打破
案例“ID”：
AlertsCheckpoints.checkpoints=AlertsCheckpoints.checkpoints.OrderBy（s=>s.checkpointID）；
打破
违约：
AlertsCheckpoints.checkpoints=AlertsCheckpoints.checkpoints.OrderBy（s=>s.checkpointID）；
打破
}
int pageSize=1；
整数页码=（第1页）；
var paginatedmodel=新的AlertViewModel（alerts.ToPagedList（pageNumber，pageSize），checkpoints.ToPagedList（pageNumber，pageSize））；
返回视图（分页模型）；
}

以下是我的观点（索引）：

@{
ViewBag.Title=“主页”；
}
@{
Layout=“~/Views/Shared/_LayoutWithSidebar.cshtml”；
}
第@页（Model.alerts.PageCount


@Html.Raw（al.cinDr）
@Html.Raw（al.name）
@Html.Raw（al.permitNumber）


@Html.Raw（al.carNumber）
@Html.Raw（al.brand）
@Html.Raw（al.model）
@Html.Raw（al.speed）


@Html.Raw（al.cinOw）
@Html.Raw（al.Owname）
@Html.Raw（al.OwpermitNumber）
@如果（Model.alerts.HasPreviousPage）
{
@Html.ActionLink（“>”，“Index”，新{page=Model.alerts.PageCount，sortOrder=ViewBag.CurrentSort，currentFilter=ViewBag.currentFilter}）
}
其他的
{
@：下一步>
@Html.Raw（“”）
@:>>
}
var lat='@Html.Raw（al.latitude）'；
var lng='@Html.Raw（al.longitude）'；
var carNum='@Html.Raw（al.carNumber）'；
}
}

---

因此，请任何人在这里帮助我。谢谢你。你需要阅读有关ajax和部分视图的内容。 下面是一个如何执行此操作的示例：

这里有一个你可以使用的教程，上面说它适用于mvc3，但你也可以应用于MVC4

---

您需要了解ajax和局部视图。 下面是一个如何执行此操作的示例：

这里有一个你可以使用的教程，上面说它适用于mvc3，但你也可以应用于MVC4

    <script src="@Url.Content("~/Scripts/Map.js")" type="text/javascript"></script>
          <script src="@Url.Content("~/Scripts/ajax.js")" type="text/javascript"></script>
         @{
          ViewBag.Title = "Home Page";
            }
        @{
      Layout = "~/Views/Shared/_LayoutWithSidebar.cshtml";
        }
<td><label>Page @(Model.alerts.PageCount < Model.alerts.PageNumber ? 0 : Model.alerts.PageNumber)
    of @(Model.alerts.PageCount) </label></td>
@section Sidebar {

 @foreach (var al in Model.alerts)
 { 

<table border="0">
<tr>
<td rowspan=1 class="alert-type"><label class="label" style="font-size:0.85em;">Alert type  :</label></td>
<td><label class="label" style="font-size:0.85em;"> @Html.Raw(al.alertType)</label></td>

</table>

    <hr />
<br />
<table border="0">
<tr>
<td rowspan=3><img src= '@Html.Raw(al.Drpicture)' class="img" alt="IMAGES"/></td>
<td><label class="lb">@Html.Raw(al.cinDr)</label></td> 
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.name)</label></td>
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.permitNumber)</label></td>

</tr>

</table>
<br />
<table border="0">
<tr>
<td rowspan=4><img src= '@Html.Raw(al.carpicture)' class="img" alt="IMAGES"/></td>
<td><label class="lb">@Html.Raw(al.carNumber)</label></td>
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.brand)</label></td>
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.model)</label></td>
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.speed)</label></td>
</tr>
</table> 
<br />
<table border="0">
<tr>
<td rowspan=3><img src= '@Html.Raw(al.Owpicture)' class="img" alt="IMAGES"/></td>
<td><label class="lb">@Html.Raw(al.cinOw)</label></td>
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.Owname)</label></td>
</tr>
<tr>
<td><label class="lb">@Html.Raw(al.OwpermitNumber)</label></td>
</tr>
</table>
     <div>


    @if (Model.alerts.HasPreviousPage)
    {
        @Html.ActionLink("<<", "Index", new { page = 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
        @Html.Raw(" ");
        @Html.ActionLink("< Prev", "Index", new { page = Model.alerts.PageNumber - 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
    }
    else
    {
        @:<<
        @Html.Raw(" ");
        @:< Prev
    }

    @if (Model.alerts.HasNextPage)
    {
        @Html.ActionLink("Next >", "Index", new { page = Model.alerts.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
        @Html.Raw(" ");
        @Html.ActionLink(">>", "Index", new { page = Model.alerts.PageCount, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })
    }
    else
    {
        @:Next >
        @Html.Raw(" ")
        @:>>
    }
</div>
        <script>
            var lat = '@Html.Raw(al.lattitude)';
            var lng = '@Html.Raw(al.longitude)';
            var carNum = '@Html.Raw(al.carNumber)';
        </script>
        <input type="submit" name="CheckPoints" value="CheckPoints" onclick="getMap(places, lat, lng)" />
        <input type="submit" name="Tracking" value="Tracking" data-coords="coords()" data-att="@al.lattitude" data-lng="@al.longitude"/>
        <input type="submit" name="Report" value="Report" data-carnum="@al.carNumber" />
            }
             }