Search code examples
c#razorasp.net-core-mvc.net-6.0

How to show a message if selected language is not valid


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

Solution

  • 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

    enter image description here