ASP.NET MVC中的“内联”CRUD

假设我有一个公司表，它与雇员表有很多关系。ASP.NET MVC中的“内联”CRUD

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

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

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

这将是一个实际的方法来做到这一点？我猜我应该使用jQuery，但我几乎不知道如何使用它。

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

来源

2010-07-22 Rei Miyasaka

你说你不想为每个员工“打开一个CRUD”页面，但是你没有指定你打算如何处理你想操作的Employee数据。你如何预测你的应用与员工模型进行交互？ – nerraga 2010-07-22 02:02:15

啊，是的，我以后也会有一个控制器。 – 2010-07-22 21:45:27

最简单的方法就是使用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; 
});

要使用这些点击处理程序必须与类名定义链接/按钮“添加员工”，然后另外一个链接/按钮旁边的每个员工记录（在作为该领域的同一个容器员工）称为“移除员工”。注意在remove-employee处理程序上使用live（）绑定，这将确保通过第一个函数添加的行将有效删除链接。

来源

2010-07-22 02:11:10

完美...感谢代码和非常详细的解释！ – 2010-07-22 21:44:42

小记... $（'remove-employee'）应该是$（'。remove-employee'） – 2010-07-23 17:30:16

感谢您的支持！ – 2010-08-22 01:42:48

，想到的第一件事是建立一个控制器对员工模型来处理CRUD操作，而是返回一个viewresult，返回一个jsonresult或者xmlresult（mvccontrib）。这有效地将你的控制器变成一个Web服务，允许你使用silverlight或jquery来实现ui（比如jqueryui）和/或服务交互（jquery/ajax）。

来源

2010-07-22 02:02:16 nerraga

ASP.NET MVC中的“内联”CRUD

回答

相关问题