ASP.NET MVC中的"内联"CRUD

Question

假设我有一个公司表,它与Employees表有很多关系.

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

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

它不需要太漂亮,因为它是供内部使用的.

这样做有什么实际可行的方法？我猜我应该使用jQuery,但我几乎不知道如何使用它.

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

Answer 1

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

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" />

在上面的示例中,您将注意到对于每个employee字段,在fieldname上有一个序数索引器,这是告诉ASP.NET MVC您绑定到列表并且每个Employee [n]是一个单个对象的内容.模型的约束.保持这些索引顺序非常重要,因为如果您错过了索引,列表将无法正确绑定.

如果这一切都正确完成,您可以定义一个操作来处​​理接收Company对象作为参数的表单.MVC将自动为您完成剩下的工作.

上面的示例当然假定了静态的员工数量,这可能永远不会出现这种情况,因此为了使其更加灵活,我们可以使用jQuery为每个员工创建新行.正如我之前所说,索引的顺序很重要,必须保持一致.

以下添加和删除单击处理程序将确保您在创建新Employee或从列表中删除现有Employee时,您的字段名称将保持顺序.我从我编写的其他一些代码中删除了它,并根据您的目的对其进行了一些修改.我相当肯定会做到这一点.

$('.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" ".请注意在remove-employee处理程序上使用live()绑定,这将确保您通过第一个函数添加的行将具有工作删除链接.