I try to pass Id to Quizz page and use ajax to get the data when page is load. But, it don’t work and give me error.
HTTP404: NOT FOUND – The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET – http://localhost:54086/Home/Quizz/Home/GetData/1
I don’t know why the url look like that. Why it need to put Home/GetData/
in that url
Index.cshtml
<div class="question bg-white p-3 border-bottom" id="start">
<a target="_blank" rel="nofollow" href="@value.url">@Html.DisplayFor(model => value.title) →</a><br /><br />
<button class="btn" type="button">@Html.ActionLink("Begin the Quiz!", "Quizz", "Home", new { id = value.id }, new { style = "text-decoration:none;color:white;font-size:14px;" })</button>
</div>
Home Controller
public ActionResult Quizz(int id)
{
Learning learn = new Learning();
learn.id = id;
return View(learn);
}
[HttpGet]
public JsonResult GetData(int? id)
{
string user = Session["UserName"].ToString();
bool isValid = db.ScoreQs.Any(x => x.username == user && x.IdMaterial == id && x.status != null);
if (isValid)
{
return Json(1, JsonRequestBehavior.AllowGet);
}
else
{
var quizz = db.Quizs.Where(x => x.Learning.id == id).Select(a => new
{
a.Learning.id,
a.quizId,
a.img,
a.question,
a.questionA,
a.questionB,
a.questionC,
a.questionD,
a.answer,
});
return Json(quizz , JsonRequestBehavior.AllowGet);
}
}
.js
$(document).ready(function () {
$.ajax({
type: "GET",
url: "Home/GetData/" + object.id,
dataType: "json",
data: {},
success: function (data) {
if (data == 1) {
message.style.display = "display";
quiz.style.display = "none";
}
else {
start.style.display = "none";
getQuestion(data, id);
quiz.style.display = "block";
}
},
error: function () {
console.log("error");
}
});
});
Quizz.cshtml
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model ProjectOE.Learning
@{
ViewData["Title"] = "Dashboard";
}
<script>
var object = @(Html.Raw(Json.Encode(Model)));
</script>
<link rel="stylesheet" href="~/Content/style2.css">
<!-- Begin Page Content -->
<br /><br />
<div class="container-fluid">
<div class="b">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"> </h6>
</div> <div class="border">
<!--Quiz Container-->
<div id="quiz" style="display: none" class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row align-items-center question-title justify-content-between align-items-center mcq">
<h5 class="text-danger mt-1 ml-2 " id="quizQuestion"></h5><br />
</div>
<div id="choices" class="choice ">
<button class="btn btn-block" type="button" id="choiceA" onclick="check(@Model.id,'A')"></button>
<button class="btn btn-block" type="button" id="choiceB" onclick="check(@Model.id,'B')"></button>
<button class="btn btn-block" type="button" id="choiceC" onclick="check(@Model.id,'C')"></button>
<button class="btn btn-block" type="button" id="choiceD" onclick="check(@Model.id,'D')"></button>
</div>
<div id="choiceResponse" style="display: none"></div>
</div>
</div>
</div>
</div>
<script src="~/js/quizgame.js"></script>
<!-- End of Main Content-->
2
Answers
You are probably requesting from this page :
http://localhost:54086/Home/Quizz
and you append this
"/Home/GetData/1".
Try adding a global variable that you can reuse:
Example:
Just add ‘/’ at the beginning of your url. It will take path with baseURL otherwise it will take relative path.