Javascript 如何在asp.net mvc3页面中保存多个节的详细信息？

我在asp.NETMVC3应用程序工作，在这个我有用户配置文件部分，这有很多部分，如一般细节，教育，工作和许多

现在我的问题是，我希望用户插入他们的信息，单击“添加”，我希望在另一个部分显示插入的信息，单击“保存”，我希望将所有信息插入数据库

像

教育组： 在此用户可以填写他们的学校详细信息、学院详细信息

学校

学院

我的教育部有这个， 当用户单击“添加学校”时，我希望输入的数据显示到另一个部分，当用户单击“保存”按钮时，所有数据都应进入数据库，这样我们就可以减少数据库的往返，只需单击一次即可保存详细信息。 用户可以在其配置文件中输入多个学校和学院

我的问题是,

如何将输入的数据显示到另一个分区/分区中

做这件事的最好方法是什么，这样当用户点击保存按钮时，我的代码将获取所有输入的数据并将数据保存到数据库中

我试图显示在“添加学校”单击中输入的信息，但在此过程中，我无法获取详细信息以进行保存

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中执行此操作的最佳方法是什么？

您似乎只有一个问题，那就是提取已输入的值并以另一种格式显示它们，几乎就像运行摘要一样

首先，我强烈建议您使用一个JavaScript库，比如jQuery，它将消除提取和重新显示值的所有繁重工作。您还可以使用jQuery UI 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>

请注意，以上只是想法的一个草图。其思想是不断更新摘要，显示更新的部分，隐藏刚刚输入的数据，然后将摘要框移动到下一部分的顶部

---

当他们单击“最终保存”按钮时，尽管您的分区已隐藏，但仍将提交。

一个简单的替代方法是，当他们添加新分区时，我们只需执行Ajax保存/例如，他们单击以添加新学校，保存上一节，或者在每个节旁边简单地放置一个保存按钮，当他们完成每个节时，他们单击save，这将执行一个ajax调用，仅保存最近的更改。这将使用jQuery.Ajax调用来完成

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

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