save and edit functionlity is enabled for the questionnaire
This commit is contained in:
parent
69810186eb
commit
729ffc869b
2 changed files with 79 additions and 33 deletions
|
|
@ -3,7 +3,27 @@
|
||||||
@{
|
@{
|
||||||
ViewData["Title"] = "Edit";
|
ViewData["Title"] = "Edit";
|
||||||
}
|
}
|
||||||
|
<style>
|
||||||
|
.question-separator {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-container {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-question-container {
|
||||||
|
margin: 0 10px; /* Adjust margin as needed */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-question {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
<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">
|
||||||
|
|
@ -22,12 +42,18 @@
|
||||||
<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="card shadow rounded">
|
<div class="card shadow rounded p-4">
|
||||||
<div id="questionsContainer">
|
<div id="questionsContainer">
|
||||||
@for (int i = 0; i < Model.Questions.Count; i++)
|
@for (int i = 0; i < Model.Questions.Count; i++)
|
||||||
{
|
{
|
||||||
|
<hr />
|
||||||
<div class="question">
|
<div class="question">
|
||||||
<input type="hidden" asp-for="Questions[i].Id" />
|
<input type="hidden" asp-for="Questions[i].Id" />
|
||||||
|
<div class="question-title">
|
||||||
|
@Model.Questions[i].Text
|
||||||
|
<button type="button" class="btn btn-primary editQuestion">Edit</button>
|
||||||
|
</div>
|
||||||
|
<div class="question-details" style="display: none;">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label asp-for="Questions[i].Text" class="control-label"></label>
|
<label asp-for="Questions[i].Text" class="control-label"></label>
|
||||||
<input asp-for="Questions[i].Text" class="form-control" />
|
<input asp-for="Questions[i].Text" class="form-control" />
|
||||||
|
|
@ -49,24 +75,20 @@
|
||||||
<span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
|
<span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
|
||||||
<button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
|
<button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-primary addAnswer">Add Answer</button>
|
<button type="button" class="btn btn-primary addAnswer">Add Answer</button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-success saveQuestion" style="display: none;">Save</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">Update</button>
|
<button type="submit" class="btn btn-primary">Update</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>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -75,6 +97,10 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -109,7 +135,27 @@
|
||||||
$(document).on('click', '.removeAnswer', function () {
|
$(document).on('click', '.removeAnswer', function () {
|
||||||
$(this).closest('.form-group').remove();
|
$(this).closest('.form-group').remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Function to toggle question edit mode
|
||||||
|
$(document).on('click', '.editQuestion', function () {
|
||||||
|
var questionContainer = $(this).closest('.question');
|
||||||
|
questionContainer.find('.question-title').hide();
|
||||||
|
questionContainer.find('.question-details').show();
|
||||||
|
questionContainer.find('.editQuestion').hide();
|
||||||
|
questionContainer.find('.saveQuestion').show();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Function to save question details
|
||||||
|
$(document).on('click', '.saveQuestion', function () {
|
||||||
|
var questionContainer = $(this).closest('.question');
|
||||||
|
questionContainer.find('.question-title').show();
|
||||||
|
questionContainer.find('.question-details').hide();
|
||||||
|
questionContainer.find('.editQuestion').show();
|
||||||
|
questionContainer.find('.saveQuestion').hide();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -141,8 +187,8 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
*@
|
|
||||||
|
} *@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
|
|
||||||
<td class="d-flex justify-content-end">
|
<td class="d-flex justify-content-end">
|
||||||
<a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-s"><i class="bi bi-trash"></i> Delete</a> |
|
<a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-s"><i class="bi bi-trash"></i> Delete</a> |
|
||||||
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-success btn-s"><i class="bi bi-pencil-square"></i> Edit</a>|
|
<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary"><i class="bi bi-pencil-square"></i> Edit</a>|
|
||||||
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-s"><i class="bi bi-pencil-square"></i> Details</a>
|
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-info btn-s"><i class="bi bi-pencil-square"></i> Details</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue