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为每个员工创建新行。正如我之前所说，索引的顺序很重要，必须保持一致。

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

$('.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（）绑定，这将确保您通过第一个函数添加的行将具有工作删除链接。

Answer 2

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

ASP.NET MVC中的“内联”CRUD

2 个答案: