Make two views for sort logic one for show the instructions and the other for add Instruction

Francesco.Recipes.World/Views/Recipe/AddInstruction.cshtml

@@ -24,36 +24,38 @@
 			<label for="description">Description</label>
 			<input type="text" class="form-control" id="description" name="description" required />
 		</div>
-		<div class="form-group">
+		<button type="button" class="btn btn-primary" onclick="addInstructionToRecipe()">Add Instruction</button>
-			<label for="number">Number</label>
-			<input type="number" class="form-control" id="number" name="number" required min="1" />
-		</div>
-		<button type="submit" class="btn btn-primary" onclick="addInstructionToRecipe()">Add Instruction</button>
 	</form>
+
 </div>
 
 @section Scripts {
 	<script>
-		async function addInstructionToRecipe() {
+	async function addInstructionToRecipe() {
-			var form = document.getElementById('instruction-form');
+    event.preventDefault();
-			var recipeId = form.querySelector('input[name="recipeId"]').value;
-			var description = form.querySelector('input[name="description"]').value;
-			var number = form.querySelector('input[name="number"]').value;
 
-			var response = await fetch('/Recipe/' + recipeId + '/AddInstruction', {
+    var form = document.getElementById('instruction-form');
-				method: 'POST',
+    var recipeId = form.querySelector('input[name="recipeId"]').value;
-				headers: {
+    var description = form.querySelector('input[name="description"]').value;
-					'Content-Type': 'application/json'
+    var token = form.querySelector('input[name="__RequestVerificationToken"]').value;
-				},
+
-				body: JSON.stringify({ recipeId: recipeId, description: description, number: number })
+			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>
 
-			if (response.ok) {
-				location.reload();
-			} else {
-				alert('Failed to add instruction.');
-			}
-		}
-	</script>
 }
 

Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml

@@ -6,7 +6,7 @@
 			<div class="instruction-controls">
 				<input type="file" />
 				<textarea placeholder="Beschreibung" class="form-control">@Model[i].Description</textarea>
-				<button type="button" class="btn-delete">🗑️</button>
+				<button type="button" class="btn-delete" onclick="removeInstruction('@Model[i].Id')">🗑️</button>
 			</div>
 			<div class="instruction-actions">
 				<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model[i].Id')">⬆️</button>
@@ -68,6 +68,32 @@
 			}
 		}
 
+		async function removeInstruction(instructionId) {
+			if (!confirm('Möchtest du diesen Schritt wirklich löschen?')) return;
+
+			try {
+				const response = await fetch(`/${recipeId}/RemoveInstruction/${instructionId}`, {
+					method: 'POST',
+					headers: {
+						'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
+					}
+				});
+
+				if (response.ok) {
+					const element = document.getElementById(`instruction-${instructionId}`);
+					if (element) {
+						element.remove();
+					}
+				} else {
+					const error = await response.json();
+					alert(error.Error || 'Fehler beim Löschen der Anweisung.');
+				}
+			} catch (error) {
+				console.error('Fehler beim Löschen:', error);
+			}
+		}
+
+
 		function addInstruction() {
 			const container = document.getElementById('instructions-container');
 			const newInstructionHtml = `