Ajax Paging在我的asp.net mvc Web应用程序中不起作用

时间:2013-07-15 01:15:02

标签: jquery asp.net asp.net-mvc

我在asp.net mvc中安装了PagedList.mvc分页库。我添加了以下脚本: -

var getPage = function () {
    var $a = $(this);
    var options = {
        url: $a.attr("href"),
        type: "get"
    };
    $.ajax(options).done(function (data) {
        var target = $a.parent("div.pagedList").attr("data-tms-target");
        $(target).replaceWith(data);
    });
    return false;
};



$(".main-content").on("click", ".pagedList a", getPage);

主视图如下: -

@model IPagedList<TMS.Models.AuditInfo>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="AuditTable">
@Html.Partial("_AuditTable", Model)
    </div>

和_AuditTable局部视图是: -

  @model IPagedList<TMS.Models.AuditInfo>
    <div class="row-fluid sortable" >       
    <div class="box span12">
    <div class="box-header well" data-original-title id="auditlist">
    <h2><i class="icon-home"></i> Audit Info </h2>
    <div class="box-icon">
    <a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
    <a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
    <a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
    </div><div class="box-content">
     <div class="pagedList" data-tms-target="#AuditTable">
      @Html.PagedListPager(Model , page => Url.Action("Index",new { page }),
                            PagedListRenderOptions.ClassicPlusFirstAndLast)

                            </div>
        <table class="table table-striped table-bordered bootstrap-datatable datatable">
                              <thead>
                                  <tr>
           <th>
                User Name
            </th>
            <th>
                Audit Action
            </th>
            <th>
                Technology Type
            </th>
            <th>
                Technology
            </th>
            <th>
                Date Time Start
            </th>
            <th>
                Date Time End
            </th>
        </tr>
     </thead>
        <tbody>
              @foreach (var item in Model) {
        <tr>

            <td>
                @item.UserName
            </td>
            <td>
                @(item.AuditAction == null ? "None" : item.AuditAction.Name)
            </td>
            <td>
                @(item.TechnologyType == null ? "None" : item.TechnologyType.Name)
            </td>
            <td>
                @Html.DisplayTextFor(_ => item.Technology.TechnologyID).ToString()
            </td>
            <td>
                @Html.DisplayFor(model=>item.DateTimeStart)
            </td>
             <td>
                @Html.DisplayFor(model=>item.DateTimeStart)
            </td>
        </tr>
    }

    </tbody>
    </table>
    </div></div></div>

但问题是,当我点击一个页面链接时,没有任何事情会发生,虽然链接的href将指向正确的链接,但是如果我点击链接什么都不会加载,而如果我右键单击链接并单击打开它将打开页面。那我怎么能克服这个问题?

最后,行动方法是: -

public ActionResult Index(int page = 1)
        {
             var audit = auditinfoRepository.AllIncluding(auditinfo => auditinfo.Technology,auditinfo2=>auditinfo2.TechnologyType,auditinfo3=>auditinfo3.AuditAction).OrderByDescending(a=>a.DateTimeStart)
                .ToPagedList(page,30);
             if (Request.IsAjaxRequest())
             {
                 ViewBag.FromSearch = true;
                 return PartialView("_AuditTable", audit);
             }
             return View(audit);
        }

1 个答案:

答案 0 :(得分:0)

默认情况下,ASP.NET MVC 3对所有Ajax.*帮助程序使用不显眼的jquery。所以首先要摆脱所有的MicrosoftAjax脚本(这个无用的c ** p),然后改为:

<script src="@Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

然后只需在web.config中激活不显眼的AJAX(如果尚未完成):

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

现在jquery将不引人注意地AJAXify包含那些HTML 5 data-*属性的所有链接。