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
最满意答案
问题编辑后
这是一个基于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:
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>
相关问答
更多-
如何获取div中的所有文本(How to get all text inside div)[2021-11-18]
您可以通过获取元素列表然后迭代它来获取文本或断言文本来完成此操作。 Listdivs= 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
-
在
中搜索文本(Searchfor text)[2022-02-14]你去吧 使用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[ ...在div中搜索文本(Search for Text inside div)[2023-05-01]
问题编辑后 这是一个基于JSFiddle的更新的JSFiddle,其中包括如何使用您的特定用例实现搜索: 的jsfiddle 原答案: 您在问题中遗漏了一些相关信息,例如“ 来自user-chat-list.php的HTML看起来是什么样的 ?” 因此,很难准确理解代码的应用方式。 尽管如此,这里有一个简单的例子,说明你提供的内容,你可以修改它来做你想要的。 您可以运行以下代码段以查看工作示例: var $searchBox = $('#search-weeazer'); var $userDivs = ...标题div中的搜索div?(A search div inside header div?)[2023-09-10]
您可以将搜索框完全放在#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; // ...用文本在div中查找div(Find div inside div with text)[2021-12-17]
你可以使用:contains() $( "#calendar_month div:contains('DEMO')" ) 或者在你编辑你的OP之后: $( "#Calendar > div > div:contains('DEMO')" ).text("");...你可以使用jQuery来完成它,如下所示: HTML:soccerdancingsoap我建议使用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.在文本中划分div(Div with Text, inside a div)[2023-06-19]
你有不完整的CSS,以及你的CSS和HTML中的几个错误。 我整理了一个JSFiddle供您查看并用作指导,以纠正您的问题并实现您的需求。 我的解决方案将照顾你的内部div的中心,以及使内部div display: table; 和h1 display: table-cell 。 这样做的原因是因为您不仅希望将div文本居中在页面上,而且还希望将文本在div( h1 )中水平和垂直居中。 将文本垂直居中放在其父容器中的唯一方法是使用display: table-cell; 与vertical-align: ...相关文章
更多- AJAX问题
- ASP.NET MVC4 微信公众平台开发测试一: 验证
- ajax数据安全的问题
- Spring MVC 3 深入总结
- 利用Linq + Ajax 异步分页实现单个删除,批
- 《Java开放课程: JSP项目实战》(JSP AJAX Jquery ERStudio Junit MVC)共28集纯项目更新完毕
- ajax验证用户注册
- ajax请求问题,到底哪里错了
- 怎么写ajax异步提交?
- AJAX JSON 乱码
最新问答
更多- 您如何使用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)