ASP.NET MVC jQuery Ajax
我想创建一个像 gmail 一样的网格,用户可以通过 jQuery 和 ajax 通过操作(例如在 gmail 中分配标签)删除或更新。
我已经实现了 ajax 调用,因此将数据设置为数据库中的正确值,但是无需刷新页面即可更新网格/行的最佳实践是什么?
I want to create a grid like gmail's where the user can delete or update via actions (eg assigning label in gmail) via jQuery and ajax.
I have implemented the ajax calls so its sets the data to correct values in DB, but what is the best practice for updating the grid/row without having to refresh the page?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
最简单的选择是将网格放入部分视图中,然后每 30 秒(左右)发送一个 AJAX 请求,将部分视图的 HTML 转储到 DOM 中。
将更改列表下载为 JSON,然后使用 Javascript 更新 DOM 会更有效。
要下载更改列表,您需要跟踪服务器上的当前状态。
根据您的数据,这可能不切实际。
The simplest option is to put the grid into a partial view, then send an AJAX request every 30 seconds (or so) that dumps the partial view's HTML into the DOM.
It would be more efficient to download a list of changes as JSON, then update the DOM using Javascript.
To download a list of changes, you'll need to keep track of the current state on the server.
Depending on your data, that might not be practical.
有几种方法可以做到这一点,我个人喜欢 MVVM 模式 来实现这样的事情。有一个很棒的库,名为 knockoutjs,它允许绑定到 javascript 对象模型。下面是一个可编辑网格的示例,可帮助您入门。我认为这是使用网络最灵活的方式,因为它可以分离您的关注点。此时 HTML/Javascript 只负责您的 UI,而 ASP.NET MVC 负责您的业务逻辑并向下发送 ViewModel。
您还可以使用 jQuery 插件解决方案,例如 jqGrid,您仍然需要编写所有 CRUD 函数的代码实际管理数据,但网格将自动允许排序(通过一些配置)和其他选项。这也将处理您的 CSS 格式,因为它使用 jQuery UI 进行样式设置。
There are several ways of doing this, personally I like the MVVM pattern for things like this. There is a great library called knockoutjs which allows for binding to a javascript object model. Here is an example of an editable grid to get you started. This in my opinion is the most flexible way of working with the web as it separates your concerns. HTML/Javascript at this point becomes resposible for your UI only while the ASP.NET MVC takes care of your business logic and sends down the ViewModel.
You could also use a jQuery plugin solution such as jqGrid, you will still need to code all your CRUD functions to actually manager the data, but the gird will auto allow for sorting (with some configuration) and other options. This will also handle your CSS formatting as it users the jQuery UI for styling.