＆QUOT;内联＆QUOT; CRUD在ASP.NET MVC [英] "Inline" CRUD in ASP.NET MVC
问题描述
说我有有与雇员表的多对多关系的公司表。
Say I have a Companies table which has a many-many relationship with an Employees table.
我有一个添加/编辑网页的公司，但我也希望能够找到/新增/现有职工为好，而无需打开另一个页面CRUD为每个员工第一。
I have an add/edit Companies page, but I also want to be able to find/add new/existing Employees as well, without having to open up another CRUD page for each Employee first.
我会输入一个英文名字和一个日本名字为每一位员工，让博客软件使用编辑标记也不会太好惯用的伎俩。
I'll be inputting an English name and a Japanese name for each Employee, so the usual trick that blog software uses for editing tags won't be too good.
因为它是内部使用它并不需要太pretty。
It doesn't need to be too pretty since it's for internal use.
什么是做到这一点的实用方法？我猜我应该使用jQuery，但我几乎不知道如何使用它。
What would be a practical way to do this? I'm guessing I should use jQuery, but I hardly know how to use it.
我熟悉WPF / Silverlight的，但你知道...：）
I'm familiar with WPF/Silverlight, but... y'know :)
推荐答案
做这样的事情是用于对一个枚举集合结合的典范ASP.NET MVC的支持最简单的方法。从本质上讲，当你为公司创造的员工，他们将使用一个特定的字段命名结构MVC的模型绑定器可用于返回项目（员工）的列表添加到列表中。
The easiest way to do something like this is to use ASP.NET MVC's support for binding a model against an enumerable collection. Essentially, as you create employees for the company they would be appended to a list using a specific field-naming structure that MVC's modelbinder can use to return a list of items (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" />
在上面的例子中，你会发现，每个员工的领域上有字段名序号索引，这就是告诉ASP.NET MVC，你绑定到一个列表，每个员工[n]是一个单一的对象是模型绑定。它保留这些指标序数，因为如果你错过了一个索引列表将无法正确绑定是非常重要的。
In the example above you'll notice that for each employee field there is an ordinal indexer on the fieldname, this is what tells ASP.NET MVC that you are binding to a list and that each Employee[n] is a single object to be model-bound. It's important to keep these indexes ordinal because if you miss an index your list will not bound correctly.
如果这一切做得正确，你就可以定义操作来处理接收一个公司对象作为参数的形式。 MVC将自动完成剩下的给你。
If this is all done correctly, you can then define an action to handle the form which receives a Company object as a parameter. MVC will automatically take care of the rest for you.
当然上面的例子假设的雇员的静态数量，这将有可能永远不会是这种情况，因此，为了使之更柔软，我们可以使用jQuery为每个员工创建新行，你定义它们。正如我之前所说的，索引的顺序是非常重要的，并且必须保持一致。
The above example of course assumes a static number of employees, which will likely never be the case, so in order to make it more flexible we can use jQuery to create new rows for each employee as you define them. As I said before, the order of the indexing is important and must remain consistent.
下面的添加和删除点击处理程序将确保任何时候你创建一个新的员工，或从列表中删除现有的，你的字段的名称将保持有序。我撕开了这一点，其他一些code我写的，并修改了它一点点你的目的。我敢肯定它会做的伎俩。
The following Add and Remove click handlers will ensure that any time you create a new Employee or delete an existing one from the list, the names of your fields will remain ordinal. I ripped this out of some other code I wrote and modified it a little for your purposes. I'm fairly certain it will do the trick.
$('.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" /> \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;
});
要使用这些点击的处理程序，您必须定义一个类名称的链接/按钮添加员工，然后另外一个链接/按钮旁边的每个员工记录（在作为该员工的字段相同的容器）被称为除去员工。注意使用活（）在删除员工处理程序绑定，这将确保你通过第一函数添加的行会有工作删除链接。
To use these click handlers you must define a link/button with the class name 'add-employee' and then an additional link/button next to each employee record (in the same container as the fields for that employee) called 'remove-employee'. Note the use of the live() binding on the remove-employee handler which will ensure the rows you add via the first function will have working remove links.
这篇关于＆QUOT;内联＆QUOT; CRUD在ASP.NET MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
