ASP.NET MVC의 "인라인"CRUD

Question

Employees 테이블과 많은 관계가있는 회사 테이블이 있다고합시다.

회사 페이지 추가/편집 페이지가 있지만 각 직원의 다른 CRUD 페이지를 먼저 열 필요없이 새로운/기존 직원을 찾고 추가 할 수 있기를 원합니다.

각 직원마다 영어 이름과 일본어 이름을 입력하게되므로 블로그 소프트웨어가 태그를 편집하는 데 사용하는 일반적인 트릭은 그리 좋지 않습니다.

내부 용이기 때문에 너무 귀엽 필요가 없습니다.

이 작업을 수행하는 실제 방법은 무엇입니까? 나는 jQuery를 사용해야한다고 생각하지만 사용법은 거의 모른다.

내가 WPF/실버 라이트에 대해 잘 알고 있어요,하지만 ... 에서요 :

먼저 떠오르는 것은 직원 모델에 CRUD 작업을 처리하는 컨트롤러를 구축하는 것입니다

Answer 1

이런 식으로하는 가장 쉬운 방법은 열거 형 컬렉션에 대해 모델을 바인딩하는 ASP.NET MVC의 지원을 사용하는 것입니다. 본질적으로 회사의 직원을 만들면 MVC의 모델 바인더가 항목 목록 (직원)을 반환하는 데 사용할 수있는 특정 필드 이름 지정 구조를 사용하여 목록에 추가됩니다. 당신은 필드 이름에 서수 인덱서가 각 직원 필드 것을 알 수 있습니다 위의 예에서

---

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

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; } 
} 

, 이것은 당신이 목록에 바인딩 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'라고 불렀습니다. remove-employee 핸들러에서 live() 바인딩을 사용하면 첫 번째 함수를 통해 추가 한 행에 작업 링크가 제거되는지 확인할 수 있습니다.

Answer 2

, 대신 viewresult를 반환하려면 jsonresult 또는 xmlresult (mvccontrib)를 반환하십시오. 이것은 컨트롤러를 웹 서비스로 바꾸어서 실버 라이트 또는 jQuery (jqueryui) 및/또는 서비스 상호 작용 (jquery/ajax) 모두에 대한 실버 라이트 또는 jquery를 활용할 수있게합니다.