DropDownlist - wyświetlenie wybranego elementu.

0

Witam,
Zrobiłem sobie dropDownList, ale po kliknięciu przycisku submit przekierowuję mnie na stronę główną zamiast wyświetlić wybrany element. W sumie to chce po kliknięciu przycisku wyświetlić nazwę wybranego testu oraz pierwsze pytanie z tego testu. Drugie pytanie, czy jest możliwość żeby aplikacja sama przeszła do kolejnego pytania po określonym czasie, ale bez przeładowywania strony, czy da się to zrobić w jakiś prosty sposób?
test.PNG
Kontroller:

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebQuiz.DAL;
using WebQuiz.Models;

namespace WebQuiz.Controllers
{
    public class TestController : Controller
    {
        private readonly IQuestionRepository questionRepository;
        private readonly IQuizRepository quizRepository;

        public TestController(IQuestionRepository questionRepository, IQuizRepository quizRepository)
        {
            this.questionRepository = questionRepository;
            this.quizRepository = quizRepository;

        }

        // GET: Test
        public ActionResult Index()
        {
            List<Quiz> objQuizzesList = quizRepository.GetQuizzes().ToList();

            Quiz objcountry = new Quiz();
            objcountry.Title = "Select";
            objcountry.QuizId = 0;
            objQuizzesList.Insert(0, objcountry);

            SelectList objmodeldata = new SelectList(objQuizzesList, "QuizId", "Title", 0);

            /*Assign value to model*/
            QuizModel quizModel = new QuizModel();
            quizModel.QuizListModel = objmodeldata;
            return View(quizModel);
        }

        [HttpPost]
        public ActionResult Index(int qId)
        {
            List<Quiz> objQuizzesList = quizRepository.GetQuizzes().ToList();

            Quiz objcountry = new Quiz();
            objcountry.Title = "Select";
            objcountry.QuizId = 0;
            objQuizzesList.Insert(0, objcountry);

            SelectList objmodeldata = new SelectList(objQuizzesList, "QuizId", "Title", 0);

            /*Assign value to model*/
            QuizModel quizModel = new QuizModel();
            quizModel.QuizListModel = objmodeldata;
            

            /*Get the selected Exam name*/
            ViewBag.CountryName = objQuizzesList.Where(m => m.QuizId == qId).FirstOrDefault().Title;
            return View(quizModel);
        }
    }
}
 
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}




@{
    ViewBag.Title = "Index";
}
<p>
    @model WebQuiz.Models.QuizModel

    @using (Html.BeginForm("Index", "Home"))
    {

        <h2>
            Wybierz test:
        </h2>
        @Html.DropDownList("qId", Model.QuizListModel, new { @style = "width:200px;" })
        <input type="submit" value="Submit" />
        <br />
        <div>
            <br/>Wybrany test:@ViewBag.Title
        </div>
    }
</p>

Model:

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;


namespace WebQuiz.Models
{
    public class Quiz
    {
        public int QuizId { get; set; }
        public virtual ICollection<Question> Questions { get; set; }

        [Display(Name = "Nazwa:")]
        public string Title { get; set; }

        [Display(Name = "Kategoria:")]
        public string Category { get; set; }

        //public int Score { get; set; }
        //public DateTime? StartTime { get; set; }
        //public TimeSpan? Duration { get; set; }
        //public DateTime? EndTime { get; set; }
    }
} 
using System.ComponentModel.DataAnnotations;


namespace WebQuiz.Models
{
    public class Question
    {
        [Display(Name = "ID")]
        public int QuestionId { get; set; }

        [Display(Name = "Pytanie")]
        public string Text { get; set; }

        [Display(Name = "Odpowiedź A:")]
        public string AnswerA { get; set; }

        [Display(Name = "Odpowiedź B:")]
        public string AnswerB { get; set; }

        [Display(Name = "Odpowiedź C:")]
        public string AnswerC { get; set; }

        [Display(Name = "Prawidłowa odpowiedź:")]
        public string AnswerCorrect { get; set; }

        [Display(Name = "Czas:")]
        public int Time { get; set; }

        [Display(Name = "Liczba punktów:")]
        public int NumberOfPoints { get; set; }

        public int QuizId { get; set; }
        public virtual Quiz Quiz { get; set; }
    }
}
 
1

Do pracy na obiektach DOM (elementach strony) musisz wykorzystać javascript, który pozwala na wykonywanie kodu po stronie klienta w jego przeglądarce bez potrzeby odświeżania. Dodaj do odpowiedniego view w którym masz dropdownlist następujący skrypt

 
<script>
$('#mySubmit').click(function(event){
    event.preventDefault();
    ("#mySelected").html($('#myDropdownlist').val());
});
</script>

Domyślnie submit służy do wysyłania danych formularza dlatego musisz wycofać przesłanie eventu dalej. Następnie ustawiasz odpowiednio dla submita id na mySubmit, dla diva w którym chcesz wyświetlić zaznaczony wynik id na mySelected, a dla dropdownlisty, myDropdownlist.

W przypadku przejścia do kolejnego pytania po upływie czasu także musisz użyć javascriptu dokładniej funkcji setTimeout(), która wykona kod po podanym czasie.

0

@Saguaro napisałem tak jak mówisz. Strona po kliknięciu się nie przeładowuje, ale nie pojawia się też wybrany element.

        <script>
            $('#mySubmit').click(function (event) {
                event.preventDefault();
                ("#mySelected").html($('#myDropdownlist').val());
                //document.Write(("#mySelected").html($('#myDropdownlist').val()));
            });
        </script>
    @model WebQuiz.Models.QuizModel

    @using (Html.BeginForm("Index", "Home"))
    {

        <h2>
            Wybierz test:
        </h2>
        @Html.DropDownList("qId", Model.QuizListModel, new { @style = "width:200px;", @id = "myDropdownlist" })
        <input type="submit" value="Submit" id="mySubmit" />
        <br />
        <div id="mySelected">
           
        </div>

        <br/><input id="btnGetQuizzes" type="button" value="Get Quizzes" />
        <div>
            <div id="ajaxQuizzes">
                Z ajax
            </div>
        </div>
 
 

1 użytkowników online, w tym zalogowanych: 0, gości: 1