Как я могу сохранить несколько деталей раздела на странице 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**

У меня есть это в моей секции образования, когда пользователь нажимает на кнопку «добавить школу», я хочу, чтобы введенные данные отображались в другом разделе, а когда пользователь нажимает кнопку «Сохранить», все данные должны помещаться в базу данных, чтобы мы могли сократить объем данных в одну сторону и сохранить данные в один клик. Пользователь может указать несколько школ и колледжей в своем профиле.

Мой вопрос,

как я могу отобразить введенные данные в другой раздел / 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

Одна из простых альтернатив - просто сохранить Ajax, когда они добавляют новый раздел / например, они нажимают, чтобы добавить новую школу, сохраняют предыдущий раздел или просто помещают кнопку сохранения рядом с каждым разделом, а когда заканчивают каждый раздел они нажимают сохранить, что делает вызов ajax, чтобы сохранить только последние изменения. Это будет выполнено с помощью вызова jQuery .Ajax ().

Answer 2

Кажется, что у вас есть только одна проблема: извлечь уже введенные значения и отобразить их в другом формате, почти как текущая сводка.

Во-первых, я настоятельно рекомендую вам использовать библиотеку JavaScript, такую ​​как jQuery, которая возьмет на себя всю тяжелую работу по извлечению и повторному отображению значений. Вы также можете использовать плагин jQuery UI tabs для решения проблемы секций: 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>

Обратите внимание, что вышесказанное является лишь наброском идеи. Идея состоит в том, что вы продолжаете обновлять сводку, показывая обновленный раздел, скрывая только что введенные данные, а затем перемещая окно сводки в верхнюю часть следующего раздела.

Когда они нажимают кнопку последнего сохранения, хотя ваши разделы скрыты, они все равно будут отправлены.