Autocomplete Box mit JavaScript und C# in MVC

7/8/2022 10:22:21 PM by Chris 955
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

Chris

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 :-)


Scroll to Top