qais_seosoft/SurveyVista
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

the questionnaire with list of questions and answers added

Browse source
This commit is contained in:
Qais Yousuf 2024-03-15 19:40:12 +01:00
parent f83d5c492b
commit 9938e696f6
10 changed files with 300 additions and 461 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Services/Implemnetation/QuestionnaireRepository.cs
View file

@ -58,6 +58,7 @@ namespace Services.Implemnetation
public void Update(Questionnaire questionnaire) public void Update(Questionnaire questionnaire)
{ {
_context.Questionnaires.Update(questionnaire); _context.Questionnaires.Update(questionnaire);
} }
} }
} }

195
Web/Areas/Admin/Controllers/QuestionnaireController.cs
View file

@ -1,11 +1,13 @@
using Data; using Data;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering; using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.CodeAnalysis.CSharp.Syntax;
using Model; using Model;
using Services.Implemnetation;
using Services.Interaces; using Services.Interaces;
using System.Security.Cryptography;
using Web.ViewModel.QuestionnaireVM; using Web.ViewModel.QuestionnaireVM;
using Web.ViewModel.QuestionVM;
namespace Web.Areas.Admin.Controllers namespace Web.Areas.Admin.Controllers
{ {
@ -135,11 +137,13 @@ namespace Web.Areas.Admin.Controllers
} }
[HttpGet] [HttpGet]
public IActionResult Edit(int id) public IActionResult Edit(int? id)
{ {
var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>(); var questionTypes = Enum.GetValues(typeof(QuestionType))
.Cast<QuestionType>()
.Select(e => new SelectListItem { Value = e.ToString(), Text = e.ToString() });
ViewBag.QuestionTypes = questionTypes;
ViewBag.QuestionTypes = new SelectList(questionTypes);
var questionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(id); var questionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(id);
if (questionnaire == null) if (questionnaire == null)
@ -147,21 +151,26 @@ namespace Web.Areas.Admin.Controllers
return NotFound(); // Or handle not found case appropriately return NotFound(); // Or handle not found case appropriately
} }
var viewModel = new QuestionnaireViewModel var viewModel = new EditQuestionnaireViewModel
{ {
Id = questionnaire.Id, Id = questionnaire.Id,
Title = questionnaire.Title, Title = questionnaire.Title,
Description = questionnaire.Description, Description = questionnaire.Description,
Questions = questionnaire.Questions Questions = questionnaire.Questions
.Select(q => new Question .Select(q => new Question
{ {
Id = q.Id, Id = q.Id,
Text = q.Text, Text = q.Text,
Type = q.Type, Type = q.Type,
Answers = q.Answers.Select(a => new Answer Answers = q.Answers.Select(a => new Answer
{ {
Id = a.Id, Id = a.Id,
Text = a.Text Text = a.Text,
Question=a.Question
}).ToList() }).ToList()
}).ToList() }).ToList()
}; };
@ -170,12 +179,14 @@ namespace Web.Areas.Admin.Controllers
} }
[HttpPost] [HttpPost]
public async Task<IActionResult> Edit(QuestionnaireViewModel viewModel) public async Task<IActionResult> Edit(EditQuestionnaireViewModel viewModel)
{ {
var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>(); var questionTypes = Enum.GetValues(typeof(QuestionType))
.Cast<QuestionType>()
.Select(e => new SelectListItem { Value = e.ToString(), Text = e.ToString() });
ViewBag.QuestionTypes = questionTypes;
ViewBag.QuestionTypes = new SelectList(questionTypes);
if (ModelState.IsValid) if (ModelState.IsValid)
{ {
// Retrieve the existing questionnaire from the database // Retrieve the existing questionnaire from the database
@ -190,77 +201,149 @@ namespace Web.Areas.Admin.Controllers
existingQuestionnaire.Title = viewModel.Title; existingQuestionnaire.Title = viewModel.Title;
existingQuestionnaire.Description = viewModel.Description; existingQuestionnaire.Description = viewModel.Description;
var Question = viewModel.Questions.ToList(); // Update or add new questions
if(Question.Count()!=0)
{
foreach (var questionViewModel in viewModel.Questions) foreach (var questionViewModel in viewModel.Questions)
{ {
var existingQuestion = existingQuestionnaire.Questions.SingleOrDefault(q => q.Id == questionViewModel.Id);
var existingQuestion = existingQuestionnaire.Questions.FirstOrDefault(q => q.Id == questionViewModel.Id);
if (existingQuestion != null) if (existingQuestion != null)
{ {
existingQuestion.Text = questionViewModel.Text; existingQuestion.Text = questionViewModel.Text;
existingQuestion.Type = questionViewModel.Type; existingQuestion.Type = questionViewModel.Type;
// Update answers bool newAnswersAdded = false; // Flag to track if new answers were added
// Check if the question has any answers
// Loop through each answer in the view model
foreach (var answerViewModel in questionViewModel.Answers) foreach (var answerViewModel in questionViewModel.Answers)
{ {
// Check if the answer already exists
var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id); var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
if (existingAnswer != null) if (answerViewModel.Id==0)
{ {
existingAnswer.Text = answerViewModel.Text;
existingAnswer.QuestionId = answerViewModel.QuestionId;
}
else
{
// Handle adding new answers if necessary
existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text }); existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text });
}
}
}
} }
} else if(existingAnswer !=null)
else
{
foreach (var questionViewModel in viewModel.Questions)
{ {
var existingQuestion = existingQuestionnaire.Questions.FirstOrDefault(q => q.Id == questionViewModel.Id);
if (existingQuestion != null)
{
existingQuestion.Text = questionViewModel.Text;
existingQuestion.Type = questionViewModel.Type;
// Update answers
foreach (var answerViewModel in questionViewModel.Answers)
{
var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
if (existingAnswer != null)
{
existingAnswer.Text = answerViewModel.Text; existingAnswer.Text = answerViewModel.Text;
existingAnswer.QuestionId = answerViewModel.QuestionId; }
}
//// Add newly answers that exist only in the view model
//foreach (var answerViewModel in questionViewModel.Answers.Where(av => existingQuestion.Answers.All(ea => ea.Id != av.Id)))
//{
// existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text });
// newAnswersAdded = true; // Set flag to true
//}
// If new answers were added, remove any null references
if (newAnswersAdded)
{
existingQuestion.Answers.RemoveAll(a => a == null);
}
} }
else else
{ {
// Handle adding new answers if necessary // Add new question with its answers
existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text }); var newQuestion = new Question
} {
} Text = questionViewModel.Text,
Type = questionViewModel.Type,
Answers = questionViewModel.Answers?.Select(a => new Answer { Text = a.Text }).ToList() ?? new List<Answer>()
};
existingQuestionnaire.Questions.Add(newQuestion);
} }
} //if (existingQuestion != null)
//{
// existingQuestion.Text = questionViewModel.Text;
// existingQuestion.Type = questionViewModel.Type;
// //var answerId = existingQuestion.Answers.Select(x => x.Id).ToList();
// // Update or add new answers
// //foreach (var answerViewModel in questionViewModel.Answers)
// //{
// // var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
// // if (existingAnswer != null)
// // {
// // existingAnswer.Text = answerViewModel.Text;
// // }
// // else
// // {
// // // Handle adding new answers if necessary
// // existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text });
// // }
// //}
// if (questionViewModel.Answers != null)
// {
// // Update or add new answers
// foreach (var answerViewModel in questionViewModel.Answers)
// {
// var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
// if (existingAnswer != null)
// {
// // Update existing answer
// existingAnswer.Text = answerViewModel.Text;
// }
// else
// {
// foreach (var newanswers in questionViewModel.Answers)
// {
// existingQuestion.Answers.Add(new Answer { Text = newanswers.Text });
// }
// // Check if the answer with the same text already exists
// //var answerWithSameText = existingQuestion.Answers.FirstOrDefault(a => a.Text == answerViewModel.Text);
// //if (answerWithSameText == null)
// //{
// // // Add new answer only if it doesn't exist with the same text
// //}
// //else
// //{
// // // Optionally handle the case where an answer with the same text already exists
// // // You can choose to do nothing, show a message, or take any other action
// //}
// }
// }
// }
//}
//else
//{
// // Add new question with its answers
// var newQuestion = new Question
// {
// Text = questionViewModel.Text,
// Type = questionViewModel.Type,
// Answers = questionViewModel.Answers.Select(a => new Answer { Text = a.Text }).ToList()
// };
// existingQuestionnaire.Questions.Add(newQuestion);
//}
} }
// Update questions // Remove any questions that are not in the view model
var questionIdsInViewModel = viewModel.Questions.Select(q => q.Id);
var questionsToRemove = existingQuestionnaire.Questions.Where(q => !questionIdsInViewModel.Contains(q.Id)).ToList();
foreach (var questionToRemove in questionsToRemove)
{
existingQuestionnaire.Questions.Remove(questionToRemove);
}
// Save changes to the database // Save changes to the database
_questionnaire.Update(existingQuestionnaire); _questionnaire.Update(existingQuestionnaire);
@ -270,7 +353,7 @@ namespace Web.Areas.Admin.Controllers
return RedirectToAction("Index"); return RedirectToAction("Index");
} }
// If the model state is not valid, return to the edit view with the existing model // If ModelState is not valid, re-display the form with validation errors
return View(viewModel); return View(viewModel);
} }
@ -318,7 +401,7 @@ namespace Web.Areas.Admin.Controllers
_questionnaire.commitAsync(); _questionnaire.commitAsync();
return Json(new { success = true, message = "Item deleted successfully" }); return Json(new { success = true, message = "Item deleted successfully" });
TempData["Success"] = "Questionnaire deleted successfully";
} }
} }

6
Web/Areas/Admin/Views/Questionnaire/Create.cshtml
View file

@ -63,7 +63,7 @@
</div> </div>
<button type="button" id="add-question-btn" class="btn btn-md btn-success mb-3"><i class="bi bi-plus-lg"></i> Add New Question </button> <button type="button" id="add-question-btn" class="btn btn-md btn-success mb-3"><i class="bi bi-plus-lg"></i> Add New Question </button>
<hr class="border border-primary border-3 opacity-75">
<div class="mt-3"> <div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
| <a asp-action="Index" class="btn btn-info">Back to list</a> | <a asp-action="Index" class="btn btn-info">Back to list</a>
@ -119,7 +119,7 @@
newQuestionHtml += `<div class="container-ms ml-5 mr-5 p-4 px-4 gy-5 ">`; newQuestionHtml += `<div class="container-ms ml-5 mr-5 p-4 px-4 gy-5 ">`;
newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`; newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
newQuestionHtml += `<label class="h3">Create Answers:</label>`; newQuestionHtml += `<label class="h3">Create Answers:</label>`;
newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-3 opacity-75">`; newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr <hr class="border border-primary border-1 opacity-35">`;
newQuestionHtml += `<label>Answer 1</label>`; newQuestionHtml += `<label>Answer 1</label>`;
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`; newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`;
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2"><i class="bi bi-plus-lg"></i> Add Answer</button>`; newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2"><i class="bi bi-plus-lg"></i> Add Answer</button>`;
@ -130,7 +130,7 @@
// Add Remove Question button // Add Remove Question button
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`; newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
newQuestionHtml += `<hr <hr class="border border-primary border-3 opacity-75">` newQuestionHtml += `<hr <hr class="border border-primary border-1 opacity-35">`
newQuestionHtml += `</div>`; newQuestionHtml += `</div>`;
$("#questions-container .form-group").append(newQuestionHtml); $("#questions-container .form-group").append(newQuestionHtml);

127
Web/Areas/Admin/Views/Questionnaire/Delete.cshtml
View file

@ -55,7 +55,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p id="deleteMessage">Are you sure you want to delete this item?</p> <p id="deleteMessage">Are you sure you want to delete this <span class="badge badge-danger">@Model.Title</span>questionnaire</p>
<p class="text-danger">If you delete, you can't recover it.</p> <p class="text-danger">If you delete, you can't recover it.</p>
<input type="text" class="form-control" id="deleteConfirmation" placeholder="Type the questionnaire name to confirm"> <input type="text" class="form-control" id="deleteConfirmation" placeholder="Type the questionnaire name to confirm">
</div> </div>
@ -68,27 +68,7 @@
</div> </div>
@* <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item?</p>
<p class="text-danger">if you delete, you can't recover back</p>
<input type="text" class="form-control" id="deleteConfirmation" placeholder="Type the questionnaire name to confirm">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" id="deleteButton" disabled>Delete</button>
</div>
</div>
</div>
</div> *@
<!-- Delete Confirmation Modal --> <!-- Delete Confirmation Modal -->
@ -111,57 +91,7 @@
<partial name="_ValidationScriptsPartial" /> <partial name="_ValidationScriptsPartial" />
} }
<script> <script>
// $(document).ready(function () {
// var itemId = @Model.Id; // Assuming you can get the item ID from the model
// // Enable delete button when the input matches the item name
// $('#deleteConfirmation').on('input', function () {
// var itemName = '@Model.Title'; // Item name from the model
// var inputText = $(this).val().trim().toLowerCase();
// var isMatch = inputText === itemName.toLowerCase();
// $('#deleteButton').prop('disabled', !isMatch);
// });
// // Clear input and disable button when modal is hidden
// $('#deleteModal').on('hidden.bs.modal', function () {
// $('#deleteConfirmation').val('');
// $('#deleteButton').prop('disabled', true);
// });
// // Delete button click event
// $('#deleteButton').on('click', function () {
// // Make an AJAX request to delete the item
// $.ajax({
// url: '/admin/Questionnaire/Delete/' + itemId,
// type: 'POST', // or 'DELETE' if you have a dedicated delete action
// success: function (result) {
// // Hide the confirmation details
// $('#deleteConfirmation').hide();
// $('#deleteButton').hide();
// // Show the success message
// $('#deleteMessage').text('the questionnaire deleted successfully.').show();
// // Show the modal
// $('#deleteModal').modal('show');
// // Automatically close the modal after 4 seconds
// setTimeout(function () {
// $('#deleteModal').modal('hide');
// // Redirect to the index action method after closing the modal
// window.location.href = '/admin/Questionnaire/Index';
// }, 3000);
// },
// error: function (error) {
// // Handle error
// $('#deleteMessage').text('Failed to delete item.').show();
// // Show the modal
// $('#deleteModal').modal('show');
// // Automatically close the modal after 4 seconds
// setTimeout(function () {
// $('#deleteModal').modal('hide');
// }, 4000);
// }
// });
// });
// });
$(document).ready(function () { $(document).ready(function () {
var itemId = @Model.Id; // Assuming you can get the item ID from the model var itemId = @Model.Id; // Assuming you can get the item ID from the model
@ -170,6 +100,7 @@
var itemName = '@Model.Title'; // Item name from the model var itemName = '@Model.Title'; // Item name from the model
var inputText = $(this).val().trim().toLowerCase(); var inputText = $(this).val().trim().toLowerCase();
var isMatch = inputText === itemName.toLowerCase(); var isMatch = inputText === itemName.toLowerCase();
// var space = $(this).val.space();
$('#deleteButton').prop('disabled', !isMatch); $('#deleteButton').prop('disabled', !isMatch);
}); });
@ -198,7 +129,7 @@
$('#deleteModal').modal('hide'); $('#deleteModal').modal('hide');
// Redirect to the index action method after closing the modal // Redirect to the index action method after closing the modal
window.location.href = '/admin/Questionnaire/Index'; window.location.href = '/admin/Questionnaire/Index';
}, 3000); }, 1000);
}, },
error: function (error) { error: function (error) {
// Handle error // Handle error
@ -208,7 +139,7 @@
// Automatically close the modal after 4 seconds // Automatically close the modal after 4 seconds
setTimeout(function () { setTimeout(function () {
$('#deleteModal').modal('hide'); $('#deleteModal').modal('hide');
}, 3000); }, 1000);
} }
}); });
}); });
@ -217,54 +148,6 @@
</script> </script>
@* <script>
$(document).ready(function () {
var itemId = @Model.Id; // Assuming you can get the item ID from the model
// Enable delete button when the input matches the item name
$('#deleteConfirmation').on('input', function () {
var itemName = '@Model.Title'; // Item name from the model
var inputText = $(this).val().trim().toLowerCase();
var isMatch = inputText === itemName.toLowerCase();
$('#deleteButton').prop('disabled', !isMatch);
});
// Clear input and disable button when modal is hidden
$('#deleteModal').on('hidden.bs.modal', function () {
$('#deleteConfirmation').val('');
$('#deleteButton').prop('disabled', true);
});
// Delete button click event
$('#deleteButton').on('click', function () {
// Make an AJAX request to delete the item
$.ajax({
url: '/admin/Questionnaire/Delete/' + itemId,
type: 'POST', // or 'DELETE' if you have a dedicated delete action
success: function (result) {
// Handle success
$('#deleteMessage').text('Item deleted successfully.');
$('#deleteModal').modal('show');
setTimeout(function () {
$('#deleteModal').modal('hide');
// Redirect to the index action method after closing the modal
window.location.href = '/admin/Questionnaire/Index';
}, 3000);
},
error: function (error) {
// Handle error
$('#deleteMessage').text('Failed to delete item.');
$('#deleteModal').modal('show');
setTimeout(function () {
$('#deleteModal').modal('hide');
}, 3000);
}
});
});
});
</script> *@
} }

324
Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
View file

@ -1,4 +1,4 @@
@model QuestionnaireViewModel @model EditQuestionnaireViewModel
@{ @{
ViewData["Title"] = "Edit"; ViewData["Title"] = "Edit";
@ -7,288 +7,126 @@
<div class="container mt-4"> <div class="container mt-4">
<div class="card justify-content-center p-4 shadow rounded"> <div class="card justify-content-center p-4 shadow rounded">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Create Survey</h5> <h5 class="card-title">Edit Survey</h5>
<div class="row"> <div class="row">
<!-- 12 columns for textboxes --> <form asp-action="Edit">
<input type="hidden" asp-for="Id" />
<form asp-action="Edit" asp-controller="Questionnaire"> <div class="form-group">
<div asp-validation-summary="All" class="text-danger"></div>
<div class="mb-3 col-12">
<label asp-for="Title" class="control-label"></label> <label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" /> <input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span> <span asp-validation-for="Title" class="text-danger"></span>
</div> </div>
<div class="mb-3 col-12"> <div class="form-group">
<label asp-for="Description" class="control-label"></label> <label asp-for="Description" class="control-label"></label>
<textarea asp-for="Description" class="form-control"></textarea> <textarea asp-for="Description" class="form-control"></textarea>
<span asp-validation-for="Description" class="text-danger"></span> <span asp-validation-for="Description" class="text-danger"></span>
</div> </div>
<div class="container p-5 px-4 gy-5 shadow bg-body-tertiary rounded">
<div id="questions-container"> <div id="questionsContainer">
@for (int i = 0; i < Model.Questions.Count; i++)
<h3>Create Questions</h3>
<div class="form-group px-4 gy-5 ">
@for (int i = 0; i < Model.Questions?.Count; i++)
{ {
<div class="question-group" data-question-index="@i"> <div class="question">
<label>Question @(i + 1)</label> <input type="hidden" asp-for="Questions[i].Id" />
<textarea name="Questions[@i].Text" class="form-control">@Model.Questions[i].Text</textarea> <div class="form-group">
<select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type"> <label asp-for="Questions[i].Text" class="control-label"></label>
<input asp-for="Questions[i].Text" class="form-control" />
<!-- Include options for question types... --> <span asp-validation-for="Questions[i].Text" class="text-danger"></span>
<div class="container-sm"></div> </div>
</select> <div class="form-group">
<label asp-for="Questions[i].Type" class="control-label"></label>
<div class="answers-container"> <select asp-for="Questions[i].Type" asp-items="@ViewBag.QuestionTypes" class="form-control"></select>
<label>Answers:</label> <span asp-validation-for="Questions[i].Type" class="text-danger"></span>
@for (int j = 0; j < Model.Questions?[i].Answers?.Count; j++) </div>
<div class="answers">
@for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
{ {
<div class="answer-group"> <div class="answer">
<input type="text" name="Questions[@i].Answers[@j].Text" class="form-control" value="@Model.Questions?[i]?.Answers?[j]?.Text" /> <input type="hidden" asp-for="Questions[i].Answers[j].Id" />
<button type="button" class="btn btn-sm btn-danger remove-answer">Remove Answer</button> <div class="form-group">
<label asp-for="Questions[i].Answers[j].Text" class="control-label"></label>
<input asp-for="Questions[i].Answers[j].Text" class="form-control" />
<span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
</div> </div>
} <button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>
<!-- Add a hidden field to address the required field validation -->
<input type="hidden" name="Questions[@i].Answers" />
</div>
<button type="button" class="btn btn-sm btn-danger remove-question">Remove Question</button>
</div> </div>
} }
</div> </div>
<button type="button" class="btn btn-primary addAnswer">Add Answer</button>
<button type="button" class="btn btn-danger removeQuestion">Remove Question</button>
</div>
}
</div> </div>
<button type="button" id="add-question-btn" class="btn btn-md btn-primary mb-3">Add New Question</button> <button type="button" class="btn btn-primary" id="addQuestion">Add Question</button>
<button type="submit" class="btn btn-primary">Update</button>
<div class="mt-3">
<button type="submit" class="btn btn-primary">Submit</button>
| <a asp-action="Index" class="btn btn-info">Back to list</a>
</div>
</div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr />
<hr />
@section Scripts { @section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
<script>
CKEDITOR.replace("Description");
</script>
@{
<partial name="_ValidationScriptsPartial" />
}
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
@* <script>
$(document).ready(function () {
var questionIndex = @Model.Questions?.Count;
$("#add-question-btn").click(function () {
var newQuestionHtml = `
<div class="question-group" data-question-index="${questionIndex}">
<label>Question ${questionIndex + 1}</label>
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
<br>
<label class=h5>Select question type</label>
<select name="Questions[${questionIndex}].Type" class="form-control question-type">`;
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
for (var i = 0; i < questionTypes.length; i++) {
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
}
newQuestionHtml += `</select>`;
// Add answers input fields
newQuestionHtml += `<div class="container-ms ml-5 mr-5 p-4 px-4 gy-5 ">`;
newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
newQuestionHtml += `<label class="h3">Create Answers:</label>`;
newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-3 opacity-75">`;
newQuestionHtml += `<label>Answer 1</label>`;
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`;
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2">Add Answer</button>`;
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger remove-answer mt-2" style="display:none">Remove Answer</button><br><hr>`;
newQuestionHtml += `</div> `;
newQuestionHtml += `</div>`;
newQuestionHtml += `</div> `;
// Add Remove Question button
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question">Remove Question</button>`;
newQuestionHtml += `<hr <hr class="border border-primary border-3 opacity-75">`
newQuestionHtml += `</div>`;
$("#questions-container .form-group").append(newQuestionHtml);
questionIndex++;
});
// Add answer dynamically without "Add Answer" button
$("#questions-container").on("click", ".add-answer", function () {
var questionIndex = $(this).closest('.answers-container').data('question-index');
var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;
var answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone();
answerGroup.find('input').val(''); // Clear input values
answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button
answerGroup.data('answer-index', answerIndex);
answerGroup.find('label').text(`Answer ${answerIndex + 1}`);
answerGroup.find('input').attr('name', `Questions[${questionIndex}].Answers[${answerIndex}].Text`);
$(this).closest('.answers-container').append(answerGroup);
});
// Remove answer dynamically
$("#questions-container").on("click", ".remove-answer", function () {
$(this).closest('.answer-group').remove();
});
// Remove question dynamically
$("#questions-container").on("click", ".remove-question", function () {
$(this).closest('.question-group').remove();
});
});
</script> *@
@* <script>
$(document).ready(function () {
var questionIndex = @Model.Questions?.Count;
$("#add-question-btn").click(function () {
var newQuestionHtml = `
<div class="question-group" data-question-index="${questionIndex}">
<label>Question ${questionIndex + 1}</label>
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
<label class=h5>Select question type</label>
<select name="Questions[${questionIndex}].Type" class="form-control question-type">`;
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
for (var i = 0; i < questionTypes.length; i++) {
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
}
newQuestionHtml += `</select>`;
// Add answers input fields
newQuestionHtml += `<div class="container-ms ml-5 mr-5 p-4 px-4 gy-5 ">`;
newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
newQuestionHtml += `<label class="h3">Create Answers:</label>`;
newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-3 opacity-75">`;
newQuestionHtml += `<label>Answer 1</label>`;
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`;
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2">Add Answer</button>`;
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger remove-answer mt-2" style="display:none">Remove Answer</button><br><hr>`;
newQuestionHtml += `</div> `;
newQuestionHtml += `</div>`;
newQuestionHtml += `</div> `;
// Add Remove Question button
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question">Remove Question</button>`;
newQuestionHtml += `<hr class="border border-primary border-3 opacity-75">`
newQuestionHtml += `</div>`;
$("#questions-container .form-group").append(newQuestionHtml);
questionIndex++;
});
// Add answer dynamically without "Add Answer" button
$("#questions-container").on("click", ".add-answer", function () {
var questionIndex = $(this).closest('.answers-container').data('question-index');
var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;
var answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone();
answerGroup.find('input').val(''); // Clear input values
answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button
answerGroup.data('answer-index', answerIndex);
answerGroup.find('label').text(`Answer ${answerIndex + 1}`);
answerGroup.find('input').attr('name', `Questions[${questionIndex}].Answers[${answerIndex}].Text`);
$(this).closest('.answers-container').append(answerGroup);
});
// Remove answer dynamically
$("#questions-container").on("click", ".remove-answer", function () {
$(this).closest('.answer-group').remove();
});
// Remove question dynamically
$("#questions-container").on("click", ".remove-question", function () {
$(this).closest('.question-group').remove();
});
});
</script> *@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
// Handle the "Add Question" button // Function to add a new answer
$("#add-question-btn").click(function () { $(document).on('click', '.addAnswer', function () {
var questionIndex = $("#questions-container .question-group").length; var questionContainer = $(this).closest('.question');
var newQuestionIndex = questionContainer.index();
var newQuestionHtml = ` // Correctly find the length of answers for the specific question
<div class="question-group"> var newAnswerIndex = questionContainer.find('.answers .form-group').length;
<label>Question ${questionIndex + 1}</label>
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
<br>
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
<option value="">Select Question Type</option>
<!-- Add options based on your question type enum -->
</select>
<div class="answers-container"> var answerHtml = `
<label>Answers:</label> <div class="form-group">
<div class="answer-group"> <label class="control-label">Answer Text</label>
<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="Answer 1" /> <input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>
<button type="button" class="btn btn-sm btn-danger remove-answer" style="display:none">Remove Answer</button>
</div>
<input type="hidden" name="Questions[${questionIndex}].Answers" />
</div>
</div>`; </div>`;
$("#questions-container").append(newQuestionHtml); // Append the new answer to the specific question
questionContainer.find('.answers').append(answerHtml);
}); });
// Handle the "Add Answer" button // Function to remove an answer
$("#questions-container").on("click", ".add-answer", function () { $(document).on('click', '.removeAnswer', function () {
var answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone(); $(this).closest('.form-group').remove();
answerGroup.find('input').val(''); // Clear input values
answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button
$(this).closest('.answers-container').append(answerGroup);
});
// Handle the "Remove Answer" button
$("#questions-container").on("click", ".remove-answer", function () {
$(this).closest('.answer-group').remove();
});
// Handle the "Remove Question" button
$("#questions-container").on("click", ".remove-question", function () {
$(this).closest('.question-group').remove();
}); });
}); });
</script> </script>
@* this script is working for adding mutiple answers for a question *@
@* <script>
$(document).ready(function () {
// Function to add a new answer
$(document).on('click', '.addAnswer', function () {
var questionContainer = $(this).closest('.question');
var newQuestionIndex = questionContainer.index();
var newAnswerIndex = questionContainer.find('.answers .form-group').length; // Correct way to find the length
var answerHtml = `
<div class="form-group">
<label class="control-label">Answer Text</label>
<input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
</div>`;
$(this).siblings('.answers').append(answerHtml);
});
// Function to remove an answer
$(document).on('click', '.removeAnswer', function () {
$(this).closest('.form-group').remove();
});
});
</script>
*@
} }

20
Web/Areas/Admin/Views/Questionnaire/Index.cshtml
View file

@ -12,17 +12,18 @@
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Questionnaire list</h4> <h4 class="card-title">Questionnaire list</h4>
<p> <p>
<a asp-action="Create" class="btn btn-primary">Create New</a> <a asp-action="Create" class="btn btn-primary"><span><i class="bi bi-plus-square-fill"></i></span> Create New</a>
</p> </p>
<table class="table table-responsive d-block"> <table class="table table-responsive d-block table-light table-hover">
<thead class="w-auto"> <thead class="w-auto">
<tr> <tr>
<th scope="col">Id</th> <th scope="col">Id</th>
<th scope="col">Title</th> <th scope="col">Title</th>
<th scope="col">Description</th> <th scope="col">Description</th>
<th scope="col">Number of questions</th>
<th scope="col">Total Question</th> <th scope="col">Total Question</th>
<th scope="col"> <span class="badge badge-primary">Questions</span> | <span class="badge badge-info">Type</span> | <span class="badge badge-success">Answers </span></th>
<th scope="col" class="d-flex justify-content-end">Action</th> <th scope="col" class="d-flex justify-content-end">Action</th>
</tr> </tr>
</thead> </thead>
@ -33,15 +34,20 @@
<td>@item.Id</td> <td>@item.Id</td>
<td> @item.Title</td> <td> @item.Title</td>
<td>@item.Description</td> <td>@Html.Raw(item.Description)</td>
<td> <td>
<span class="badge p-1 m-1 bg-primary shadow-sm"> Total Questions:@item.Questions?.Count()</span> @* <button type="button" class="btn btn-primary btn-sm">
</button> *@
<span class="badge shadow rounded text-bg-primary p-2">
Questions <span class="badge text-bg-secondary shadow rounded p-1">@item.Questions?.Count()</span>
</span>
</td> </td>
<td class="h5"> <td class="h5">
@foreach (var question in item.Questions) @foreach (var question in item.Questions.Take(1))
{ {
<span class="badge p-1 m-1 bg-primary shadow-sm"> Question:@question.Text</span> <span class="badge p-1 m-1 bg-primary shadow-sm"> Question:@question.Text</span>
@ -49,6 +55,8 @@
foreach (var answer in question.Answers) foreach (var answer in question.Answers)
{ {
<span class="badge p-1 m-1 bg-success shadow-sm"> Asnwer:@answer.Text</span> <span class="badge p-1 m-1 bg-success shadow-sm"> Asnwer:@answer.Text</span>
} }
} }

23
Web/ViewModel/QuestionnaireVM/EditQuestionnaireViewModel.cs Normal file
View file

@ -0,0 +1,23 @@
using Model;
using System.ComponentModel.DataAnnotations;
namespace Web.ViewModel.QuestionnaireVM
{
public class EditQuestionnaireViewModel
{
public EditQuestionnaireViewModel()
{
Questions = new List<Question>();
}
public int Id { get; set; }
[Required]
[Display(Name ="Questionnaire title")]
public string? Title { get; set; }
[Required]
public string? Description { get; set; }
public List<Question>? Questions { get; set; }
}
}

3
Web/Views/Shared/_Layout.cshtml
View file

@ -25,6 +25,9 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li> </li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Admin" asp-controller="Admin" asp-action="Index">Admin</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>