Autocomplete Box mit JavaScript und C# in MVC
7/8/2022 10:22:21 PM
by Chris 808
Der JS und HTML Code ist von hier übernommen: https://www.codexworld.com/autocomplete-textbox-multiple-values-jquery-php-mysql/
Erstmal die Vorlage
``` HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
```
``` JS
<script>
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#skills" ).bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 1,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
// $.getJSON("skills.php", { term : extractLast( request.term )},response); //orginal
.getJSON("/Blog/Tags", { term : extractLast( request.term )},response); //meine anpassung
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
```
Nun die Anpassungen
Erstmal das Formular
``` C#
@using(Html.BeginForm("NewPosting", "Blog", FormMethod.Post, new {id="Form1"})){
var Tags = string.Empty;
foreach (var tag in Model.Tags) { Tags += tag.Name + ", "; }
<div class="text-center">
<h1 class="display-4">Edit Posting</h1>
<p>
<!-- ... -->
<div class="row">
<div class="col-lg-12"><input type="submit" value="Submit" class="btn btn-primary"></div>
</div>
</p>
</div>
}
```
Dann meine Klasse mit den Werten, in diesem Fall sind es die Tags hier im Blog.
``` C#
public class Tag
{
public int Id { get; set; }
public string Name { get; set; }
public virtual ICollection<Posting> Postings { get; set; }
}
}
```
Dann der Code im Controller. Die Funktion Tag
``` C#
public class BlogController : Controller
{
[Produces("application/json")]
public JsonResult Tags(string term) // Das JavaScript fragt mit Blog/Tags?term=#### an
{
var jsonTags = new List<string>();
foreach(var tag in Postings.GetTags())
{
if (string.IsNullOrWhiteSpace(term) || tag.Name.Contains(term))
{
jsonTags.Add(tag.Name);
}
}
return Json(jsonTags);
}
[Authorize]
public IActionResult NewPosting(Posting posting, string Tags)
{
CreateTags(posting, Tags);
if (posting.IsValid() && Postings.SavePosting(posting, User, false))
{
return RedirectToAction(nameof(ViewPosting), new { id = posting.Id });
}
return View(posting);
}
private void CreateTags(Posting posting, string Tags)
{
posting.Tags = new List<Tag>();
if (string.IsNullOrEmpty(Tags)) { return; }
var tags = Tags.Split(',').ToList();
var OldTags = Postings.GetTags();
foreach (var tag in tags)
{
var trimed = tag.Trim();
if (string.IsNullOrWhiteSpace(trimed))
continue;
if (OldTags.Any(item => item.Name == trimed))
{
posting.Tags.Add(OldTags.First(item => item.Name == trimed));
}
else {
posting.Tags.Add(new Tag() { Name = trimed });
}
}
}
}
```
About author
Moin, hier sollte ein Text über mich stehen, ggf reiche ich den noch nach, ggf nicht. Manchmal ist es doch auch ganz schön keine Infos über einen Author zu haben :-)