当前位置：文江博客话题详情

ASP.NET MVC 2 - 控制建议

发布于 2024-11-02 14:08:43 字数 345 浏览 0 评论 0原文

我是 ASP.NET MVC 2 的新手，我需要一些关于在这种情况下使用的最佳“控件”的建议。（我知道 ASP.NET MVC 并不真正使用服务器控件，但有许多附加组件，例如 MVC 控件工具包）。

这就是我需要做的。我在数据库中有一个表，其中包含测试列表。我需要能够在视图中显示这些，并允许用户以某种方式选择它们（通过复选框或其他方式）。

然后我需要能够确定选择哪些项目。

有人可以告诉我实现这一目标的最佳方法吗？

任何帮助/评论表示赞赏。

TIA。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安人多梦 2024-11-09 14:08:44

如果您使用客户端功能来完成此操作，它将主要由两部分组成：

可视化 HTML
功能性 Javascript

我会如何做

我会创建一个显示表格的部分视图。如果您需要重用它，请将部分放在 Views/Shared 文件夹中
表的每个 TR 都将具有该特定对象中显示的对象的序列化 JSON排。序列化可以通过编写自定义对象扩展方法来完成，因此您可以随后在任何对象上调用 ToJson()
```
;
     选择 ...
    ...
    ...
```
注意包含您需要提供的操作的额外列。
还添加一个可提供客户端功能的 Javascript（重要：此脚本使用 jQuery）
<前><代码>$(函数(){
变量选择 = {};
$(".actions a.action-select").click(function(evt){
evt.preventDefault();
var 上下文 = $(this);
var rowObj = $.parseJSON(context.closest("tr[data]").toggleClass("selected").attr("data"));
if (选择[rowObj.Id])
{
// 取消选择
删除选择[rowObj.Id]；
}
别的
{
// 选择
选择[rowObj.Id] = rowObj;
}
});

这样您的行将具有额外的 selected 类当它们被选择时，您的 selection 对象将始终具有选定的行（或者更好地说是它们的对象），您可以随意使用。

附加说明

为什么我将 selection 设置为对象而不是数组？因为 Javascript 对象是一种关联数组，所以搜索特定元素比枚举其元素要快，因为它是普通数组。这样我可以立即查看行是否被选择，也可以直接从中删除元素。

结果

这样您将拥有一个可重用的表格，您可以将其放在各个页面上（因此与用户控件相似）。但是，如果您需要将其中几个表添加到页面中，则必须对它们进行一些调整，以便客户端功能不会混合不同表之间的数据。

If you do it with client side functionality, it will end up consisting mainly of two parts:

The visual HTML
The functional Javascript

How would I'd do it

I'd create a partial view that displays the table. If you need to reuse this, put the partial in Views/Shared folder
Each TR of the table would have serialized JSON of the object that is displayed in that particular row. Serialization can be done by writing a custom object extension method, so you can call ToJson() on any object afterwards
```
<tr data='<%= this.Model[0].ToJson()'>
    <td class="actions"> <a href="#" class="action-select">Select</a> ... </td>
    <td>...</td>
    ...
</tr>
```
Mind the extra column with actions that you need to provide.

also add a Javascript that would provide the client side functionality (important: this script uses jQuery)

$(function(){
    var selection = {};
    $(".actions a.action-select").click(function(evt){
        evt.preventDefault();
        var context = $(this);
        var rowObj = $.parseJSON(context.closest("tr[data]").toggleClass("selected").attr("data"));

        if (selection[rowObj.Id])
        {
            // deselect
            delete selection[rowObj.Id];
        }
        else
        {
            // select
            selection[rowObj.Id] = rowObj;
        }
});

This way your rows will have additional selected class when they're selected and your selection object will always have selected rows (or better said their objects) taht you can use however you please.

Additional note

Why did I set selection to be an object rather than an array? Because Javascript objects are kind of associative arrays so searching for a particular element is faster than enumerating over its elements it it was a normal array. This way I can immediately see whether row is selected or not and also remove an element from it directly.

Outcome

This way you'll have a reusable table that you can put on various pages (hence similarities with user controls). but in case you'd need to add several of these tables to your pages you'd have to tweak them a little so that client-side functionality won't mix data between different tables.

回复收藏 0 原文

~没有更多了~