仅刷新包含分页的侧边栏

时间:2013-04-30 15:25:00

标签: javascript jquery ajax asp.net-mvc-4 razor

我有一个包含侧边栏的网页,我使用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);
    }

这是我的观点(索引):

    <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" />
            }
             }

所以请允许任何人在这里帮助我。谢谢

1 个答案:

答案 0 :(得分:1)

您需要阅读有关ajax和部分视图的信息。 以下是如何执行此操作的示例:

using Ajax for partial view loading in .NET MVC4

这是一个你可以使用的教程。它说mvc3,但你可以将它应用于MVC4

http://geekswithblogs.net/blachniet/archive/2011/08/03/updating-partial-views-with-unobtrusive-ajax-in-mvc-3.aspx