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

我的教育部分有这个，当用户点击添加学校时，我想将输入的数据显示到另一个部分，当用户点击保存按钮时，所有数据都应该进入数据库，这样我们就可以减少数据库往返，保存详细信息一次点击。用户可以在他们的个人资料中输入多所学校和学院。

我的问题是，

如何将输入的数据显示到另一个部分/ 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/

自己编写，可以采用各种方法重新显示输入的数据。一种简单的方法是创建一个Summary模板，它有自己的部分，例如：

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

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

当他们点击最后的保存按钮时，虽然您的部分已隐藏，但仍会提交。

Answer 2

一个简单的替代方案我们只需在添加新部分时进行Ajax保存/例如他们点击添加新学校，保存前一部分或只是在每个部分旁边放一个保存按钮，当他们完成每个部分他们点击保存，它执行ajax调用以仅保存最近的更改。这将使用jQuery .Ajax（）调用来完成。

如何在asp.net mvc3页面中保存多个部分详细信息？

2 个答案: