MVC Entity Framework INDEX page format - asp.net-mvc

I have a new MVC Entity Framework Application. When it created the Index List page - it looks like the Headers are ran together. Have small size fields and the field names are longer than the fields. How to format that page to make Header spaced out so it doesn't all run together.
Could not post a pic - something like this - sorry the data line ran together on the past.
RE NUMINT RE NAME
1 I SHAWN NEWT
#model IEnumerable<MTSapp.Models.mts_rename>
#{ ViewBag.Title = "Index"; }
<h2>Index</h2>
<p> #Html.ActionLink("Create New", "Create") </p>
<table>
<tr>
<th> #Html.DisplayNameFor(model => model.A_RENO) </th>
<th> #Html.DisplayNameFor(model => model.A_INACT) </th>
<th> #Html.DisplayNameFor(model => model.A_NAME) </th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.A_RENO) </td>
<td> #Html.DisplayFor(modelItem => item.A_INACT) </td>
<td> #Html.DisplayFor(modelItem => item.A_NAME) </td>
</tr>
}
</table>

Is the page using a table or some type of grid? You may need to apply some CSS rules to get the page nicely formatted. Does the page have any CSS styling yet?

Related

Is there a way I can add and bind checkboxes to my MVC Table

I am trying to add a checkbox so I can selects a row from my list and from there use that row to generate a letter.
I was wondering how I would be able to add a checkbox and bind it to the data I have tried a few ways using something similar to:
checkbox(m => m[i].Lesson)
However it would never accept the i in brackets and come up with an error. below is the layout of my index for the lessons model currently.
Here is the Lessons Index:
#model IEnumerable<FinalMusicApp.Models.Lesson>
#{
ViewBag.Title = "Index";
}
<h2>Lessons</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm("Index", "Students", FormMethod.Get))
{
//Search options
<b>Search Options: </b> #Html.RadioButton("Option", "Instrument")<text>Instrument</text>#Html.RadioButton("Option", "Tutor")<text>Tutor</text>#Html.RadioButton("Option", "Term")<text>Term</text>#Html.TextBox("Search")
<input type="submit" name="submit" value="Search" />
}
<form method="post">
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.IsChecked)
</th>
<th>
#Html.DisplayNameFor(model => model.LessonDate)
</th>
<th>
#Html.DisplayNameFor(model => model.LessonTime)
</th>
<th>
#Html.DisplayNameFor(model => model.Duration.TimeTaken)
</th>
<th>
#Html.DisplayNameFor(model => model.Instrument.InstrumentName)
</th>
<th>
#Html.DisplayNameFor(model => model.Letter.Paid)
</th>
<th>
#Html.DisplayNameFor(model => model.Student.FullName)
</th>
<th>
#Html.DisplayNameFor(model => model.Tutor.TutorName)
</th>
<th>
CRUD
</th>
<th>
Make a letter
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBoxFor(modelItem => item.IsChecked)
</td>
<td>
#Html.DisplayFor(modelItem => item.LessonDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.LessonTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.Duration.TimeTaken)
</td>
<td>
#Html.DisplayFor(modelItem => item.Instrument.InstrumentName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Letter.Paid)
</td>
<td>
#Html.DisplayFor(modelItem => item.Student.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Tutor.TutorName)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.LessonId }) |
#Html.ActionLink("Details", "Details", new { id = item.LessonId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.LessonId })
</td>
<td>
#Html.ActionLink("Generate Letter", "Create", "Letters")
</td>
</tr>
}
</table>
</form>
I am trying to add a checkbox so I can selects a row from my list
Do you want something like below?
In the view add a checkbox, for example I use the property CourseName in my model instead, you can use your property:
#Html.CheckBox("CourseName", new { value = item.CourseName })
#Html.DisplayFor(modelItem => item.CourseName)
Then in the controller, we can get CourseName value, and get other property value accord to the CourseName, but we need load the list again, we cannot send the full list from view to controller :
var courserow = model.FirstOrDefault(m => m.CourseName == CourseName);
result:

How to render a table from a view in the footer section of _Layout view?

I am developing a solution to enter project-split times in the fullcalendar jquery application. A SQL view shows incomplete days (where entered time is not equal to 8 hours) and renders the table from the entity model in the Generate view:
#model IEnumerable<support_tickets.Models.DailyHours>
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Generate</title>
</head>
<body>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Start)
</th>
<th>
#Html.DisplayNameFor(model => model.Week)
</th>
<th>
#Html.DisplayNameFor(model => model.Hours)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Start)
</td>
<td>
#Html.DisplayFor(modelItem => item.Week)
</td>
<td>
#Html.DisplayFor(modelItem => item.Hours)
</td>
</tr>
}
</table>
</body>
</html>
I'd like to render the same table in the footer section of the _Layout view, to see everything on one page. Any assistance is greatly appreciated. Thanks
This is what worked for me - creating a partial view from the PartialViewResult action.
In Controller:
public PartialViewResult IncompleteDays()
{
ticketsEntities entities = new ticketsEntities();
var ent = entities.DailyHours.ToList();
return PartialView(ent);
}
Create a partial View from the action, with the table:
#model IEnumerable<support_tickets.Models.DailyHours>
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-striped">
<tr>
<th>
#Html.DisplayNameFor(model => model.Start)
</th>
<th>
#Html.DisplayNameFor(model => model.Week)
</th>
<th>
#Html.DisplayNameFor(model => model.Hours)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Convert.ToDateTime(item.Start).ToString("MM-dd-yyyy")
</td>
<td>
#Html.DisplayFor(modelItem => item.Week)
</td>
<td>
#Html.DisplayFor(modelItem => item.Hours)
</td>
</tr>
}
</table>
</div>
</div>
And then call the action from the footer section of the _Layout view:
#{ Html.RenderAction("IncompleteDays", "Home");}

How to put a row in red with Razor in MVC5

I have a table, which I want to mark when the real stock is less than the minimum stock, for that I'm going to render the view using Razor, but I'm not getting results
I enclose my view that contains the table that we wish to intervene
<table class="table table-bordered table-hover table-condensed">
<tr>
<th>
#Html.DisplayNameFor(model => model.First().v_Nombre)
</th>
<th>
#Html.DisplayNameFor(model => model.First().StockReal)
</th>
<th>
#Html.DisplayNameFor(model => model.First().StockMinimo)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
var fila = string.Empty;
if(item.StockReal < item.StockMinimo)
{
fila = "danger";
}
<tr class="#fila">
<td>
#Html.DisplayFor(modelItem => item.v_Nombre)
</td>
<td>
#Html.DisplayFor(modelItem => item.StockReal)
</td>
<td>
#Html.DisplayFor(modelItem => item.StockMinimo)
</td>
<td>
Editar
</td>
</tr>
}
</table>
Expected behavior: that the row where the real stock is less than the minimum stock turns red
Behavior Achieved: No change in my view
what am I doing wrong? What is missing in my Razor code? any help for me?
In bootstrap 4 the class is table-danger so change your code:
if(item.StockReal < item.StockMinimo)
{
fila = "table-danger";
}

Redirect to Link from Link saved in database

I am developing an Web Application in MVC.
I have added a link in Database eg:"www.google.com", I want user to redirect to Google on click.
I tried in many ways but getting the controller in address bar "eg:http://localhost:/Home/www.google.com"
View Code
<table class="table" style="margin-top:10px;">
<tr>
<th>
Sr. No.
</th>
<th>
Name
</th>
<th>
Details
</th>
<th>
Status
</th>
<th>
Tracking No.
</th>
<th>
Tack Order
</th>
<th>
Ordered On
</th>
</tr>
#{int row = 0;} #foreach (var item in Model) { if (item.PaymentSuccessfull == true) {
<tr>
<td>
#(row += 1)
</td>
<td>
#Html.DisplayFor(modelItem => item.DeliveryDetail.FirstName)
</td>
<td>
Order Details
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem => item.TrackingId)
</td>
<td>
//Here I want user to redirect to Google on click
Track
</td>
<td>
#Html.DisplayFor(modelItem => item.DateTime)
</td>
</tr>
} }
Help is appreciated.
Thanks in advance.
You must store the protocol with the rest of the URL.
so:
www.google.com
becomes:
http://www.google.com

Large Result Set Not Loading In ASP.NET Core

I created an out-of-the-box project (ASP.NET Core 4.6.2) using Entity Framework and added a simple data model (book). This book has a name, description, and price. I've added some sample data to my database (SQL Server 2016) to test the speed of the views. The linq query took less than a second to return 58K records. Then, the controller immediately passed the result to the view. The view spun for about 3 minutes, and then timed out and returned a 502.3 Bad Gateway.
I was under the impression that Core was extremely fast and could handle extremely large data sets (upwards of 2-6M). If you need a sample of code, here goes:
BooksController.cs:
var books = db.Books.ToList();
return View(books);
Index.cshtml:
#model IEnumerable<TestCoreApp.Models.Book>
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Description)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.Price)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
</tr>
}
</tbody>
</table>
A system is only as strong as its code allows. Two easy/quick ways to improve response time would be:
1) Make the View asynchronous.
2) Mark the database query as "No Tracking" when no changes will be made to the data from the current View. Adding this flag to a query makes it so the context doesn't track changes to the data. So if you DID make an update, context.SaveChanges() wouldn't save them. And if your view doesn't have any edit capabilities, it should always be there.
Using my own Index view from an app I'm working on now:
public async Task<IActionResult> Index(bool hideDisabledUsers = true) {
ViewData["hideDisabledUsers"] = hideDisabledUsers;
var employeeList = _context.Employees
.OrderBy(e => e.LastName);
if (hideDisabledUsers)
employeeList = employeeList.Where(e => e.AccessLevel != AccessType.Disabled);
return View(await employeeList.AsNoTracking().ToListAsync());
}
Note the changed method signature and return type, and how the LINQ query is built in steps. The query doesn't actually hit the database until the .ToListAsync()
Someone else may be able to provide more technical answers on performance, or more ways to make it performant, but using these two methods should show a noticeable improvement to your test.

Resources