Want to show/hide Div Query - JavaScript - based on what a sql query returns

Question

My project is a MVC c# Asp.NET project. I want to check if an attachment has been loaded, if there is an attachment it shows the div that contains the attachment. If there is no attachment, I want to show the div where you can upload an attachment. How to change the Javascript code for this?

My code in the view:

    <tr>
                    <th colspan="1" style="background-color:lightsteelblue">
                        Attachments:
                    </th>
                    <th colspan="11">
                        <div id="ifAttachment" style="display: none">
                            <input type="file" name="ImageFile2" />

                        </div>
                        <div id="ifNOAttachment" style="display: none">
                            @{
                                var Files2 = (ViewBag.Files as string[]);

                                if (Files2 != null && Files2.Any())
                                {
                                    foreach (var file in Files2)
                                    {
                                        <br />
                                        @Html.ActionLink(file, "DownloadFile2", new { fileName2 = file })
                                        <br />
                                    }
                                }
                                else
                                {
                                    <label>No File(s) to Download</label>
                                }
                            }
                        </div>
                    </th>
                </tr>

For the Div /JS code:

     <script type="text/javascript">
$(function () {
    $("#ifAttachment").change(function () {
        if ($(this).val() == "Y") {
            $("#showsomething").show();
        } 
    });
});

Answer 1

You already have the logic in there to render HTML conditionally. I don't even think you need Javascript for this. You just have to move some divs around.

I like to organize my variables outside my HTML.

@{var Files2 = ViewBag.Files as string[]}

You would then use the if check you already have in your code to conditionally render the HTML elements.

            <tr>
                <th colspan="1" style="background-color:lightsteelblue">
                    Attachments:
                </th>
                <th colspan="11">
                  @if (Files2 != null && Files2.Any())
                            {
                                foreach (var file in Files2)
                                {
                                    <br />
                                    @Html.ActionLink(file, "DownloadFile2", 
                                        new { fileName2 = file })
                                    <br />
                                }
                            }
                            else
                            {
                                <label>No File(s) to Download</label>
                                 <div>
                                   <input type="file" name="ImageFile2" />
                                 </div>
                            }
                        }

                </th>
            </tr>

Hopefully that works for you!