MVC3 - 동적으로 LabelFor를 TextBox로 변환

Question

사용자가 필드 (TextBoxFor 및 TextAreaFor가 혼합 된)를 채워서 완료 할 MVC 형식이 있습니다. 양식이 제출되어 데이터베이스에 보존됩니다.

사용자는 나중에 여러 단추 중 하나를 사용하여 양식을 업데이트 할 수 있습니다. 그 중 :

• 수정 세부 정보 - 사용자가 이전에 완료 한 필드의 세부 정보를 변경할 수 있습니다.
• 세부 정보 추가 - 이전에 아무 것도 입력하지 않은 필드를 완성하십시오.

자신의 정보를 업데이트하고자하는

이 조치는 사용자가 취해야 할은 다음과 같습니다 사용자가 처음 정보를 업데이트하기 위해 자신의 양식을 엽니 다

이

1. 보기가 DisplayFor 년대를 사용하여 모든 세부 사항을 발표 할 예정이다 . 모든 필드는 편집을 위해 잠겨 있습니다.

2. 예를 들어 사용자가 "세부 정보 수정"버튼을 클릭하면 확인란이 포함 된 팝업 상자가 표시됩니다. 지금까지 완료된 각 필드에 대해 하나씩.

3. 사용자는 변경하려는 필드에 해당하는 확인란을 선택한 다음 "업데이트"버튼을 클릭하면 팝업이 닫히고 양식에 다시 포커스가 있습니다.

4. 사용자가 업데이트하도록 선택한 필드가 이제 DisplayFor에서 TextBoxFor로 변경되어 편집 할 수있게되었습니다.

이 과정의 4 단계에서 나는 문제가 있습니다. jQuery를 통해 입력 태그를 변경할 수있는 여러 가지 방법이 있다는 것을 알았다. 예를 들어 :

jQuery: Change element type from hidden to input 내가 마음에 MVC 입력 태그로 변환 이런 종류의 작업을 수행 할 수있는 어떤 방법이 있습니까 :

marker = $('<span />').insertBefore('#myInput'); 
$('#myInput').detach().attr('type', 'text').insertAfter(marker).focus(); 
marker.remove(); 

은에서 촬영?

Answer 1

여기서 서버 측 및 클라이언트 측 기술을 혼합하면 다소 제한적입니다. 초기에 양식 입력 유형이 있는지 확인해야합니다. 즉, HiddenFor 요소 또는 초기에 숨겨져있는 TextBoxFor 요소 중 하나를 의미합니다.

당신이 인용 한 예제는 전자를 사용하지만, 당신의 경우 나는 조금 더 단순한 것으로 후자쪽으로 기울어지게됩니다.이제

<div> 
    @Html.DisplayFor(model => model.SomeField) 
</div> 
@Html.TextBoxFor(model => model.SomeField, new { style = "display:none" }) 

, 사용자, 당신은 하나를 숨길 간단하게 할 수있는 필드를 편집하고 다른를 표시 클릭 : 처음에 숨겨진 텍스트 상자와 양식의 레이블 및 텍스트 상자를 모두 놓고

을 당신은 사용자가 선택 한 필드의 목록을 일단

function makeEditable(fieldName) { 
    $("input[name=" + fieldName + "]").show().prev().hide(); 
} 

그래서, 모두 당신이 필요 :

$("input[name=SomeField]").show().prev().hide(); 

는

당신은 필드의 이름 주어진 필드를 편집 할 수 있도록하는 도우미 함수를 사용할 수 있습니다 할 것이다 루프를 통해 위의 도우미 함수를 호출하십시오.

var fieldsToEdit = [ "SomeField", "AnotherField" ]; 
fieldsToEdit.forEach(makeEditable);