Displaying ModelState Error in an AlertBox using JavaScript

Question

I have a ProductsController with an Index method. This Index method contains a.Where() part that looks through the database with the users input. (for example: "Apples, Banana's, Exotic, etc.") When there are no results found it throws an error: "Sequence contains no elements" which is logical.

When the errors throws, I want it to be displayed in an AlertBox. I have followed this thread but I can't seem to get the error to the View.

My Index Method:

        public ActionResult Index(string item = "APPE", int amount = 0)
        {
            var CurrentCulture = System.Threading.Thread.CurrentThread.CurrentCulture.Name;
            ViewData["Amount"] = amount; 
            //Uses the Logged in Username to match the items related to it's CompanyNr
            var LoggedUser = Convert.ToInt32(User.Identity.Name);
            Dr dr = _context.Dr.Where(x => x.CompanyNr == LoggedUser).First();
            var itemCheck = item != null ? item.ToUpper() : "";
            try
            {
                // It throws the Error right here. because there are no elements matching in _context.Th
                var currentCat = _context.Th.Where(x => x.CategoryCode.Contains(itemCheck)).First();

                Console.WriteLine("My currentCat is: " + currentCat.ToString());
                if (itemCheck == "")
                {
                    ViewData["Category"] = "All Products";
                }
                else
                {
                    //Displays the Categories on the Users chosen language
                    ViewData["Category"] = CurrentCulture switch
                    {
                        "en-US" => currentCat.NameEnglish,
                        "nl-NL" => currentCat.NameDutch,
                        "de-DE" => currentCat.NameGerman,
                        "da-DK" => currentCat.NameFrench,
                        _ => currentCat.NameEnglish,
                    };

                var SearchItem = _context.Products
                    .Where(x => x.CompanyNr == LoggedUser)
                    .Where(x => x.CategoryCode.Contains(itemCheck));

                #section A copy of the products for the users shopping cart called newProducts
                #endregion
                return View(newProducts);
                }

            catch (Exception ex)
            {
                //ex.Message contains "Sequence contains no elements"
                ModelState.AddModelError("Error", ex.Message);
                //return View("Index");
                return View("Index");
                
            }
        }

My View

        <div id="FilterList">
            <ul>
                <li>
                    <form method="get" asp-action="Index" asp-controller="Products">
                        <input type="hidden" name="item" value="" />
                        <button type="submit">@Localizer["Show All"]</button>
                    </form>
                </li>
            </ul>
            <ul>
                @foreach (var item in ViewData["Main_Items"] as IEnumerable<Project.Models.DataBase.Th>)
                {

                <li>
                    <form method="get" asp-action="Index" asp-controller="Products">
                        @switch (CurrentCulture)
                    {
                        case "nl-NL":
                            <input type="hidden" name="item" value="@item.CategoryCode.Trim()" />
                            <button type="submit">@item.NameDutch</button> break;
                        case "en-US":
                            <input type="hidden" name="item" value="@item.CategoryCode.Trim()" />
                            <button type="submit">@item.NameEnglish</button> break;
                        case "de-DE":
                            <input type="hidden" name="item" value="@item.CategoryCode.Trim()" />
                            <button type="submit">@item.NameGerman</button> break;
                        case "da-DK":
                            <input type="hidden" name="item" value="@item.CategoryCode.Trim()" />
                            <button type="submit">@item.NameFrench</button> break;
                        default:
                            <input type="hidden" name="item" value="@item.CategoryCode.Trim()" />
                            <button type="submit">@item.NameEnglish</button>
                        break;
                     }
                    </form>
                </li>            
                }
            </ul>
        </div>

The JavaScript that is supposed to show the AlertBox

/*If the model is not valid and there is more than 0 "Error", Show an Alert with it's error*/
@if (!ViewData.ModelState.IsValid && ViewData.ModelState["Error"].Errors.Count > 0)
{
    <text>
    $(document).ready(function () {
        alert('@ViewData.ModelState["Error"].Errors.First().ErrorMessage');
        /*It's not logging anything..*/
        console.log('@ViewData.ModelState["Error"].Errors.First().ErrorMessage');
    });
    </text>
}

I feel like i'm missing something important which I am not finding. I hope I have given enough explanation in both the code and my summary to help find the solution.

Answer 1

After my test, I found that there is no problem with your code, and it works very well for me. You can check your code based on my simple example below.

View:

  <form asp-action="Create">
        <div class="form-group">
            <label asp-for="Id" class="control-label"></label>
            <input asp-for="Id" class="form-control" />
        </div>
        <div class="form-group">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name" class="form-control" />
        </div>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
@section Scripts {

<script type="text/javascript">
       @if (!ViewData.ModelState.IsValid && ViewData.ModelState["Error"].Errors.Count > 0)
        {
            <text>
            $(document).ready(function () {
                alert('@ViewData.ModelState["Error"].Errors.First().ErrorMessage');
                /*It's not logging anything..*/
                console.log('@ViewData.ModelState["Error"].Errors.First().ErrorMessage');
            });
            </text>
        }
</script>
}

Action:

 public IActionResult Create()
    {
        return View();
    }
    [HttpPost]
    public IActionResult Create(Student student)
    {
        try
        {
            var m = _context.Student.Where(c => c.Name.Contains("bb")).First();
            return View();
        }
        catch (Exception ex)
        {

            ModelState.AddModelError("Error", ex.Message);
            return View("Create");
        }
 
    }

You can check as follow steps: