#javascript #c# #html
Вопрос:
Есть много видео о том, как это сделать, если таблица и поля ввода пользователя находятся на одной странице, но я действительно изо всех сил пытаюсь заставить данные передаваться по страницам. Первая страница выглядит так. Именно там пользователь должен ввести свою информацию. После того, как они нажмут «Отправить», он перейдет на эту страницу, где он должен взять их имя и отобразить его с благодарностью. Наконец, у вас есть третья страница, здесь она показывает всю введенную пользователем информацию с первой страницы в таблице. У меня все страницы готовы и работают нормально, мне просто нужно выяснить, как получить данные с первой страницы для отображения на второй и третьей страницах. Я знаю, что код некрасивый, просто нужно, чтобы он работал, прежде чем я сделаю его лучше.
Вот код для первой страницы, которая принимает пользовательский ввод.
@page @model RSVPModel @{ ViewData["Title"] = "RSVP"; } lt;h1gt;@ViewData["Title"]lt;/h1gt; lt;html lang="en"gt; lt;headgt; lt;meta charset="utf-8" /gt; lt;meta name="viewport" content=" width=device-width, initial-scale=1.0" /gt; lt;titlegt;RSVPlt;/titlegt; lt;link rel="stylesheet" type=" text/css" href="style.css"/gt; lt;/headgt; lt;bodygt; lt;div id=" container"gt; lt;div class=" input"gt;Name: lt;input id="name" type="text" /gt;lt;/divgt; lt;div class=" input"gt;Age: lt;input id="age" type="number" /gt;lt;/divgt; lt;div class=" input"gt;Arrival Time: lt;input id="arrtime" type="time" /gt;lt;/divgt; lt;label for="parking"gt;Request Parking?lt;/labelgt; lt;select name="parking" id="parking"gt; lt;option value=""gt;lt;/optiongt; lt;option value="yes"gt;yeslt;/optiongt; lt;option value="no"gt;nolt;/optiongt; lt;/selectgt; lt;form action="Submitted"gt; lt;button id="entry"gt;Submit RSVPlt;/buttongt; lt;/formgt; lt;/divgt; lt;scriptgt; var row = 1; var entry = document.getElementById('entry'); entry.addEventListener("click", displayDetails); function displayDetails() { var name = document.getElementById("name").value; var age = document.getElementById("age").value; var arrtime = document.getElementById("arrtime").value; var parking = document.getElementById("parking").value; if (!name || !age || !arrtime || !parking) { alert("Please fill all fields before proceeding"); return; } var display = document.getElementById("display"); var newRow = display.insertRow(row); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML = name; cell2.innerHTML = age; cell3.innerHTML = arrtime; cell4.innerHTML = parking; row ; } lt;/scriptgt; lt;/bodygt; lt;/htmlgt; Вот код на вторую страницу (страница подтверждения)
@page @model SubmittedModel @{ ViewData["Title"] = "RSVP Submitted"; } lt;div class="text-center"gt; lt;h1 class="display-4"gt;Thank you for your RSVP!lt;/h1gt; lt;pgt;It's great that you're coming. The drinks are already in the fridge!lt;/pgt; lt;pgt;Click lt;a href="GuestList"gt;herelt;/agt; to see who is coming.lt;/pgt; lt;/divgt; И, наконец, код для списка гостей или страницы с таблицей
@page @model PrivacyModel @{ ViewData["Title"] = "Here is a list of people attending the party"; } lt;h1gt;@ViewData["Title"]lt;/h1gt; lt;table id="display"gt; lt;trgt; lt;thgt;Namelt;/thgt; lt;thgt;Agelt;/thgt; lt;thgt;Arrival Timelt;/thgt; lt;thgt;Request Parkinglt;/thgt; lt;/trgt; lt;/tablegt; lt;script src="Script.js"gt;lt;/scriptgt; Комментарии:
1. Я думаю, что самый простой способ-использовать localStorage JS или получить параметры запроса.