Question

我正在寻找一种无杂乱的方法，在ASP.net网站上使用JQuery和Ajax对数据进行分页。

我正在努力让它与this类似，但由于javascript出现问题，因此无法正常工作，但我无法找到解决方法。我实际上不喜欢到目前为止的结果，维护这段代码太复杂了，你不觉得吗？

问题：使用JQuery和Ajax for ASP.NET是否有任何无杂乱的方法可以做到这一点？

下面我分享了一些代码：

我在aspx页面代码隐藏中有一个WebMethod，用于为我提供样本数据：

[WebMethod]
public static string GetEmployees(int pageIndex)
{
    JavaScriptSerializer serial = new JavaScriptSerializer();
    StringBuilder sb = new StringBuilder("[");
    serial.Serialize(new { Id = 1, Name = "Fred G. Aandahl" }, sb); sb.Append(",");
    serial.Serialize(new { Id = 2, Name = "Watkins Moorman Abbitt" }, sb); sb.Append(",");
    serial.Serialize(new { Id = 3, Name = "Amos Abbott" }, sb); sb.Append(",");
    serial.Serialize(new { Id = 4, Name = "Jo Abbott" }, sb); sb.Append(",");
    //more lines here...
    sb.Append("]");
    return sb.ToString();
}

这是ASPX页面：

<!-- Handle pagination -->
<script type="text/javascript" src="default.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>Members<br/>
    <div id="Pagination" class="pagination"></div>
    <br style="clear:both;" />

    <div id="container">
        <table id="Searchresult" cellspacing="1" cellpadding="0" border="0">
            <tr>
                <th>Id</th><th>Name</th>
            </tr>
            <tr>
                <td>0</td><td>Sample</td>
            </tr>
        </table>
    </div>
</div>
</form>

<form name="paginationoptions">
    <p><label for="items_per_page">Items</label><input type="text" value="5" name="items_per_page" id="items_per_page" class="numeric"/></p>
    <p><label for="num_display_entries">Total links</label><input type="text" value="10" name="num_display_entries" id="num_display_entries" class="numeric"/></p>
    <p><label for="num">Start /End point</label><input type="text" value="2" name="num_edge_entries" id="num_edge_entries" class="numeric"/></p>
    <p><label for="prev_text">Previous label</label><input type="text" value="Prev" name="prev_text" id="prev_text"/></p>
    <p><label for="next_text">Next label</label><input type="text" value="Next" name="next_text" id="next_text"/></p>
    <input type="button" id="setoptions" value="Aceptar" />
</form>

default.js

// This file demonstrates the different options of the pagination plugin
// It also demonstrates how to use a JavaScript data structure to 
// generate the paginated content and how to display more than one 
// item per page with items_per_page.
var emps;
/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq) {

    //read data for pagination from webmethod GetEmployees

    var data = '{"pageIndex":' + page_index + '}';
    $.ajax({ type: 'Post',
        url: 'Default.aspx/GetEmployees',
        data: data,
        contentType: "application/json;charset=utf-8",
        dataType: 'json',
        success: function(msg) {
            emps = eval(msg.d);

            $.each($('#Searchresult tr:gt(0)'), function(i, n) {
                $('#Searchresult')[0].deleteRow(n.rowIndex);
            });

            // Get number of elements per pagionation page from form
            var items_per_page = $('#items_per_page').val();
            var max_elem = Math.min((page_index + 1) * items_per_page, emps.length);
            var newcontent = '';
            for (var i = page_index * items_per_page; i < max_elem; i++) {

                var emp = emps[i];
                newcontent += '<tr><td>' + emp.Id + '</td><td>' + emp.Name +     '</td></tr>';
            }

            // Replace old content with new content
            $('#Searchresult').html(newcontent);

            //can't make it work
            //var optInit = { callback: pageselectCallback }; // getOptionsFromForm();
            //$("#Pagination").pagination(emps != null ? emps.length : 0, optInit);

        },
        error: function(msg) {
            alert("error:" + msg.statusText);
        }
    });


    // Prevent click eventpropagation
    return true;}



// The form contains fields for many pagiantion optiosn so you can 
// quickly see the resuluts of the different options.
// This function creates an option object for the pagination function.
// This will be be unnecessary in your application where you just set
// the options once.
function getOptionsFromForm() {
    var opt = { callback: pageselectCallback };
    // Collect options from the text fields - the fields are named like their option     counterparts
    $("input:text").each(function() {
        opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) :     this.value;
    });
    // Avoid html injections in this demo
    var htmlspecialchars = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }
    $.each(htmlspecialchars, function(k, v) {
        opt.prev_text = opt.prev_text.replace(k, v);
        opt.next_text = opt.next_text.replace(k, v);
    })
    return opt;
}

// When document has loaded, initialize pagination and form 
$(document).ready(function() {
    // Create pagination element with options from form
    var optInit = getOptionsFromForm();
    $("#Pagination").pagination(emps!=null?emps.length:0, optInit);

    // Event Handler for for button
    $("#setoptions").click(function() {
        var opt = getOptionsFromForm();
        // Re-create pagination content with new parameters
        $("#Pagination").pagination(emps != null ? emps.length : 0, opt);
    });


});

Answer 1

我想分享我的方法。请记住，我不了解ASP.NET，但我认为无论语言是什么，这些步骤都会有效。

首先，我创建了一个不启用JavaScript的页面。分页将是指向当前页面的链接，页面编号在URI段或get参数中传递。这样，在浏览器中未启用JavaScript的情况下，该页面仍可使用。

下一步是为在浏览器中启用了JavaScript的用户添加渐进增强功能。我在控制器和视图中添加一个简单的if来确定请求是正常请求还是AJAX请求。如果是正常请求，请完整地提供页面。如果是AJAX请求，则仅提供页面的一部分，在本例中为表或列表部分。

将分页更改为AJAX的jQuery代码将如下所示：

jQuery(function($){
  $(".pagination").click(function(){
    //determine the URL
    var url = $(this).attr("href");
    $.get(url,
      { nbRandom: Math.random() },
      function(data){
        $("#container").html(data);
      });
  });
});

上面的代码会将<div id="container">的内容替换为AJAX响应（它只包含table部分）。

如果只获取数据，请记住使用GET，如果请求会改变某些内容（添加/编辑，删除，登录等），请使用POST。参数中的nbRandom只是一个黑客，可以防止IE中的缓存。它使用服务器端页面中未使用的参数名称。

这是我在我的应用程序中实现AJAX分页的方法。我希望你能得到这个概念并实现自己的概念。

在哪里可以找到AJAX for ASP.NET的jQuery分页示例？

1 个答案: