Question

Краткий обзор

Я пытаюсь собрать данные с динамически создаваемых радиокнопок и добавить их в базу данных на страницах бритв.

Проблема

Содержимое веб-страницы создается динамически из файла. json. Пользователь может взаимодействовать с контентом, в основном, для нажатия различных значений радиокнопок. Эта часть работает как задумано. Проблема заключается в том, как передать значения, созданные пользователем, в базу данных. Когда пользователь нажимает кнопку отправки, веб-сайт должен:

Найти все ранее сформированные радиокомпоненты
Для каждой формы проверить, какое значение пользователь нажал
Отправьте эти значения в базу данных для хранения ответов от разных пользователей

Это видео частично объясняет, что я хотел бы сделать, но я не знаю, как это сделать на страницах бритвы и для динамических c content: https://www.youtube.com/watch?v=QsvueWGmWLI

Если проблема с Dynami c является проблемой, я готов жестко закодировать все значения, чтобы иметь возможность их добавить.

Справочная информация: подробно

Основная цель веб-страницы c состоит в том, чтобы пользователи go посещали веб-страницу, отвечали в основном на вопросы с переключателями, а затем нажимали кнопку отправки. Затем веб-страница должна хранить их ответы в базе данных.

У меня есть два типа данных: Вопрос и Ответ Цель модели Ответа - хранить ответы. Цель модели Вопросов - динамически генерировать вопросы о радиокнопках на веб-странице.

Answer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;

namespace EvaluationTool.Models
{
    public class Answer
    {
        public int ID { get; set; }
        public string JobTitle { get; set; }

        [DataType(DataType.Date)]
        public DateTime Date { get; set; }
        public int O1 { get; set; }
        public int OC1 { get; set; }
        public int O2 { get; set; }
        public int OC2 { get; set; }
        public int O3 { get; set; }
        public int OC3 { get; set; }
    }
}

Question.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.Json;
using System.Text.Json.Serialization;
using System.Threading.Tasks;

namespace EvaluationTool.Models
{
    public class Question
    {
        [JsonPropertyName("id")]
        public int Id { get; set; }

        [JsonPropertyName("isFollowUp")]
        public bool IsFollowUp { get; set; }

        [JsonPropertyName("followUpId")]
        public int FollowUpId { get; set; }

        [JsonPropertyName("statement")]
        public string Statement { get; set; }

        [JsonPropertyName("option1")]
        public string Option1 { get; set; }
        [JsonPropertyName("option2")]
        public string Option2 { get; set; }
        [JsonPropertyName("option3")]
        public string Option3 { get; set; }
        [JsonPropertyName("option4")]
        public string Option4 { get; set; }
        [JsonPropertyName("option5")]
        public string Option5 { get; set; }
        [JsonPropertyName("isCrit1")]
        public bool IsCritical1 { get; set; }
        [JsonPropertyName("isCrit2")]
        public bool IsCritical2 { get; set; }
        [JsonPropertyName("isCrit3")]
        public bool IsCritical3 { get; set; }
        [JsonPropertyName("isCrit4")]
        public bool IsCritical4 { get; set; }
        [JsonPropertyName("isCrit5")]
        public bool IsCritical5 { get; set; }

        [JsonPropertyName("value1")]
        public int Value1 { get; set; }
        [JsonPropertyName("value2")]
        public int Value2 { get; set; }
        [JsonPropertyName("value3")]
        public int Value3 { get; set; }
        [JsonPropertyName("value4")]
        public int Value4 { get; set; }
        [JsonPropertyName("value5")]
        public int Value5 { get; set; }

        [JsonPropertyName("result1")]
        public string Result1 { get; set; }
        [JsonPropertyName("result2")]
        public string Result2 { get; set; }
        [JsonPropertyName("result3")]
        public string Result3 { get; set; }
        [JsonPropertyName("result4")]
        public string Result4 { get; set; }
        [JsonPropertyName("result5")]
        public string Result5 { get; set; }

        public override string ToString() => JsonSerializer.Serialize<Question>(this);
    }
}

Вопросы создаются путем чтения json -файла, в котором хранятся вопросы. Пример с одной записью приведен здесь: Вопросы. json (неполные)

[
  {
    "id": 1,
    "isFollowUp": false,
    "followUpId": 2,
    "statement": "1. Workenvironment is not hazardous.",
    "option1": "Completely disagree",
    "option2": "Somewhat disagree",
    "option3": "Neutral",
    "option4": "Somewhat agree",
    "option5": "Completely agree",
    "isCrit1": true,
    "isCrit2": true,
    "isCrit3": true,
    "isCrit4": true,
    "isCrit5": false,
    "value1": 1,
    "value2": 2,
    "value3": 3,
    "value4": 4,
    "value5": 5,
    "result1": "You answered 1",
    "result2": "You answered 2,
    "result3": "You answered 3",
    "result4": "You answered 4",
    "result5": "You answered 5"
  },

На странице указателей, которая должна показать вопросы и собрать ответы, которые мне удалось сделать, Прочитайте файл. json и правильно отобразите все радиокнопки. Эта часть, возможно, немного сложна и не является частью проблемы, но есть два типа вопросов о радиокнопках: обычные вопросы (которые видны с самого начала) и до 1 дополнительного вопроса на обычный вопрос (которые не видны до на соответствующий обычный вопрос приходит ответ, который требует продолжения). Когда пользователь отвечает на вопрос о радиокнопке, запускается скрипт (function radioDisplay(id, followUpId, textResult, isCrit)). Он найдет, какая кнопка была нажата, найдет соответствующее значение результата и отобразит его в метке. Например, если пользователь нажал кнопку «option1», будет показан соответствующий текст «result1». Он также проверяет, есть ли дополнительный вопрос (если «followUpId» не равен -1, есть дополнительный вопрос). Если есть дополнительный вопрос и кнопка критична (в приведенном здесь примере для «option1» соответствующее значение «isCrit1» истинно, поэтому следующий вопрос будет найден и сделан видимым).

Когда пользователь нажал кнопку отправки, должно произойти то, что для каждой созданной радиокнопки формы должно быть определено, какое значение нажато, и это значение должно быть добавлено к записи в базе данных. Значения O1, OC1, O2, OC2, O3, OC3 в Answer.cs соответствуют вопросу. В файле вопросов есть 6 вопросов. json, так что по одному на каждое значение в файле Answer.cs (когда это сработает, будет добавлено больше). Таким образом, запрос на добавление к базе данных должен иметь идентификатор пользователя (ключ для базы данных, который может быть сгенерирован посредством итерации), строка JobTitle будет представлять собой текстовое поле, не являющееся динамическим c, добавленное позже, и следующие 6 значений получат их значения из radiobuttonforms.

Я добавил комментарии для функции отправки, чтобы показать, как я думаю, что это должно быть решено структурно. Но это может быть очень неправильно, так как я очень плохо знаком с веб-программированием и базами данных (это моя первая попытка, поэтому я могу упустить что-то очевидное). Если какая-то информация отсутствует, просто укажите, и я отредактирую. Я пытался хранить только важную информацию, но моя неопытность, возможно, привела к тому, что я забыл добавить что-то важное.

Index.cs html

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h3>Evaluation Tool</h3>
</div>

@foreach (var question in Model.Questions)
{
    @if (question.IsFollowUp)
    {
        <p style="display:inline;display:none" name="@question.Id">@question.Statement</p>
        <br />
        <input style="display:none" id="option1" type="radio" name="@question.Id" value=@question.Value1 onclick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result1', '@question.IsCritical1')" />
        <p style="display:inline;display:none" name="@question.Id">@question.Option1</p>
        <br />
        <input style="display:none" id="option2" type="radio" name="@question.Id" value=@question.Value2 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result2', '@question.IsCritical2')" />
        <p style="display:inline;display:none" name="@question.Id">@question.Option2</p>
        <br />
        <input style="display:none" id="option3" type="radio" name="@question.Id" value=@question.Value3 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result3', '@question.IsCritical3')" />
        <p style="display:inline;display:none" name="@question.Id">@question.Option3</p>
        <br />
        <input style="display:none" id="option4" type="radio" name="@question.Id" value=@question.Value4 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result4', '@question.IsCritical4')" />
        <p style="display:inline;display:none" name="@question.Id">@question.Option4</p>
        <br />
        @if (question.Option5 != "")
        {
            <input style="display:none" id="option5" type="radio" name="@question.Id" value=@question.Value5 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result5', '@question.IsCritical5')" />
            <p style="display:inline;display:none" name="@question.Id">@question.Option5</p>
            <br />
        }
        <label style="display:none" id="label" name="@question.Id" class="@question.Id"></label>
        <br />

    }
    @if (!question.IsFollowUp)
    {
        <p style="display:inline" name="@question.Id">@question.Statement</p>
        <br />
        <input id="option1" type="radio" name="@question.Id" value=@question.Value1 onclick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result1', '@question.IsCritical1'.toLowerCase())" />
        <p style="display:inline" name="@question.Id">@question.Option1</p>
        <input id="option2" type="radio" name="@question.Id" value=@question.Value2 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result2', '@question.IsCritical2'.toLowerCase())" />
        <p style="display:inline" name="@question.Id">@question.Option2</p>
        <input id="option3" type="radio" name="@question.Id" value=@question.Value3 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result3', '@question.IsCritical3'.toLowerCase())" />
        <p style="display:inline" name="@question.Id">@question.Option3</p>
        <input id="option4" type="radio" name="@question.Id" value=@question.Value4 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result4', '@question.IsCritical4'.toLowerCase())" />
        <p style="display:inline" name="@question.Id">@question.Option4</p>
        <input id="option5" type="radio" name="@question.Id" value=@question.Value5 onClick="radioDisplay(@question.Id, @question.FollowUpId, '@question.Result5', '@question.IsCritical5'.toLowerCase())" />
        <p style="display:inline" name="@question.Id">@question.Option5</p>
        <br />
        <label id="label" name="@question.Id" class="@question.Id"></label>
        <br />
    }
}

<button id="sub_but" type="button" value="Submit" class="btn-success" onclick="submitResults();">Submit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    function radioDisplay(id, followUpId, textResult, isCrit) {
        var resultLabel;
        var items = document.getElementsByName(id);
        for (i = 0; i < items.length; i++) {
            if (items[i].id == "label") {
                resultLabel = items[i];
            }
        }
        resultLabel.innerHTML = textResult;
        if (followUpId != -1) {
            if (isCrit == "true") {
                var followItems = document.getElementsByName(followUpId);
                for (i = 0; i < followItems.length; i++) {
                    followItems[i].style.display = 'block';
                    followItems[i].style.display = 'inline';
                }
            }
            else if(isCrit == "false") {
                var followItems = document.getElementsByName(followUpId);
                for (i = 0; i < followItems.length; i++) {
                    followItems[i].style.display = 'none';
                }
            }
        }
    }
    function submitResults() {
        //TODO: First create an array to store answers in
        @
        {
            string[] answers = new string[Model.Questions.length];
        }
        //TODO: Then loop through the dyanamically created forms, one for each question in Questions.
        @foreach(var question in Model.Questions)
        {
            //TODO: Find the value of the form and add it to answers
        }
        //TODO: Make a post to the database with all the values
    }
</script>

Как добавить значения из radiobutton Dynami c в базу данных

Краткий обзор

Проблема

Справочная информация: подробно

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Как добавить значения из radiobutton Dynami c в базу данных

Краткий обзор

Проблема

Справочная информация: подробно

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 0 ]

Похожие темы