Ajax Paging不能在我的asp.net mvc web應用程序中工作

Question

我已經在我的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將指向正確的鏈接，但是如果我點擊鏈接，鏈接將不會加載，而如果我右鍵單擊鏈接並單擊打開它將會打開日e頁。所以我怎麼能克服這個問題呢？

最後的操作方法是： -

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); 
     } 

Answer 1

默認情況下，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> 

，然後只需激活不顯眼的AJAX在你的web.config（如果尚未完成）：

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

現在jquery會不顯眼地AJAXify所有包含這些HTML 5 data-*屬性的鏈接。