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));
}