locked
Autopopulate TextBox/TextArea with Multiple Names in Razor Pages RRS feed

  • Question

  • User-190697402 posted

    Hi All,

    I want to autopopulate a textbox/textarea with mutliple selection. The names will be loaded from database.

    How can i acheive this in razor pages? The requirement is something similar like below 

    Any help would be appreciated.Thanks!

    Wednesday, April 14, 2021 6:51 AM

Answers

  • User1686398519 posted

    Hi teenajohn1989, 

    I want to autopopulate a textbox/textarea with mutliple selection. The names will be loaded from database.

    According to your needs, I wrote an example, you can refer to it.

    1. You need to reference the jquery-ui.js file.
    2. You can right-click wwwroot and select Add->Client-Side Library, then search for jqueryui and install it.

    Model

        public class AutopopulateModel
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

    AutopopulateTest.cshtml.cs

        public class AutopopulateTestModel : PageModel
        {
            private readonly DailyRazorPageDemoContext db;
            public AutopopulateTestModel(DailyRazorPageDemoContext _db)
            {
                db = _db;
            }
            public void OnGet()
            {
            }
            public JsonResult OnGetSearchValue(string search)
            {
                List<AutopopulateModel> allsearch = new List<AutopopulateModel>();
                if (!string.IsNullOrEmpty(search))
                {
                    allsearch = db.AutopopulateModel.Where(x => x.Name.Contains(search)).ToList();
                }
                return new JsonResult(allsearch);
            }
        }

    AutopopulateTest.cshtml

    @page
    @model DailyRazorPageDemo.Pages.AutopopulateTestModel
    <div class="input-group">
        <div class="input-group-prepend">
        </div>
        <input type="text" aria-label="First name" class="form-control autoinput" id="serachtag">
    </div>
    @section scripts{
        <script src="~/jqueryui/jquery-ui.js"></script>
        <script>
            var alltags = [];//Store the added tag
            function addTag(tag) {// add tag
                if (!IsExsistTag(tag)) {// if the tag is not exsist
                    alltags.push(tag);//push tagvalue
                    $('.input-group-prepend').append("<span class='input-group-text' data-toggle='tooltip'>" + tag +
                        "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x' viewBox='0 0 16 16'>" +
                        "<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg></span>");
                }
             }
            function IsExsistTag(tag) {//check the tag
                var isExsist = false;
                if (alltags.length != 0) {
                    isExsist = alltags.indexOf(tag)==-1?false:true;
                }
                return isExsist;
            }
            $("body").on("click", ".bi-x", function () {//remove the tag
                var deltag = $(this).parent().text();
                alltags.splice($.inArray(deltag, alltags), 1);
                $(this).parent().remove();
            });
            $("#serachtag").autocomplete({//bind autocomplete
                source: function (request, response) {
                    $.ajax({
                        url: "/AutopopulateTest?handler=SearchValue",
                        type: "GET",
                        data: { search: request.term },
                        success: function (data) {
                            console.log(data)
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name };
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    addTag(ui.item.value)//add tag
                }
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 15, 2021 4:51 AM

All replies

  • User-474980206 posted

    This feature is implemented with JavaScript. Google for JavaScript tag input. Pick the library based on what other JavaScript libraries you are using.

      https://www.jqueryscript.net/blog/best-tags-input.html

    Wednesday, April 14, 2021 2:36 PM
  • User1686398519 posted

    Hi teenajohn1989, 

    I want to autopopulate a textbox/textarea with mutliple selection. The names will be loaded from database.

    According to your needs, I wrote an example, you can refer to it.

    1. You need to reference the jquery-ui.js file.
    2. You can right-click wwwroot and select Add->Client-Side Library, then search for jqueryui and install it.

    Model

        public class AutopopulateModel
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

    AutopopulateTest.cshtml.cs

        public class AutopopulateTestModel : PageModel
        {
            private readonly DailyRazorPageDemoContext db;
            public AutopopulateTestModel(DailyRazorPageDemoContext _db)
            {
                db = _db;
            }
            public void OnGet()
            {
            }
            public JsonResult OnGetSearchValue(string search)
            {
                List<AutopopulateModel> allsearch = new List<AutopopulateModel>();
                if (!string.IsNullOrEmpty(search))
                {
                    allsearch = db.AutopopulateModel.Where(x => x.Name.Contains(search)).ToList();
                }
                return new JsonResult(allsearch);
            }
        }

    AutopopulateTest.cshtml

    @page
    @model DailyRazorPageDemo.Pages.AutopopulateTestModel
    <div class="input-group">
        <div class="input-group-prepend">
        </div>
        <input type="text" aria-label="First name" class="form-control autoinput" id="serachtag">
    </div>
    @section scripts{
        <script src="~/jqueryui/jquery-ui.js"></script>
        <script>
            var alltags = [];//Store the added tag
            function addTag(tag) {// add tag
                if (!IsExsistTag(tag)) {// if the tag is not exsist
                    alltags.push(tag);//push tagvalue
                    $('.input-group-prepend').append("<span class='input-group-text' data-toggle='tooltip'>" + tag +
                        "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x' viewBox='0 0 16 16'>" +
                        "<path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg></span>");
                }
             }
            function IsExsistTag(tag) {//check the tag
                var isExsist = false;
                if (alltags.length != 0) {
                    isExsist = alltags.indexOf(tag)==-1?false:true;
                }
                return isExsist;
            }
            $("body").on("click", ".bi-x", function () {//remove the tag
                var deltag = $(this).parent().text();
                alltags.splice($.inArray(deltag, alltags), 1);
                $(this).parent().remove();
            });
            $("#serachtag").autocomplete({//bind autocomplete
                source: function (request, response) {
                    $.ajax({
                        url: "/AutopopulateTest?handler=SearchValue",
                        type: "GET",
                        data: { search: request.term },
                        success: function (data) {
                            console.log(data)
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name };
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    addTag(ui.item.value)//add tag
                }
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 15, 2021 4:51 AM
  • User-190697402 posted

    Hi bruce,

    Thanks for the reply. :)

    Thursday, April 15, 2021 6:58 AM
  • User-190697402 posted

    Hi YihuiSun,

    Thank you so much for the detailed explanation.

     And one more doubt why the input text always populating with selected tag value. Is there anyway to reset that?

    Regards,

    Teena

    Thursday, April 15, 2021 7:01 AM
  • User-190697402 posted

    Hi YiHuiSun,

    I need one help.When i submit the form ,its not inserting the tag values to database.

    How can i insert this value to database and retrieve it in edit page?

    Sunday, May 9, 2021 8:59 AM