70 lines
2.8 KiB
Plaintext
70 lines
2.8 KiB
Plaintext
@model DetailsViewModel
|
|
|
|
@using (Html.BeginForm("Details", "Home", FormMethod.Post )) {
|
|
@Html.AntiForgeryToken()
|
|
@Html.HiddenFor(m => m.VideoId)
|
|
|
|
<div class="mb-3">
|
|
@Html.LabelFor(m => m.Title)
|
|
@Html.TextBoxFor(m => m.Title, new { @class = "form-control", @required = "required" })
|
|
@Html.ValidationMessageFor(m => m.Title)
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
@Html.LabelFor(m => m.Tags)
|
|
@foreach (var tag in Model.Tags)
|
|
{
|
|
<span class="badge rounded-pill text-bg-secondary" data-tag-name="@tag">
|
|
@Html.DisplayFor(m => tag)
|
|
<button type="button" class="btn-close btn-sm" aria-label="Close" onclick="removeTag('@tag')"></button>
|
|
</span>
|
|
}
|
|
<input type="text" id="newTag" class="form-control mt-2" placeholder="Add new tag" />
|
|
@for (int i = 0; i < Model.Tags.Count; i++)
|
|
{
|
|
<input type="hidden" class="hiddenTag" name="Tags[@i]" value="@Model.Tags.ElementAt(i)" />
|
|
}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Update Video</button>
|
|
}
|
|
|
|
@section Scripts {
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#newTag').on('keypress', function(e) {
|
|
if (e.which === 13) { // Enter key
|
|
e.preventDefault();
|
|
var tagName = $(this).val().trim();
|
|
if (tagName) {
|
|
$(this).val(''); // Clear input
|
|
// check if a hidden input for this tag already exists
|
|
var existingTag = $(`input[value='${tagName}']`);
|
|
if (existingTag.length > 0) {
|
|
return;
|
|
}
|
|
var tagCount = $('.hiddenTag').length;
|
|
// Add the tag to a new hidden input
|
|
var hiddenInput = `<input type="hidden" class="hiddenTag" name="Tags[${tagCount}]" value="${tagName}" />`;
|
|
|
|
|
|
var tagHtml = `<span class="badge rounded-pill text-bg-secondary" data-tag-name="${tagName}">
|
|
${tagName}
|
|
<button type="button" class="btn-close btn-sm" aria-label="Close" onclick="removeTag('${tagName}')"></button>
|
|
</span>`;
|
|
$(this).after(hiddenInput);
|
|
$(this).before(tagHtml);
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
window.removeTag = function(tagName) {
|
|
// Remove the hidden input for the tag
|
|
$(`input[value='${tagName}']`).remove();
|
|
// Remove the badge from the UI
|
|
$(`span[data-tag-name='${tagName}']`).remove();
|
|
};
|
|
});
|
|
</script>
|
|
} |