how to get data from html form and store it in a c

Question

I'm new to programming. I have basic understanding of Html, Css, C#, SQL queries, Entity Framework and ASP.Net-MVC. I'm trying to make a small time table test in ASP.Net-MVC.

The purpose of this application is to ask 10 questions, one question at a time and each time a question is attempted user will click on next button that will show next set of question. User need to attempt all 10 questions. Once reached it will tell show a message e.g. "Congratulations You have answered 7 questions From 10".

I want to know if it is possible to get data from html form and then store it in C# variable in ASP.Net MVC View. Below is what I have tried so far:

Question View

@{ 
Random rnd = new Random();
int num1 = rnd.Next(13);
int num2 = rnd.Next(13);
int answer = num1 * num2;
int wrng1 = answer - 2;
int wrng2 = answer + 10;
int wrng3 = answer + 4;
int QAnswered = 0;
}

<div style="text-align:center;">
<h1>Questions Answered: @QAnswered</h1>

<!--Writes the Question-->
<h2 style="font-size: 150px; font-weight:900;">@num1 X @num2 = ?</h2>

<!--Buttons for Answers in form-->
<form action="/Home/CheckAnswer" method="post">
    <input type="radio" name="UserAnswer" value="@answer" style="margin-right: 10px; width: 50px; height: 50px;" /><label style="color:white; font-size: 75px; width: 150px; height: 100px; border:1px solid black; background-color: cornflowerblue;">@answer</label>
    <input type="radio" name="UserAnswer" value="@wrng1" style="margin-right: 10px; width: 50px; height: 50px;" /><label style="color:white; font-size: 75px; width: 150px; height: 100px; border:1px solid black; background-color: cornflowerblue;">@wrng1</label>
    <br /><br /><br />
    <input type="radio" name="UserAnswer" value="@wrng2" style="margin-right: 10px; width: 50px; height: 50px;" /><label style="color:white; font-size: 75px; width: 150px; height: 100px; border:1px solid black; background-color: cornflowerblue;">@wrng2</label>
    <input type="radio" name="UserAnswer" value="@wrng3" style="margin-right: 10px; width: 50px; height: 50px;" /><label style="color:white; font-size: 75px; width: 150px; height: 100px; border:1px solid black; background-color: cornflowerblue;">@wrng3</label>
    <br /><br />
    <input type="hidden" name="CorrectAnswer" value="@answer" />
    <input type="hidden" name="QAnswered" value="@QAnswered" />
    <input class="btn btn-primary" type="submit" value="Next" style="font-size: 50px; width: 150px; height: 75px;" />
</form>

and this is the code for the Actions in home controller:

public ActionResult Question()
    {
        return View();
    }

    [HttpPost]
    public ActionResult CheckAnswer(int UserAnswer, int CorrectAnswer, int QAnswered)
    {   
        int TrueAnswers = 0;
        int FalseAnswers = 0;         
        //Check whether UserAnswer is true or false and increment values of them
        if (UserAnswer == CorrectAnswer)
        {
            TrueAnswers += 1;
            QAnswered += 1;
        }
        else if (UserAnswer != CorrectAnswer)
        {
            FalseAnswers += 1;
            QAnswered += 1;
        }

        if (QAnswered < 10)
        {
            return RedirectToAction("Question");
        }
        else
        {
            return RedirectToAction("Index");
        }
    }

The thing is I don't want to make CheckAnswer action return content instead I want it to store the UserAnswer and check if it was correct then it will (somehow) store it as a true and vice versa and and after 10 questions (whether if it was right or wrong) I want it to display another View Which Will say something like "Congratulations you have answered 7 out of 10 questions correctly".

I don't know how will I do it so I hope anyone Will Help Me.

Answer 1

return Content(“...”) is only to return TEXT-Plain FORMAT value

If you want to fire another action after form submit, you should enter return RedirectToAction(“YOUR-ACTION”)

---

Update

Controller:

[HttpGet]
public ActionResult Question()
    {
        Random rnd = new Random();
        int num1 = rnd.Next(13);
        int num2 = rnd.Next(13);
        return View(new QuestionViewModel
        {
            QuestionPart1 = num1,
            QuestionPart2 = num2,
        });
    }

    [HttpPost]
    public ActionResult Question(QuestionViewModel model)
    {
        //Check whether UserAnswer is true or false and increment values of them
        if (model.UserAnswer == (model.QuestionPart1 * model.QuestionPart2))
        {
            if (Session["QAnswered"] == null)
                Session["QAnswered"] = 1;
            else
                Session["QAnswered"] = int.Parse(Session["QAnswered"].ToString()) + 1;
        }
        else
        {
            if (Session["Failed"] == null)
                Session["Failed"] = 1;
            else
                Session["Failed"] = int.Parse(Session["Failed"].ToString()) + 1;
        }

        if (Session["QAnswered"] != null && int.Parse(Session["QAnswered"].ToString()) == 10)
        {
            // successful
            return RedirectToAction("Congratulation");
        }
        else
        {
            // failed
            return RedirectToAction("Question");
        }
    }

View:

    @model WebApplication2.Models.QuestionViewModel
    @{
        int answer = Model.QuestionPart1 * Model.QuestionPart2;
        int wrng1 = answer - 2;
        int wrng2 = answer + 10;
        int wrng3 = answer + 4;
        var answers = new List<int> { answer, wrng1, wrng2, wrng3 };
        Random rnd = new Random();
        answers = answers.OrderBy(x => rnd.Next()).ToList();
    }
    <div style="text-align:center;">
        <h1>Questions Answered: @Session["QAnswered"]</h1>
    @if (int.Parse(Session["QAnswered"].ToString()) >= 7){
<text>
Congratulations, you've answered 7 of 10.
</text>
}
        <!--Writes the Question-->
        <h2 style="font-size: 150px; font-weight:900;">@Model.QuestionPart1 X @Model.QuestionPart2 = ?</h2>

        <!--Buttons for Answers in form-->
        @using (Html.BeginForm("Question", "Home", FormMethod.Post))
        {
            for (int index = 0; index < 4; index++)
            {
                var choice = answers[index];
                <input type="radio" id="UserAnswer" name="UserAnswer" value="@choice" style="margin-right: 10px; width: 50px; height: 50px;" />
                <label style="color:white; font-size: 75px; width: 150px; height: 100px; border:1px solid black; background-color: cornflowerblue;">@choice</label>
                <br />

            }

            @Html.HiddenFor(model => model.QuestionPart2)
            @Html.HiddenFor(model => model.QuestionPart1)
            <input class="btn btn-primary" type="submit" value="Next" style="font-size: 50px; width: 150px; height: 75px;" />

        }
    </div>

Model:

public class QuestionViewModel
    {
        public int QuestionPart1 { get; set; }
        public int QuestionPart2 { get; set; }
        public int UserAnswer { get; set; }
    }