How to iterate ViewBag names inside foreach loop?

Question

I managed to find in SO questions regarding looping through ViewBag objects, but my issue is how to use iteration to name ViewBag inside of it.

But starting from the beginning. Inside of my Razor View I have a code, that triggers scripts depending on passed ViewBag:

@if (ViewBag.TermsChecked == "false")
{
    <script type="text/javascript">
        document.getElementById("termschecked").style.border = "2px solid #E24941";
    </script>
}
else if (ViewBag.TermsChecked == "true")
{
    <script type="text/javascript">
        document.getElementById("termschecked").style.border = "unset";
    </script>
}

@if (ViewBag.LoginCaptchaChecked == "false")
{
    <script type="text/javascript">
        document.getElementById("logincaptchachecked").style.border = "2px solid #E24941";
    </script>
}
else if (ViewBag.LoginCaptchaChecked == "true")
{
    <script type="text/javascript">
        document.getElementById("logincaptchachecked").style.border = "unset";
    </script>
}

@if (ViewBag.RegisterCaptchaChecked == "false")
{
    <script type="text/javascript">
        document.getElementById("registercaptchachecked").style.border = "2px solid #E24941";
    </script>
}
else if (ViewBag.RegisterCaptchaChecked == "true")
{
    <script type="text/javascript">
        document.getElementById("registercaptchachecked").style.border = "unset";
    </script>
}

@if (ViewBag.CaptchaChecked == "false")
{
    <script type="text/javascript">
        document.getElementById("captchachecked").style.border = "2px solid #E24941";
    </script>
}
else if (ViewBag.CaptchaChecked == "true")
{
    <script type="text/javascript">
        document.getElementById("captchachecked").style.border = "unset";
    </script>
}

To keep it DRY I want to create a loop through ViewBag names, but I am not sure how to pass item into ViewBag name in the loop. Until now I tried 2 approaches already, that did not work:

@{string[] viewbags = new string[] { ViewBag.TermsChecked, ViewBag.LoginCaptchaChecked, ViewBag.RegisterCaptchaChecked, ViewBag.CaptchaChecked };}


@foreach (string item in viewbags)
{
    if (item == "false")
    {
        <script type="text/javascript">
            document.getElementById("@item.ToLower()").style.border = "2px solid #E24941";
        </script>
    }
    else if (item == "true")
    {
        <script type="text/javascript">
            document.getElementById("@item.ToLower()").style.border = "unset";
        </script>
    }
}

and

@{string[] viewbags = new string[] { "TermsChecked", "LoginCaptchaChecked", "RegisterCaptchaChecked", "CaptchaChecked" }}


@foreach (string item in viewbags)
{
    @if (ViewBag.item == "false")
    {
        <script type="text/javascript">
            document.getElementById("@item.ToLower()").style.border = "2px solid #E24941";
        </script>
    }
    else if (ViewBag.TermsChecked == "true")
    {
        <script type="text/javascript">
            document.getElementById("@item.ToLower()").style.border = "unset";
        </script>
    }
}

Both are not triggering any script, like they should do.

Answer 1

You can try to modify your Viewbag like :

public IActionResult Index()
{
    List<Item> items = new List<Item>();
    items.Add(new Item { key = "LoginCaptchaChecked", value = "false" });
    items.Add(new Item { key = "RegisterCaptchaChecked", value = "true" });
    ViewBag.showHidelist = items;
    return View();
}
public class Item { 
    public string key { get; set; }

    public string value { get; set; }
}

And in page you can dynamically set the border with :

@foreach (var item in ViewBag.showHidelist)
{
    if (@item.value=="true")
    {
        <script type="text/javascript">
            document.getElementById("@item.key.ToLower()").style.border = "2px solid #E24941";
        </script>
    }
    else
    {
        <script type="text/javascript">
            document.getElementById("@item.key.ToLower()").style.border = "unset";
        </script>
    }

}