I have a drop-down list to select languages and it works. My question is if a language is selected and doesn't have any information in the database.
How do I show a message, saying "No officer speaks this language."? I tried using Console.WriteLine
in an if statement and the message wasn't shown when I selected a language that has no information in the database. I'm not sure if I placed it in the wrong spot or that wouldn't work. Any help is appreciated.
View:
@model IEnumerable<Language>
@{
ViewData["Title"] = "FLIP";
}
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<form id="languageForm" method="post" action="/Home/Results">
<select name="LanguageList" id="LanguageList">
<option Value=""> 1) Select a Language . . .</option>
<option value="American Sign English (ASE)">American Sign English (ASE)</option>
<option value="American Sign Language (ASL)">American Sign Language (ASL)</option>
<option value="Arabic: Algerian">Arabic: Algerian</option>
<option value="Arabic: Egyptian">Arabic: Egyptian</option>
<option value="Awadhi">Awadhi</option>
<option value="Azerbaijani">Azerbaijani</option>
<option value="Bengali">Bengali</option>
<option value="Bhojpuri">Bhojpuri</option>
<option value="Chinese: Cantonese">Chinese: Cantonese</option>
<option value="Chinese: Fukein">Chinese: Fukein</option>
<option value="Chinese: Jinyu">Chinese: Jinyu</option>
<option value="Chinese: Mandarin">Chinese: Mandarin</option>
<option value="Chinese: Min Nan">Chinese: Min Nan</option>
<option value="Chinese: Wu">Chinese: Wu</option>
<option value="Creole">Creole</option>
<option value="Creole-Jamaican">Creole-Jamaican</option>
<option value="Czech">Czech</option>
<option value="Dutch">Dutch</option>
<option value="Esperanza">Esperanza</option>
<option value="Estonian">Estonian</option>
<option value="Farsi">Farsi</option>
<option value="French">French</option>
<option value="Gaelic">Gaelic</option>
<option value="German">German</option>
<option value="Greek">Greek</option>
<option value="Hausa">Hausa</option>
<option value="Hebrew">Hebrew</option>
<option value="Hindi">Hindi</option>
<option value="Hmong">Hmong</option>
<option value="Hungarian">Hungarian</option>
<option value="Icelandic">Icelandic</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Kannada">Kannada</option>
<option value="Korean">Korean</option>
<option value="Lao">Lao</option>
<option value="Latin">Latin</option>
<option value="Maithili">Maithili</option>
<option value="Marathi">Marathi</option>
<option value="Malayalam">Malayalam</option>
<option value="Native American: Blackfoot">Native American: Blackfoot</option>
<option value="Native American: Cheyenne">Native American: Cheyenne</option>
<option value="Native American: Chippewa">Native American: Chippewa</option>
<option value="Native American: Cree">Native American: Cree</option>
<option value="Native American: Dakota">Native American: Dakota</option>
<option value="Native American: Lakota">Native American: Lakota</option>
<option value="Native American: Lenape">Native American: Lenape</option>
<option value="Native American: Navajo">Native American: Navajo</option>
<option value="Native American: Ojibwi">Native American: Ojibwii</option>
<option value="Native American: Oneida">Native American: Oneida</option>
<option value="Native American: Onodaga">Native American: Onodaga</option>
<option value="Native American: Paivte">Native American: Paivte</option>
<option value="Native American: Shoshoni">Native American: Shoshoni</option>
<option value="Native American: Sioux">Native American: Sioux</option>
<option value="Niger-Congo: Akan">Niger-Congo: Akan</option>
<option value="Niger-Congo: Twi">Niger-Congo: Twi</option>
<option value="Norwegian">Norwegian</option>
<option value="Oriya">Oriya</option>
<option value="Panjabi">Panjabi</option>
<option value="Patois">Patois</option>
<option value="Polish">Polish</option>
<option value="Portuguese">Portuguese</option>
<option value="Romanian">Romanian</option>
<option value="Russian">Russian</option>
<option value="Serbian">Serbian</option>
<option value="Serbo-croatian">Serbo-croatian</option>
<option value="Sign Language">Sign Language</option>
<option value="Sindhi">Sindhi</option>
<option value="Slovaic(Slovak)">Slovaic(Slovak</option>
<option value="Spanish">Spanish</option>
<option value="Sunda">Sunda</option>
<option value="Swedish">Swedish</option>
<option value="Tagalog">Tagalog</option>
<option value="Tamil">Tamil</option>
<option value="Telugu">Telugu</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Ukrainian">Ukrainian</option>
<option value="Urdu">Urdu</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<button type="submit" id="searchButton">Search</button>
</form>
@if (Model != null && Model.Any())
{
<br />
<h6>Click a OfficerName in the grid below to list detail information on how to contact the officer.</h6>
<h6>Click a Column Heading to sort the grid</h6>
<table class="table table-bordered table-striped" style="width:100%;
background-color: lightgray; border:1px solid black; border-color:black ">
<thead>
<tr>
<th style="color:blue">Name</th>
<th style="color:blue">Fluency</th>
</tr>
</thead>
@foreach (var lang in Model)
{
<tr>
<td>@lang.LanguageName</td>
<td>@lang.Fluency</td>
</tr>
}
</table>
}
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<script>
$('#selectedLanguage').change(function () {
$('#languageForm').button();
});
</script>
</body>
</html>
Controller:
public IActionResult Test()
{
List<string> lang = _Db.Languages.Select(s => s.LanguageName).Distinct().ToList();
ViewBag.Languages = lang;
return View();
}
[HttpPost]
public IActionResult Results(string LanguageList)
{
List<Language> Languages;
if (string.IsNullOrEmpty(LanguageList))
{
Languages = null;
}
else
{
IQueryable<Language> query = _Db.Languages;
if (!string.IsNullOrEmpty(LanguageList))
{
query = query.Where(s => s.LanguageName == LanguageList);
}
Languages = query.ToList();
}
ViewBag.SelectedLanguage = Languages;
ViewBag.Languages = _Db.Languages.Select(s => s.LanguageName).Distinct().ToList();
return View("Test", Languages);
}
Update: Optimize the code
You can render part of the view using AJAX way
View
@model IEnumerable<Language>
@{
ViewData["Title"] = "FLIP";
}
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<div id="div1">
<select id="mySelect">
<option Value=""> 1) Select a Language . . .</option>
<option value="American Sign English (ASE)">American Sign English (ASE)</option>
<option value="American Sign Language (ASL)">American Sign Language (ASL)</option>
<option value="Arabic: Algerian">Arabic: Algerian</option>
<option value="Arabic: Egyptian">Arabic: Egyptian</option>
<option value="Awadhi">Awadhi</option>
<option value="Azerbaijani">Azerbaijani</option>
<option value="Bengali">Bengali</option>
<option value="Bhojpuri">Bhojpuri</option>
<option value="Chinese: Cantonese">Chinese: Cantonese</option>
<option value="Chinese: Fukein">Chinese: Fukein</option>
<option value="Chinese: Jinyu">Chinese: Jinyu</option>
<option value="Chinese: Mandarin">Chinese: Mandarin</option>
<option value="Chinese: Min Nan">Chinese: Min Nan</option>
<option value="Chinese: Wu">Chinese: Wu</option>
<option value="Creole">Creole</option>
<option value="Creole-Jamaican">Creole-Jamaican</option>
<option value="Czech">Czech</option>
<option value="Dutch">Dutch</option>
<option value="Esperanza">Esperanza</option>
<option value="Estonian">Estonian</option>
<option value="Farsi">Farsi</option>
<option value="French">French</option>
<option value="Gaelic">Gaelic</option>
<option value="German">German</option>
<option value="Greek">Greek</option>
<option value="Hausa">Hausa</option>
<option value="Hebrew">Hebrew</option>
<option value="Hindi">Hindi</option>
<option value="Hmong">Hmong</option>
<option value="Hungarian">Hungarian</option>
<option value="Icelandic">Icelandic</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Kannada">Kannada</option>
<option value="Korean">Korean</option>
<option value="Lao">Lao</option>
<option value="Latin">Latin</option>
<option value="Maithili">Maithili</option>
<option value="Marathi">Marathi</option>
<option value="Malayalam">Malayalam</option>
<option value="Native American: Blackfoot">Native American: Blackfoot</option>
<option value="Native American: Cheyenne">Native American: Cheyenne</option>
<option value="Native American: Chippewa">Native American: Chippewa</option>
<option value="Native American: Cree">Native American: Cree</option>
<option value="Native American: Dakota">Native American: Dakota</option>
<option value="Native American: Lakota">Native American: Lakota</option>
<option value="Native American: Lenape">Native American: Lenape</option>
<option value="Native American: Navajo">Native American: Navajo</option>
<option value="Native American: Ojibwi">Native American: Ojibwii</option>
<option value="Native American: Oneida">Native American: Oneida</option>
<option value="Native American: Onodaga">Native American: Onodaga</option>
<option value="Native American: Paivte">Native American: Paivte</option>
<option value="Native American: Shoshoni">Native American: Shoshoni</option>
<option value="Native American: Sioux">Native American: Sioux</option>
<option value="Niger-Congo: Akan">Niger-Congo: Akan</option>
<option value="Niger-Congo: Twi">Niger-Congo: Twi</option>
<option value="Norwegian">Norwegian</option>
<option value="Oriya">Oriya</option>
<option value="Panjabi">Panjabi</option>
<option value="Patois">Patois</option>
<option value="Polish">Polish</option>
<option value="Portuguese">Portuguese</option>
<option value="Romanian">Romanian</option>
<option value="Russian">Russian</option>
<option value="Serbian">Serbian</option>
<option value="Serbo-croatian">Serbo-croatian</option>
<option value="Sign Language">Sign Language</option>
<option value="Sindhi">Sindhi</option>
<option value="Slovaic(Slovak)">Slovaic(Slovak</option>
<option value="Spanish">Spanish</option>
<option value="Sunda">Sunda</option>
<option value="Swedish">Swedish</option>
<option value="Tagalog">Tagalog</option>
<option value="Tamil">Tamil</option>
<option value="Telugu">Telugu</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Ukrainian">Ukrainian</option>
<option value="Urdu">Urdu</option>
<option value="Vietnamese">Vietnamese</option>
</select>
</div>
<div id="div2">
<table id="example1" class="table table-bordered table-striped" style="width:100%;
background-color: lightgray; border:1px solid black; border-color:black ">
</table>
</div>
<script src=https://code.jquery.com/jquery-3.6.0.min.js></script>
<script>
// jQuery
$(document).ready(function () {
$("#mySelect").change(function () {
$.ajax({
type: 'POST',
url: '/Home/Results',
datatype: 'JSON',
contentType: 'application/json',
data: { 'LanguageList': $("#mySelect").val() },
data: JSON.stringify($("#mySelect").val()),
success: function (data) {
if (data.length != 0) {
$('#example1').empty();
$.each(data, function (i, item) {
var rows1 = "<thead>" +
"<tr>" +
"<th>Name</th>" +
"<th>Fluency</th>" +
"</tr>" +
"</thead>";
var rows2 = "<tbody>" +
"<tr>" +
"<td>" + item.languageName + "</td>" +
"<td>" + item.fluency + "</td>" +
"</tr>" +
"</tbody>";
$('#example1').append(rows1);
$('#example1').append(rows2);
});
}
else if ($("#mySelect").val() == "") {
var rows = "<p>" + "Select a language" + "</p>";
$('#example1').empty();
$('#example1').append(rows);
}
else {
var rows = "<p>" + "No officer speaks this language." + "</p>";
$('#example1').empty();
$('#example1').append(rows);
}
},
error: function (data) {
var rows = "<p>" + "Some Errors in DB." + "</p>";
$('#example1').empty();
$('#example1').append(rows);
}
});
});
});
</script>
</body>
</html>
Controller
public IActionResult Test()
{
return View(); // no need to set Viewbag
}
[HttpPost]
public IActionResult Results([FromBody]string LanguageList)
{
List<Language> languages;
if (string.IsNullOrEmpty(LanguageList))
{
languages = new List<Language>(); // To initialize the list
}
else
{
languages = _dbContext.Languages
.Where(s => s.LanguageName == LanguageList)
.ToList();
}
//return View("Test", languages);
return Json(languages);
}
You should control the logic in the view.
Controller
public IActionResult Test()
{
return View(); // no need to set Viewbag
}
[HttpPost]
public IActionResult Results(string LanguageList)
{
ViewBag.SelectedLanguage = LanguageList; // If none is selected, set to control the logic
List<Language> languages;
if (string.IsNullOrEmpty(LanguageList))
{
languages = new List<Language>(); // To initialize the list
}
else
{
languages = _dbContext.Languages
.Where(s => s.LanguageName == LanguageList)
.ToList();
}
return View("Test", languages);
}
}
View
…
Your form
…
@if(ViewBag.SelectedLanguage == null)
{
<p> </p>
}
else if (Model != null && Model.Any())
{
<br />
<h6>Click a OfficerName in the grid below to list detail information on how to contact the officer.</h6>
<h6>Click a Column Heading to sort the grid</h6>
<table class="table table-bordered table-striped" style="width:100%;
background-color: lightgray; border:1px solid black; border-color:black ">
<thead>
<tr>
<th style="color:blue">Name</th>
<th style="color:blue">Fluency</th>
</tr>
</thead>
@foreach (var lang in Model)
{
<tr>
<td>@lang.LanguageName</td>
<td>@lang.Fluency</td>
</tr>
}
</table>
}
else
{
<p>No officer speaks this language.</p>
}
Test