2011-11-08 21 views
0

我正在asp.net mvc3應用程序,在這個我有用戶配置文件這一節有很多部分像一般的細節,教育,工作和許多...如何在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?

做這件事情的最佳方式是什麼,以便當用戶點擊保存按鈕時,我的代碼將獲取所有輸入的數據並將數據保存到數據庫中?

我試過這個來顯示添加學校點擊輸入的信息,但是在這裏我無法獲得保存的詳細信息。

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中這樣做的最好方法是什麼?

回答

0

看來您只有一個問題,即提取已輸入的值並以另一種格式顯示它們,就像運行摘要一樣。首先,我強烈建議你使用一個JavaScript庫,比如jQuery,它將取出所有重要的提取和重新顯示值。你也可以使用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> 

所以,你現在需要的是一些JavaScript,當他們點擊每一個按鈕,它提取值該節和插頭他們到摘要部分並顯示它。我不能告訴你怎麼做了這一切,但使用jQuery Val函數將是這樣的:

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

注意的是,以上僅僅是想法的草圖。想法是,您不斷更新摘要,顯示更新的部分,隱藏剛輸入的數據,然後將摘要框移到下一部分的頂部。

當他們點擊最後的保存按鈕,雖然你的部分是隱藏的,則仍然會得到提交。

0

一個很不錯的選擇我們簡單地做一個Ajax保存時還要加一個新的部分/例如他們點擊添加一個新的學校,保存前一節或者乾脆把保存按鈕旁邊的每個部分,當他們完成每個部分,他們點擊save ajax調用只保存最近的更改。這將通過使用jQuery .Ajax()調用來完成。