首页 \ 问答 \ MVC4 WebGrid和Ajax分页(MVC4 WebGrid and Ajax Pagination)

MVC4 WebGrid和Ajax分页(MVC4 WebGrid and Ajax Pagination)

我在MVC4中使用WebGrid有一个简单的问题(可能不是一个简单的答案!)。

我有一个像这样的功能网格

<div id="Submitted">
    @Html.Grid(
        Model.Submitted, displayHeader: false, fieldNamePrefix: "Submitted_", ajaxUpdateContainerId: "Submitted",
        columns: new WebGridColumn[]{
        new WebGridColumn(){ ColumnName = "Date",Header = "Date",Style = "",CanSort = false,Format = x => x.Date.ToString(Globals.Default.DATEFORMAT) },
        new WebGridColumn(){ ColumnName = "ID",Header = "Review",Style = "", CanSort = false, Format = x=>@Html.ActionLink("Review","Review","Company",new{ID = x.ID },new{})  }
    })
</div>

当单击下一页按钮时使用Ajax重新加载“已提交”div时,它会生成下一页正常 - 但它将转到控制器上的原始操作,该操作应该是整页。

它如何过滤除网格本身以外的所有内容? 用一些聪明的C#代码或jQuery?

编辑:澄清一下,我不是问如何更好地进行分页,或者我自己,只要我担心webgrid的默认分页工作正常应该 - 我问的是WebGrid如何做它是ajax回发到返回FULL页面的操作时的分页。


I have a simple question (may not be a simple answer!) with the WebGrid in MVC4.

I have a functional Grid like so

<div id="Submitted">
    @Html.Grid(
        Model.Submitted, displayHeader: false, fieldNamePrefix: "Submitted_", ajaxUpdateContainerId: "Submitted",
        columns: new WebGridColumn[]{
        new WebGridColumn(){ ColumnName = "Date",Header = "Date",Style = "",CanSort = false,Format = x => x.Date.ToString(Globals.Default.DATEFORMAT) },
        new WebGridColumn(){ ColumnName = "ID",Header = "Review",Style = "", CanSort = false, Format = x=>@Html.ActionLink("Review","Review","Company",new{ID = x.ID },new{})  }
    })
</div>

When reloading the "Submitted" div with Ajax when the next page button is clicked, it generates the next page fine - but it's going to the original action on the controller, which should be a full page.

How does it filter out everything other than the grid itself? with some clever C# code or jQuery?

EDIT: To clarify, I'm not asking how to do the paging better, or myself, as far as I'm concerned the default paging with the webgrid is working perfectly as it should - I'm asking how the WebGrid does it's ajax paging when posting back to an action which is returning a FULL page.


原文:https://stackoverflow.com/questions/14514686
更新时间:2023-07-21 15:07

最满意答案

问题编辑后

这是一个基于JSFiddle的更新的JSFiddle,其中包括如何使用您的特定用例实现搜索:

的jsfiddle


原答案:

您在问题中遗漏了一些相关信息,例如“ 来自user-chat-list.php的HTML看起来是什么样的 ?” 因此,很难准确理解代码的应用方式。

尽管如此,这里有一个简单的例子,说明你提供的内容,你可以修改它来做你想要的。 您可以运行以下代码段以查看工作示例:

var $searchBox = $('#search-weeazer');
var $userDivs = $('.chat-users div');

$searchBox.on('input', function() {
  var scope = this;
  if (!scope.value || scope.value == '') {
    $userDivs.show();
    return;
  }

  $userDivs.each(function(i, div) {
    var $div = $(div);
    $div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search:
<input id="search-weeazer">

<p>Users:</p>
<div class="chat-users">
  <div>Tony</div>
  <div>Amber</div>
  <div>Ronald</div>
</div>


After Question Edit

Here is an updated JSFiddle based on the JSFiddle you included showing how to implement the search with your particular use-case:

JSFiddle


Original Answer:

You're missing some pertinent information in your question, such as "what does the HTML look like that comes from user-chat-list.php?" And because of that it makes it hard to understand exactly how your code applies.

Nevertheless, here is a simple example upon what you have provided that you can modify that does what you are looking for. You can run the following code snippet to see a working example:

var $searchBox = $('#search-weeazer');
var $userDivs = $('.chat-users div');

$searchBox.on('input', function() {
  var scope = this;
  if (!scope.value || scope.value == '') {
    $userDivs.show();
    return;
  }

  $userDivs.each(function(i, div) {
    var $div = $(div);
    $div.toggle($div.text().toLowerCase().indexOf(scope.value.toLowerCase()) > -1);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search:
<input id="search-weeazer">

<p>Users:</p>
<div class="chat-users">
  <div>Tony</div>
  <div>Amber</div>
  <div>Ronald</div>
</div>

相关问答

更多
  • 您可以通过获取元素列表然后迭代它来获取文本或断言文本来完成此操作。 List divs= driver.findElements(By.xpath("//div[@id='dvEditPriceMessagePopupContainer']/div")) List l1 = new ArrayList(); for(WebElement e : divs){ l1.add(e.getText()); } You can do this by gett ...
  • 添加float:left到这些类.explained_c-1, .explained_c-2, .explained_c-3 Add float:left to these classes .explained_c-1, .explained_c-2, .explained_c-3
  • 你去吧 使用includes符合您需求的方法。 function myFunction() { var input = document.getElementById("Search"); var filter = input.value.toLowerCase(); var nodes = document.getElementsByClassName('target'); for (i = 0; i < nodes.length; i++) { if (nodes[ ...
  • 问题编辑后 这是一个基于JSFiddle的更新的JSFiddle,其中包括如何使用您的特定用例实现搜索: 的jsfiddle 原答案: 您在问题中遗漏了一些相关信息,例如“ 来自user-chat-list.php的HTML看起来是什么样的 ?” 因此,很难准确理解代码的应用方式。 尽管如此,这里有一个简单的例子,说明你提供的内容,你可以修改它来做你想要的。 您可以运行以下代码段以查看工作示例: var $searchBox = $('#search-weeazer'); var $userDivs = ...
  • 您可以将搜索框完全放在#header中 #container { margin:0px auto; width:984px; border-left:#FFFFFF solid 1px; border-right:#FFFFFF solid 1px; } #header { height:150px; background: url(./images/header.png) no-repeat; border-bottom:#FFFFFF solid 1px; position:relative; // ...
  • 你可以使用:contains() $( "#calendar_month div:contains('DEMO')" ) 或者在你编辑你的OP之后: $( "#Calendar > div > div:contains('DEMO')" ).text("");
    ...
  • 你可以使用jQuery来完成它,如下所示: HTML:
    soccer
    dancing
    soap
    jQuery的: $('#search').on('input', function(){ var text = $(this).val(); $('.subjects div' ...
  • 我建议使用jquery轻松地按类名获取元素,并标识具有搜索值的元素。 就像是: var searchValue = "bear"; $(".ClassName").each(function(){ if($(this).html().indexOf(searchValue) > -1){ //match has been made } }); 如果你仅限于香草JavaScript,这里是一个例子: var els = document.getElementsByClassName("C ...
  • Try to span some text on this page

    span is a paragraph.

    This 123is a paragraph.1

    This is some span in a div element.
    我已经 ...
  • 你有不完整的CSS,以及你的CSS和HTML中的几个错误。 我整理了一个JSFiddle供您查看并用作指导,以纠正您的问题并实现您的需求。 我的解决方案将照顾你的内部div的中心,以及使内部div display: table; 和h1 display: table-cell 。 这样做的原因是因为您不仅希望将div文本居中在页面上,而且还希望将文本在div( h1 )中水平和垂直居中。 将文本垂直居中放在其父容器中的唯一方法是使用display: table-cell; 与vertical-align: ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)