Files
Francescos.Recipes.World/Francesco.Recipes.World/Views/Recipe/AddInstruction.cshtml
T

62 lines
1.7 KiB
Plaintext

@model Francesco.Recipes.World.Models.BackendModels.Recipe.Recipe
@{
ViewData["Title"] = "Add Instructions";
}
<h1>Add Instructions to @Model.Name</h1>
<div class="instructions-list">
<h3>Existing Instructions</h3>
<ul>
@foreach (var instruction in Model.Instructions.OrderBy(i => i.Number))
{
<li>@instruction.Number. @instruction.Description</li>
}
</ul>
</div>
<div class="add-instruction-form">
<h3>Add New Instruction</h3>
<form id="instruction-form" method="post" asp-action="AddInstruction" asp-controller="Recipe">
<input type="hidden" name="recipeId" value="@Model.Id" />
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" name="description" required />
</div>
<button type="button" class="btn btn-primary" onclick="addInstructionToRecipe()">Add Instruction</button>
</form>
</div>
@section Scripts {
<script>
async function addInstructionToRecipe() {
event.preventDefault();
var form = document.getElementById('instruction-form');
var recipeId = form.querySelector('input[name="recipeId"]').value;
var description = form.querySelector('input[name="description"]').value;
var token = form.querySelector('input[name="__RequestVerificationToken"]').value;
var response = await fetch('/' + recipeId + '/AddInstruction', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'RequestVerificationToken': token
},
body: `recipeId=${encodeURIComponent(recipeId)}&description=${encodeURIComponent(description)}`
});
if (response.ok) {
location.reload();
} else {
alert('Failed to add instruction.');
}
}
</script>
}