2011-11-08 18 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()调用来完成。