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

回答

相關問題