public override void Process(TagHelperContext context, TagHelperOutput output) { var api_SearchPath = TmsUtility.GetAPIPath(Type); output.TagName = ""; var host = Context.HttpContext.Request.Host; var mainDivTag = new TagBuilder("div"); var inputDivTag = new TagBuilder("div"); inputDivTag.Attributes.Add("style", $"width:{Width}px"); inputDivTag.Attributes.Add("class", "input-group"); var dropdownDiv = new TagBuilder("div"); dropdownDiv.Attributes.Add("class", "drop-down-group"); dropdownDiv.Attributes.Add("style", "display:none"); var hiddenElement = _htmlGenerator.GenerateHidden(Context, For.ModelExplorer, For.Name, For.ModelExplorer.Model, false, ""); var Id = hiddenElement.Attributes["id"]; var inputSpan = new TagBuilder("span"); inputSpan.Attributes.Add("class", "input-group-btn"); var searchSpan = new TagBuilder("span"); searchSpan.Attributes.Add("class", "fa fa-search"); var clearSpan = new TagBuilder("span"); clearSpan.Attributes.Add("class", "fa fa-eraser"); var loadingSpan = new TagBuilder("span"); loadingSpan.Attributes.Add("class", "fas fa-spinner fa-spin"); var searchBtn = new TagBuilder("button"); searchBtn.Attributes.Add("class", "btn btn-default"); searchBtn.Attributes.Add("type", "button"); searchBtn.Attributes.Add("id", Id + "_imgSearch"); searchBtn.InnerHtml.AppendHtml(searchSpan); var clearBtn = new TagBuilder("button"); clearBtn.Attributes.Add("class", "btn btn-default"); clearBtn.Attributes.Add("type", "button"); clearBtn.Attributes.Add("id", Id + "_imgClear"); clearBtn.Attributes.Add("style", "display:none"); clearBtn.InnerHtml.AppendHtml(clearSpan); var loadingBtn = new TagBuilder("button"); loadingBtn.Attributes.Add("class", "btn btn-default"); loadingBtn.Attributes.Add("type", "button"); loadingBtn.Attributes.Add("id", Id + "_imgLoading"); loadingBtn.Attributes.Add("style", "display:none"); loadingBtn.InnerHtml.AppendHtml(loadingSpan); inputSpan.InnerHtml.AppendHtml(searchBtn); inputSpan.InnerHtml.AppendHtml(loadingBtn); inputSpan.InnerHtml.AppendHtml(clearBtn); var inputElement = new TagBuilder("input"); inputElement.Attributes.Add("class", "form-control"); inputElement.Attributes.Add("type", "text"); inputElement.Attributes.Add("id", Id + "_input"); inputElement.Attributes.Add("value", Input_Value); inputElement.Attributes.Add("placeholder", Default_Input); inputDivTag.InnerHtml.AppendHtml(inputElement); var selectElement = new TagBuilder("select"); selectElement.Attributes.Add("id", Id + "_ddl"); selectElement.Attributes.Add("class", "form-control"); selectElement.Attributes.Add("style", $"width:{Width - 40}px"); dropdownDiv.InnerHtml.AppendHtml(selectElement); inputDivTag.InnerHtml.AppendHtml(dropdownDiv); inputDivTag.InnerHtml.AppendHtml(inputSpan); mainDivTag.Attributes.Add("id", Id + "_utb"); mainDivTag.InnerHtml.AppendHtml(inputDivTag); mainDivTag.InnerHtml.AppendHtml(hiddenElement); var scriptText = $@" $(function () {{ var dd_Activated = false; $('#{Id}_imgSearch').click(function () {{ var searchValue = $('#{Id}_input').val(); if (searchValue.trim().length === 0) {{ alert('Search parameter is empty!'); }} else {{ $('#{Id}_imgSearch').hide(); $('#{Id}_imgLoading').show(); $.ajax({{ url: '{Context.HttpContext.Request.Scheme}://{Context.HttpContext.Request.Host}/{api_SearchPath}'+searchValue, dataType: 'json', }}).done(function (data) {{ if (data.length === 0) {{ alert('No Resuls Found'); $('#{Id}').val(''); $('#{Id}_utb').find('#{Id}_input').val(''); $('#{Id}_imgSearch').show(); $('#{Id}_imgLoading').hide(); }} else if (data.length === 1) {{ $('#{Id}_utb').find('#{Id}_input').val(data[0].text); $('#{Id}').val(data[0].upn); $('#{Id}_imgSearch').hide(); $('#{Id}_imgLoading').hide(); $('#{Id}_imgClear').show(); }} else {{ if (data.length > 100) {{ alert('There are more than 100 Results.Please modify search parameter'); }} var initialSelect = {{ id: 0, text: 'Select', }} result = $.map(data, function (x) {{ return {{ id: x.value, text: x.text, }}; }}); result.unshift(initialSelect); $('#{Id}_ddl').select2({{ placeholder: 'Select an employee', data: result, }}); dd_Activated = true; $('#{Id}_utb').find('#{Id}_input').hide(); $('#{Id}_utb').find('div.drop-down-group').show(); $('#{Id}_imgSearch').hide(); $('#{Id}_imgLoading').hide(); $('#{Id}_imgClear').show(); $('#{Id}_ddl').on('change.select2', function () {{ var selectedText = $('#{Id}_ddl').select2('data'); if (selectedText[0]) {{ $('#{Id}_utb').find('#{Id}_input').val(selectedText[0].text); $('#{Id}').val(selectedText[0].id); }} else {{ $('#{Id}_utb').find('#{Id}_input').val(''); $('#{Id}').val(''); }} $('#{Id}_utb').find('div.drop-down-group').hide(); $('#{Id}_utb').find('#{Id}_input').show(); $('#{Id}_imgSearch').hide(); $('#{Id}_imgLoading').hide(); $('#{Id}_imgClear').show(); }}) }} }}) .fail(function () {{ alert('An error occured in API request'); $('#{Id}').val(''); $('#{Id}_utb').find('#{Id}_input').val(''); $('#{Id}_imgSearch').show(); $('#{Id}_imgLoading').hide(); }}); }} }}) $('#{Id}_imgClear').click(function () {{ $('#{Id}').val(''); $('#{Id}_utb').find('#{Id}_input').val(''); if (dd_Activated) {{ $('#{Id}_ddl').html('').select2({{ data: [{{ id: '', text: '' }}] }}); $('#{Id}_ddl').val([]).trigger('change'); $('#{Id}_utb').find('div.drop-down-group').hide(); }} $('#{Id}_utb').find('#UPN_input').show(); $('#{Id}_imgSearch').show(); $('#{Id}_imgClear').hide(); }}); if('{Input_Value}'.length!==0){{ $('#{Id}_imgSearch').hide(); $('#{Id}_imgLoading').hide(); $('#{Id}_imgClear').show(); }} }}) " ; output.Content.AppendHtml(mainDivTag); _scriptHelper.AddScriptText(scriptText); }
public IActionResult Sample() { var model = new SampleViewModel(); model.LineChart = new LineChart() { Labels = new List <string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }, Title = "Testing", X_Lable = "X Axis", Y_Lable = "Y Axis", DataSet = new List <LineChartDataSet>() { new LineChartDataSet() { Data = new List <int>() { 12, 19, 3, 5, 2, 3 }, BackgroundColor = TmsUtility.GetRGBStringValue(Color.Red), BorderColor = TmsUtility.GetRGBStringValue(Color.Red), Data_Lable = "Red", IsFill = false }, new LineChartDataSet() { Data = new List <int>() { 2, 20, 9, 0, 1, 3 }, BackgroundColor = TmsUtility.GetRGBStringValue(Color.Blue), BorderColor = TmsUtility.GetRGBStringValue(Color.Blue), Data_Lable = "Blue", IsFill = false } } }; model.PieChart = new PieDoughnutChart() { Labels = new List <string>() { "Red", "Blue", "Yellow" }, Title = "Pie Chart", DataSet = new List <PieDoughnutChartDataSet>() { new PieDoughnutChartDataSet() { Data = new List <int>() { 12, 19, 3 }, BackgroundColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Plum), TmsUtility.GetRGBStringValue(Color.Yellow), TmsUtility.GetRGBStringValue(Color.Wheat) }, BorderColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Plum), TmsUtility.GetRGBStringValue(Color.Yellow), TmsUtility.GetRGBStringValue(Color.Wheat) }, Data_Lable = "Red", }, new PieDoughnutChartDataSet() { Data = new List <int>() { 2, 20, 9, 0, 1, 3 }, BackgroundColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Blue), TmsUtility.GetRGBStringValue(Color.Red), TmsUtility.GetRGBStringValue(Color.PowderBlue) }, BorderColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Blue), TmsUtility.GetRGBStringValue(Color.Red), TmsUtility.GetRGBStringValue(Color.PowderBlue) }, Data_Lable = "Blue", } } }; model.DoughnutChart = new PieDoughnutChart() { Labels = new List <string>() { "Red", "Blue", "Yellow" }, Title = "Doughnut Chart", DataSet = new List <PieDoughnutChartDataSet>() { new PieDoughnutChartDataSet() { Data = new List <int>() { 12, 19, 3 }, BackgroundColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Red), TmsUtility.GetRGBStringValue(Color.Yellow), TmsUtility.GetRGBStringValue(Color.Blue) }, BorderColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Red), TmsUtility.GetRGBStringValue(Color.Yellow), TmsUtility.GetRGBStringValue(Color.Blue) }, Data_Lable = "Red", }, new PieDoughnutChartDataSet() { Data = new List <int>() { 2, 20, 9, 0, 1, 3 }, BackgroundColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Blue), TmsUtility.GetRGBStringValue(Color.Red), TmsUtility.GetRGBStringValue(Color.PowderBlue) }, BorderColor = new List <string>() { TmsUtility.GetRGBStringValue(Color.Blue), TmsUtility.GetRGBStringValue(Color.Red), TmsUtility.GetRGBStringValue(Color.PowderBlue) }, Data_Lable = "Blue", } } }; return(View(model)); }