MVC分页无法在AJAX表单中工作

时间：2014-05-26 15:01:58

标签： c# asp.net-mvc asp.net-mvc-4 asp.net-ajax paging

我正在尝试使用MVC4.Paging nuget包实现ASP.NET MVC分页。

问题： 它正在进行在线演示以及下载源代码。但是我无法通过 AJAX 找到它在我的特定项目中工作的原因。在我的项目中，它是通过完全回发方法而不是Ajax。

我甚至尝试复制Index操作方法以及Index和_AjaxEmployeeList视图（.cshtml）文件（.js除外）。

注意：在我的解决方案中，它不是自举，如示例中所示。我的控制器名称也是AdminController，而样本中的HomeController

在我的解决方案中，我需要它在样本中使用AJAX方法。

请帮助：
1.如何找到无法正常工作的根本原因？
2.如何使这个工作？

。
我的解决方案代码（我试图在我的解决方案中从样本中重现）：

Index.cshtml 

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
@{
    ViewBag.Title = "MVC 4 Paging With Ajax Bootstrap";
}
<div class="row-fluid">
    <div class="span6">
        <h2>
            Ajax Paging With Bootstrap In MVC 4
        </h2>
    </div>
    <div class="span6">
        <div class="alert alert-info">
            The pager also supports area's. @Html.ActionLink("Ajax paging in an area", "Index", "Admin", new { Area = "AreaOne" }, new { @class = "btn btn-success" })</div>
    </div>
</div>
<div class="clearfix">
</div>
@using (Ajax.BeginForm("Index", "Admin",
                            new AjaxOptions { UpdateTargetId = "grid-list", HttpMethod = "get", LoadingElementId = "loading", OnBegin = "beginPaging", OnSuccess = "successPaging", OnFailure = "failurePaging" },
                            new { id = "frm-search" }))
{
    <div class="input-append">
        <input class="span2" id="appendedInputButton" type="text" name="employee_name" placeholder="Name" />
        <button class="btn" type="submit">
            <i class="icon-search"></i>&nbsp;Search</button>
    </div>
    <div id="grid-list">
        @{ Html.RenderPartial("_AjaxEmployeeList", Model); }
    </div>
}
<script type="text/javascript">

    function beginPaging(args) {
        // Animate
        $('#grid-list').fadeOut('normal');
    }

    function successPaging() {
        // Animate
        $('#grid-list').fadeIn('normal');
        $('a').tooltip();
    }

    function failurePaging() {
        alert("Could not retrieve list.");
    }

</script>

_AjaxEmployeeList.cshtml 

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>
                ID
            </th>
            <th>
                Name
            </th>
            <th>
                Email
            </th>
            <th>
                Phone
            </th>
            <th>
                City
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        { 
            <tr>
                <td>
                    @item.ID
                </td>
                <td>
                    @item.Name
                </td>
                <td>
                    @item.Email
                </td>
                <td>
                    @item.Phone
                </td>
                <td>
                    @item.City
                </td>
            </tr>
        }
    </tbody>
</table>
<div class="pager1">
    @Html.Raw(Ajax.Pager(
            new Options
            {
                PageSize = Model.PageSize,
                TotalItemCount = Model.TotalItemCount,
                CurrentPage = Model.PageNumber,
                ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous", Page = "P" },
                ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
                TooltipTitles = new TooltipTitles() { Next = "Next page", Previous = "Previous page", Page = "Page {0}." },
                Size = Size.normal,
                Alignment = Alignment.centered,
                IsShowControls = true,
                IsShowFirstLast = true,
                CssClass = ""
            },
            new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, new { controller = "Admin", action = "Index", employee_name = ViewData["employee_name"] }))
    <div class="well">
        Showing <span class="badge badge-success">@Model.ItemStart</span> to <span class="badge badge-success">@Model.ItemEnd</span>
        of <span class="badge badge-info">@Model.TotalItemCount</span> entries</div>
</div>

AdminController.cs 

public class AdminController : Controller
{
    private const int defaultPageSize = 3;
    private IList<Employee> allEmployee = new List<Employee>();
    private string[] name = new string[4] { "Will", "Johnny", "Zia", "Bhaumik" };
    private string[] phone = new string[4] { "1-274-748-2630", "1-762-805-1019", "1-920-437-3485", "1-562-653-8258" };
    private string[] email = new string[4] { "donec@congueelitsed.org", "neque.non@Praesent.co.uk", "et.magna@Pellentesque.ca", "enim.commodo@orci.net" };
    private string[] city = new string[4] { "Wigtown", "Malderen", "Las Vegas", "Talence" };


    public AdminController()
    {
        InitializeEmployee();
    }

    private void InitializeEmployee()
    {
        // Create a list of 200 employee.
        int index = 0;

        for (int i = 0; i < 200; i++)
        {
            var employee = new Employee();
            //int categoryIndex = i % new Random().Next(1, 5);
            //if (categoryIndex > 3)
            //    categoryIndex = 3;
            index = index > 3 ? 0 : index;
            employee.ID = i + 1;
            employee.Name = name[index];
            employee.Phone = phone[index];
            employee.Email = email[index];
            employee.City = city[index];
            allEmployee.Add(employee);
            index++;
        }
    }

    public ActionResult Index(string employee_name, int? page)
    {
        ViewData["employee_name"] = employee_name;
        int currentPageIndex = page.HasValue ? page.Value : 1;
        IList<Employee> employees = this.allEmployee;

        if (string.IsNullOrWhiteSpace(employee_name))
        {
            employees = employees.ToPagedList(currentPageIndex, defaultPageSize);
        }
        else
        {
            employees = employees.Where(p => p.Name.ToLower() == employee_name.ToLower()).ToPagedList(currentPageIndex, defaultPageSize);
        }



        //var list = 
        if (Request.IsAjaxRequest())
            return PartialView("_AjaxEmployeeList", employees);
        else
            return View(employees);
    }

    public ActionResult Paging(string employee_name, int? page)
    {
        ViewData["employee_name"] = employee_name;
        int currentPageIndex = page.HasValue ? page.Value : 1;
        IList<Employee> employees = this.allEmployee;

        if (string.IsNullOrWhiteSpace(employee_name))
        {
            employees = employees.ToPagedList(currentPageIndex, defaultPageSize);
        }
        else
        {
            employees = employees.Where(p => p.Name.ToLower() == employee_name.ToLower()).ToPagedList(currentPageIndex, defaultPageSize);
        }

        return View(employees);
    }
}

_Layout.cshtml中的JS引用

enter image description here

2 个答案:

答案 0 :(得分：0)

你还没有描述它究竟是如何起作用的。但我会猜测可能导致你的问题的最常见问题

  1. 确保您确实引用了正确的java脚本文件。它不足以将它们放在文件夹中，您的页面必须链接到它们。

    2. 请参阅以下链接，了解如何在您的网页上引用脚本。 http://www.w3schools.com/tags/att_script_src.asp

    确保你输入正确的路径。

    确保引用ajax的* ajax.js文件以及任何其他所需文件。

答案 1 :(得分：0)

最后我找到了解决方案。

由于我使用jquery-1.11.1.js，因此在脚本文件jquery.unobtrusive-ajax.js中，我必须使用.live()替换.on()的来电。

但简单的查找和替换不是我后来发现的正确方法。我从其他来源发现，我必须完全改变那些代码行，因为.on()可以工作。

我替换了以下代码：

具有.live()功能的非工作代码：

$("a[data-ajax=true]").live("click", function (evt) {
    debugger;
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

$("form[data-ajax=true] input[type=image]").live("click", function (evt) {
    debugger;
    var name = evt.target.name,
        $target = $(evt.target),
        form = $target.parents("form")[0],
        offset = $target.offset();

    $(form).data(data_click, [
        { name: name + ".x", value: Math.round(evt.pageX - offset.left) },
        { name: name + ".y", value: Math.round(evt.pageY - offset.top) }
    ]);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$("form[data-ajax=true] :submit").live("click", function (evt) {
    debugger;
    var name = evt.target.name,
        form = $(evt.target).parents("form")[0];

    $(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$("form[data-ajax=true]").live("submit", function (evt) {
    debugger;
    var clickInfo = $(this).data(data_click) || [];
    evt.preventDefault();
    if (!validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

使用.on()函数运行代码：

$(document).on("click", "a[data-ajax=true]", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

$(document).on("click", "form[data-ajax=true] input[type=image]", function (evt) {
    var name = evt.target.name,
        $target = $(evt.target),
        form = $target.parents("form")[0],
        offset = $target.offset();

    $(form).data(data_click, [
        { name: name + ".x", value: Math.round(evt.pageX - offset.left) },
        { name: name + ".y", value: Math.round(evt.pageY - offset.top) }
    ]);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$(document).on("click", "form[data-ajax=true] :submit", function (evt) {
    var name = evt.target.name,
        form = $(evt.target).parents("form")[0];

    $(form).data(data_click, name ? [{ name: name, value: evt.target.value }] : []);

    setTimeout(function () {
        $(form).removeData(data_click);
    }, 0);
});

$(document).on("submit", "form[data-ajax=true]", function (evt) {
    var clickInfo = $(this).data(data_click) || [];
    evt.preventDefault();
    if (!validate(this)) {
        return;
    }
    asyncRequest(this, {
        url: this.action,
        type: this.method || "GET",
        data: clickInfo.concat($(this).serializeArray())
    });
});

感谢。

相关问题
最新问题