ASP.NET MVC 中的“内联”CRUD答案

【问题标题】："Inline" CRUD in ASP.NET MVCASP.NET MVC 中的“内联”CRUD
【发布时间】：2010-07-22 01:44:59
【问题描述】：

假设我有一个 Companies 表，它与Employees 表有多对多的关系。

我有一个添加/编辑公司页面，但我也希望能够查找/添加新/现有员工，而不必先为每个员工打开另一个 CRUD 页面。

我将为每个员工输入一个英文名和一个日文名，因此博客软件用于编辑标签的常用技巧不会太好。

因为是内部使用，所以不需要太漂亮。

执行此操作的实用方法是什么？我猜我应该使用 jQuery，但我几乎不知道如何使用它。

我熟悉 WPF/Silverlight，但是...你知道 :)

【问题讨论】：

您说您不想为每个员工“打开一个 CRUD”页面，但您还没有指定您打算如何处理要操作的员工数据。您如何预见您的应用与员工模型交互？
啊，是的，我稍后也会有一个控制器。

标签： jquery asp.net asp.net-mvc crud

【解决方案1】：

执行此类操作的最简单方法是使用 ASP.NET MVC 支持将模型绑定到可枚举集合。本质上，当您为公司创建员工时，他们将被附加到使用特定字段命名结构的列表中，MVC 的模型绑定器可以使用该结构返回项目列表（员工）。

public class Company
{
    public string Name { get; set; }
    public IEnumerable<Employee> Employees { get; set; }
}

public class Employee
{
    public string EnglishName { get; set; }
    public string JapaneseName { get; set; }
}

Company Name: <input type="text" name="Name" />

<!-- Employee 1 -->
English Name: <input type="text" name="Employees[0].EnglishName" />
Japanese Name: <input type="text" name="Employees[0].JapaneseName" />

<!-- Employee 2 -->
English Name: <input type="text" name="Employees[1].EnglishName" /> 
Japanese Name: <input type="text" name="Employees[1].JapaneseName" />

<!-- Employee 2 -->
English Name: <input type="text" name="Employees[2].EnglishName" /> 
Japanese Name: <input type="text" name="Employees[2].JapaneseName" />

在上面的示例中，您会注意到对于每个员工字段，字段名称上都有一个序号索引器，这就是告诉 ASP.NET MVC 您正在绑定到一个列表并且每个 Employee[n] 是一个单独的要模型绑定的对象。保持这些索引的顺序很重要，因为如果您错过了索引，您的列表将无法正确绑定。

如果这一切都正确完成，那么您可以定义一个操作来处理接收公司对象作为参数的表单。 MVC 会自动为您处理剩下的事情。

上面的例子当然假设员工数量是静态的，但很可能永远不会出现这种情况，所以为了更灵活，我们可以使用 jQuery 为每个员工创建新行，就像你定义它们一样。正如我之前所说，索引的顺序很重要，必须保持一致。

以下添加和删除点击处理程序将确保在您创建新员工或从列表中删除现有员工时，您的字段名称将保持有序。我从我编写的其他一些代码中删除了它，并为您的目的对其进行了一些修改。我相当肯定它会成功。

$('.add-employee').click(function() {
    var nextIndex = 0;
    var lastRow = $(this).siblings('.row:last');
    if (lastRow.length > 0) {
        var lastRegion = lastRow.find('input:last');
        if (lastRegion.length > 0 && /\[(\d+)\]/.test(lastRegion.attr('name')) !== null) {
            var key = lastRegion.parent().find('.key:text');
            if (key.val() === '') {
                key.focus();
                return;
            }
            nextIndex = parseInt(/\[(\d+)\]/.exec(lastRegion.attr('name'))[1], 10) + 1;
        }
    }

    var namePrefix = 'Employees[' + nextIndex + ']';
    var newItem = '<div class="row">\n'
                    + 'English Name: <input type="text" name="' + namePrefix + '.EnglishName" /><br />\n'
                    + 'Japanese Name: <input type="text" name="' + namePrefix + '.JapaneseName" />&nbsp;\n'
                    +  '<a href="#" class="remove-employee">Remove</a>\n'
                    + '</div>';
    $(this).before(newItem);
});

$('.remove-employee').live('click', function() {
    var parent = $(this).parent();
    parent.slideUp();
    parent.nextAll('div').children(':text').each(function(index, element) {
        element = $(element);
        if (/\[(\d+)\]/.test(element.attr('name')) !== null) {
            element.attr('name', element.attr('name').replace(/\[(\d+)\]/, '[' + (parseInt(/\[(\d+)\]/.exec(element.attr('name'))[1], 10) - 1) + ']'));
        }
    });
    parent.remove();
    return false;
});

要使用这些点击处理程序，您必须定义一个类名为“add-employee”的链接/按钮，然后在每个员工记录旁边（与该员工的字段位于同一容器中）旁边定义一个名为“删除员工'。请注意在 remove-employee 处理程序上使用 live() 绑定，这将确保您通过第一个函数添加的行将具有有效的删除链接。

【讨论】：

完美...感谢代码和非常详细的解释！
小记... $('remove-employee') 应该是 $('.remove-employee')

【解决方案2】：

首先想到的是构建一个控制器来处理员工模型上的 crud 操作，但不是返回视图结果，而是返回一个 jsonresult 或 xmlresult (mvccontrib)。这有效地将您的控制器变成了一个 Web 服务，允许您利用 silverlight 或 jquery 进行 ui（比如 jqueryui）和/或服务交互（jquery/ajax）。

【讨论】：