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">×</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">×</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">×</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>