css - HTML elements are not going where I expect in ASP.NET MVC on .NET 4.8 - Stack Overflow

admin管理员组

文章数量:1346676

I've got an ASP.NET MVC project running on .NET Framework 4.8 - not ASP.NET Core MVC.

I have a support ticket to fix an upload issue with the page below. The upload issue is fixed, but I would like to clean up the form before submitting changes for review.

The elements of the web page above are added in "top-to-bottom" fashion using <p> blocks.

I've tried rewriting the HTML using <div> and <table> elements, but nothing I do will get the bottom part to line up. I was able to get the top half looking better.

I can't seem to figure out the size to use, but what is particularly disturbing me is that the <div class"row"> items are displaying as columns.

I have looked at Bootstrap examples, but they do not seem to work with the way this page is set up using the outer_grid with side-menu instructions.

I am trying to get the bottom boxes to be the same width as the top boxes, but I have not discovered the magic combination.

What have I done wrong? And how do I fix it?

@model Website1.Models.AssetManagerUploadModel
@{
    ViewBag.Title = "AddResource";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
    #outer_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #inner_grid {
        display: grid;
        grid-template-columns: 150px 200px;
        grid-gap: 15px;
        grid-column: 1/3;
    }

    #form_head {
        grid-column: 1/3;
    }

    .instructions ul li {
        list-style-type: circle !important;
    }

    .instructions ol li {
        list-style-type: decimal;
    }

    ul {
        padding-left: 20px !important;
    }
</style>

<script>
    function showMe(box, name) {
        const chboxs = document.getElementsByName(name);
        let vis1 = "none";
        let vis2 = "none";
        for (let i = 0; i < chboxs.length; i++)
        {
            if (chboxs[i].checked)
            {
                vis1 = "block";
                vis2 = "none";
                break;
            }
            else
            {
                vis1 = "none";
                vis2 = "block";
                break;
            }
        }
        document.getElementById(box).style.display = vis1;
        document.getElementById("FileToUploadDsp").style.display = vis2;
    }
    function GenerateTwo() {
        const cat1 = $("#CatOne").val();
        const cat2 = $("#CatTwo");
        $(cat2).find('option')
            .remove()
            .end();
        $.get("@Url.Action("GenerateTwo")?CatOne=" + cat1, (res,status) => {
            if (res.length > 0  && res[0]!= null) {
                $(cat2).show();
                $('#CatTwoBtn').show()
                $('#CatTwoLBL').show()
            }
            for (var i = 0; i < res.length && res[0] != null; i++) {
                $(cat2).append('<option value=\'' + res[i].trim() + '\'>' + res[i] + '</option>');
            }
        });

    };
    function GenerateThree() {
        const cat1 = $("#CatOne").val();
        const cat2 = $("#CatTwo").val();
        const cat3 = $('#CatThree')
        $(cat3).find('option')
            .remove()
            .end();
        $.get("@Url.Action("GenerateThree")?CatOne=" + cat1+"&CatTwo="+cat2, (res,status) => {
            if (res.length > 0 && res[0]!= null) {
                $(cat3).show();
                $('#CatThreeBtn').show()
                $('#CatThreeLBL').show()
            }
            for(var i = 0; i < res.length  && res[0]!= null; i++) {
                $(cat3).append('<option value=\'' + res[i].trim() + '\'>' + res[i] + '</option>');
            }
        });
    };
    function GenerateFour() {
        const cat1 = $("#CatOne").val();
        const cat2 = $("#CatTwo").val();
        const cat3 = $("#CatThree").val();
        const cat4 = $('#CatFour');
        $(cat4).find('option')
            .remove()
            .end();
        $.get("@Url.Action("GenerateFour")?CatOne=" + cat1+"&CatTwo="+cat2+"&CatThree="+cat3, (res,status) => {
            if (res.length > 0 && res[0]!= null) {
                $(cat4).show();
                $('#CatFourBtn').show()
                $('#CatFourLBL').show()
            }
            for(var i = 0; i < res.length && res[0]!= null; i++) {
                $(cat4).append('<option value=\'' + res[i].trim() + '\'>' + res[i] + '</option>');
            }
        });
    }
    function FileNameFocus() {
        $('#txtFileNameToDisplay').focus();
    }
    function TriggerTwo() {
        const val = $('#AddSectionTwo').val();
        console.log(val);
        $('#CatTwo').append('<option value ="' + val + '">' + val + '</option>');
        $("#CatTwo option:last").attr("selected", "selected");
    }
    function TriggerThree() {
        const val = $('#AddSectionThree').val();
        console.log(val);
        $('#CatThree').append('<option value ="' + val + '">' + val + '</option>');
        $("#CatThree option:last").attr("selected", "selected");
    }
    function TriggerFour() {
        const val = $('#AddSectionFour').val();
        console.log(val);
        $('#CatFour').append('<option value ="' + val + '">' + val + '</option>');
        $("#CatFour option:last").attr("selected", "selected");
    }
    $(document).ready(function() {
        $('#CatTwo').hide();
        $('#CatThree').hide();
        $('#CatFour').hide();
        $('#CatTwoBtn').hide();
        $('#CatThreeBtn').hide();
        $('#CatFourBtn').hide();
        $('#CatTwoLBL').hide();
        $('#CatThreeLBL').hide();
        $('#CatFourLBL').hide();
        var table = $('#DataTable').DataTable(
        {
            scrollY: 700,
            paging: false
        });
        GenerateTwo();
        showMe('ExternalYes', 'External');
    });
</script>
<div id="outer_grid">
    @using (Html.BeginForm("AddPDFResource", "AssetManager", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <h3 id="form_head">Add New Digital Resource</h3>
        @Html.AntiFeryToken();
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">Category</th>
                    <th scope="col">Selection</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">One</th>
                    <td>@Html.DropDownListFor(m => m.CategoryOne, new SelectList(Model.CategoryOneSelect), new { @onchange = "GenerateTwo()", @id = "CatOne" })</td>
                    <td></td>
                </tr>
                <tr id="CatTwoLBL">
                    <th scope="row">Two</th>
                    <td>@Html.DropDownListFor(m => m.CategoryTwo, new SelectList(new List<string>()), new { @onchange = "GenerateThree()", @id = "CatTwo" })</td>
                    <td><a id="CatTwoBtn" data-toggle="modal" data-target="#TriggerTwo">Add New Section</a></td>
                </tr>
                <tr id="CatThreeLBL">
                    <th scope="row">Three</th>
                    <td>@Html.DropDownListFor(m => m.CategoryThree, new SelectList(new List<string>()), new { @onchange = "GenerateFour()", @id = "CatThree" })</td>
                    <td><a id="CatThreeBtn" data-toggle="modal" data-target="#TriggerThree">Add New Section</a></td>
                </tr>
                <tr id="CatFourLBL">
                    <th scope="row">Four</th>
                    <td>@Html.DropDownListFor(m => m.CategoryFour, new SelectList(new List<string>()), new { @onchange = "FileNameFocus()", @id = "CatFour" })</td>
                    <td><a id="CatFourBtn" data-toggle="modal" data-target="#TriggerFour">Add New Section</a></td>
                </tr>
            </tbody>
        </table>
        <div id="inner_grid" class="container table">
            <div class="row" style="border:ridge;">
                <div class="col-w-100">Filename to Display</div>
                <div class="col-w-100">@Html.TextBoxFor(model => model.DisplayName, "", new { @placeholder = "Enter Name", required = "required", @id = "txtFileNameToDisplay" })</div>
            </div>
            <div class="row" style="border:groove;">
                <div class="col-w-50">
                    Image to Upload<br />
                    External? @Html.CheckBoxFor(model => model.External, new { onclick = "showMe('ExternalYes', 'External')" })
                </div>
                <div class="col-w-50">
                    <p id="FileToUploadDsp">@Html.TextBoxFor(model => model.FileToUpload, "", new { @type = "file" })</p>
                    <p id="ExternalYes">@Html.TextBoxFor(model => model.LinkToUpload, "", new { @placeholder = "Enter External Link" })</p>
                </div>
            </div>
            <div class="row" style="border:double;">
                <div class="col-w-50"><input type="submit" value="Upload" /></div>
                <div class="col-w-50">@ViewBag.Message</div>
            </div>
        </div>
    }
    <div style="padding:10px;">
        <h3>How To Upload A New Resource</h3><br />
        <h5><strong>Required Files:</strong></h5>
        <ul class="instructions">
            <li>A Page</li>
            <li>A File Name to Display</li>
            <li>Image to Upload OR External Link (Depending On the Page Selected</li>
        </ul>
        <h5>Steps:</h5>
        <ol class="instructions">
            <li>Select a Page</li>
            <li>Select a Year (For Pricing Order Forms Only)</li>
            <li>Enter File Name to Display</li>
            <li>Click External Checkbox for Pricing Order Forms Only</li>
            <li>Enter External Link for Pricing Order Forms Only</li>
            <li>Select Choose File to Navigate to the Image to Upload</li>
        </ol>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="TriggerTwo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Category For Section Two</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label>Section Name:</label><input type="text" id="AddSectionTwo" value="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="TriggerTwo()">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="TriggerThree">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Category For Section Three</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label>Section Name:</label><input type="text" id="AddSectionThree" value="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="TriggerThree()">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="TriggerFour">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Category For Section Four</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label>Section Name:</label> <input type="text" id="AddSectionFour" value="" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="TriggerFour()">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

本文标签： cssHTML elements are not going where I expect in ASPNET MVC on NET 48Stack Overflow