어떻게 asp.net mvc3 페이지에서 여러 섹션 정보를 저장할 수 있습니까?

Question

나는 asp.net mvc3 응용 프로그램에서 일하고 있는데 여기에는 일반 세부 정보, 교육, 작업 및 기타 여러 섹션이있는 사용자 프로필 섹션이 있습니다.

이제 사용자가 자신의 정보를 삽입하려고합니다. 추가 클릭하면 다른 섹션에 삽입 된 정보를 표시하고 저장을 클릭하면 데이터베이스에 모든 정보를 삽입하려고합니다.

처럼,

교육 섹션 : 이 사용자에 자신의 학교 정보, 대학 정보를 입력 할 수 있습니다.

학교

School Division: Dropdown 

School Name: Textbox 

School Branch: Textbox 

School Year: Dropdown 

***Add School*** 

대학

College Division: Dropdown 

CollegeName: Textbox 

CollegeBranch: Textbox 

CollegeYear: Dropdown 

***Add College*** 

    **SAVE CANCEL** 

내 교육 섹션이 있고, 는에 사용자가 클릭 내가 입력 한 데이터가 때 사용자가 다른 섹션에 및 표시 원하는 학교를 추가 할 때 저장 버튼을 클릭하면 모든 데이터가 데이터베이스에 저장되므로 1 클릭으로 세부 사항을 저장하기 위해 데이터베이스 왕복을 줄일 수 있습니다. 사용자는 프로필에 여러 학교 및 대학을 입력 할 수 있습니다.

내 질문/대답 div/div에 입력 한 데이터를 어떻게 표시 할 수 있습니까?

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 사용자가 저장 버튼을 클릭하면 입력 한 데이터를 가져 와서 데이터를 데이터베이스에 저장합니다.

학교에서 추가 클릭으로 입력 한 정보를 표시하려고했지만이 경우 저장에 대한 세부 정보를 얻을 수 없습니다.

function addSchool() { 

var result = document.getElementById('schoolDiv').innerHTML + "</br>" + "<br/>School: " + document.getElementById('schooldiv').value + "<br/>School Name: " + document.getElementById('schoolname').value +"<br/>Branch: " + document.getElementById('branch').value + "<br/>School Year: " + document.getElementById('schoolyear').value; 

       document.getElementById('schoolDiv').innerHTML = result; 
} 

asp.net mvc3에서 가장 좋은 방법은 무엇입니까?

Answer 1

입력 한 값을 추출하여 실행 요약과 같은 다른 형식으로 표시하는 것은 하나의 문제 만있는 것처럼 보입니다.

첫 번째로 jQuery와 같은 JavaScript 라이브러리를 사용하는 것이 좋습니다.이 라이브러리는 값을 추출하고 다시 표시하는 모든 작업을 수행합니다. 또한 섹션 문제를 처리하기 위해 jQuery UI 탭 플러그인을 사용할 수 있습니다. http://jqueryui.com/demos/tabs/

직접 작성하면 입력 한 데이터를 다시 표시 할 때 여러 가지 방법이 있습니다. 하나의 간단한 방법은 예를 들어, 자신의 섹션으로 요약 템플릿을하는 것입니다 :

<div id="summary"> 
    <div id="personalSummary" style="display: none;"> 
     <p>Various elements to hold summary</p> 
    </div> 
    <div id="educationSummary" style="display: none;"> 
     <p>Various elements to hold summary</p> 
    </div> 
</div> 
<form> 
<div id='sections'> 
    <div id="personal"> 
     <input type="button" value="Next" /> 
    </div> 
    <div id="education" style="display: none;"> 
     <input type="button" value="Next" /> 
    </div> 
</div> 
</form> 

그래서 지금 필요한 것은 약간의 자바 스크립트는 그 부와 플러그의 값을 추출하여 그들이 각 버튼을 클릭 할 때이다 그것들을 요약 섹션에 넣고 표시합니다. 나는 어떻게이 모든 것을 수행하는 방법을 보여주지 수 있지만 jQuery를 발 그것을 기능을 사용하여 뭔가 같은 것 : 위에서 바로 아이디어의 스케치입니다

<script type="text/javascript"> 
    function completeSection(sectionId) { 
     var section = $('#' + sectionId); 
     var summary = $('#' + sectionId + 'Summary'); 
     // swap a value over. 
     var value = $('#firstName', section).val(); 
     $('#firstNameSummary', summary).val(value); 
     // etc 

     // now hide the input section, display the summary section and move the 
     // the whole summary to the next input section 
     section.hide(); 
     summary.show(); 
     $('#summary').prependTo($('#education')); 
    } 
</script> 

참고.아이디어는 요약을 업데이트하고 업데이트 된 섹션을 표시하고 방금 입력 한 데이터를 숨긴 다음 요약 섹션을 다음 섹션의 맨 위로 이동시키는 것입니다.

최종 저장 버튼을 클릭하면 섹션이 숨겨져 있지만 여전히 제출됩니다.

Answer 2

새 섹션을 추가 할 때 단순히 Ajax를 저장하는 간단한 방법 중 하나입니다. 예를 들어 새 학교를 추가하기 위해 클릭하거나, 이전 섹션을 저장하거나, 각 섹션 옆에 저장 버튼을 두거나 섹션을 클릭하면 저장됩니다. 최근 변경 사항 만 저장하려면 아약스 호출을 수행하십시오. 이것은 jQuery .Ajax() 호출을 사용하여 수행됩니다.