This is a web application MVC4 with EF6 with Code First Migration.
I'm having issues with the alignment of my columns. I added arrows to show where I want each of the titles to be.
What code do I need to add in to make them align properly?
Views\Users\Create.cshtml
#using PagedList;
#using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#model IPagedList<RecreationalServicesTicketingSystem.Models.User>
#{
ViewBag.Title = "Users";
}
<h2>Users</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm("Index", "Users", FormMethod.Get))
{
<p>
Find by name: #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
<table>
<tr>
<th>
First Name
</th>
<th>
#Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm })
</th>
<th>
#Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm })
</th>
<th></th>
<th>
Department ID
</th>
<th>
Depot ID
</th>
<th>
Is Administrator
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.FirstMidName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.EnrollmentDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Department.DepartmentName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Depot.DepotName)
</td>
<td>
#Html.DisplayFor(modelItem => item.IsAdministrator)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.UserID }) |
#Html.ActionLink("Details", "Details", new { id=item.UserID }) |
#Html.ActionLink("Delete", "Delete", new { id=item.UserID })
</td>
</tr>
}
</table>
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
It looks like you have an empty
<th></th>
tag in the middle of your header row. You probably want to move that to the end of the header row where the CRUD links are.
<tr>
<th>
First Name
</th>
<th>
#Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm })
</th>
<th>
#Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm })
</th>
<th>
Department ID
</th>
<th>
Depot ID
</th>
<th>
Is Administrator
</th>
<th></th>
</tr>
You need to use the thead and tbody tags:
<table>
<thead>
<tr>
<th>/* Your column names*/ </th>
/* ... */
</tr>
</thead>
<tbody>
/*... */
</tbody>
</table>
Related
I working on asp.net mvc application by csharp . i face issue I can't find controls search input type textbox .
I search on action controller PendingRequests i can't found it .
also i search on index.html it not exist
so How to get search text box please ?
action controller
public ActionResult Index(string filenumber)
{
int employeeFileNo;
string userRole;
if (!string.IsNullOrEmpty(filenumber))
{
if (int.TryParse(filenumber, out employeeFileNo))
{
JDEUtility jde = new JDEUtility();
userRole = Workforce.GetUserRole(employeeFileNo);
if (!string.IsNullOrEmpty(userRole))
{
var EmpName = jde.GetEmployeeName(employeeFileNo);
Session[SessionKeys.UserCode] = employeeFileNo;
Session[SessionKeys.Username] = EmpName;
Session[SessionKeys.RoleCode] = userRole;
if (userRole != RoleKey.REQ)
return RedirectToAction("PendingRequests", "WorkforceRequests", null);
else
return RedirectToAction("MyRequests", "WorkforceRequests", null);
}
else
ViewBag.errorMsg = "unauthorized user";
}
else
{
ViewBag.errorMsg = "incorrect file no";
}
}
else
{
ViewBag.errorMsg = "unauthorized user";
}
return View();
}
pending request view
#model IEnumerable<HR.WorkforceRequisition.Models.WorkforceRequest>
#{
ViewBag.Title = "Pending Requests";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Pending Requests</h2>
<hr />
#if (!string.IsNullOrWhiteSpace(ViewBag.msg))
{
<div class="alert alert-success">
#ViewBag.msg
</div>
}
#if (!string.IsNullOrWhiteSpace(ViewBag.errorMsg))
{
<div class="alert alert-danger">
#ViewBag.errorMsg
</div>
}
<table id="dtbl" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.WorkforceRequestID)
</th>
<th>
#Html.DisplayNameFor(model => model.DepartmentCode)
</th>
<th>
#Html.DisplayNameFor(model => model.Section)
</th>
<th>
#Html.DisplayNameFor(model => model.RequiredPosition)
</th>
<th>
#Html.DisplayNameFor(model => model.JobTitle)
</th>
<th>
#Html.DisplayNameFor(model => model.ReportingTo)
</th>
<th>
#Html.DisplayNameFor(model => model.NationalityCategory)
</th>
<th>
#Html.DisplayNameFor(model => model.StatusRemark)
</th>
<th>
Requestor
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.ActionLink("Details", "Details", new { id = item.WorkforceRequestID })
</td>
<td>
#Html.DisplayFor(modelItem => item.WorkforceRequestID)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Section)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequiredPosition)
</td>
<td>
#Html.DisplayFor(modelItem => item.JobTitle)
</td>
<td>
#Html.DisplayFor(modelItem => item.ReportingTo)
</td>
<td>
#Html.DisplayFor(modelItem => item.NationalityCategory)
</td>
<td>
#Html.DisplayFor(modelItem => item.StatusRemark)
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedByName)
</td>
</tr>
}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#dtbl').DataTable({
"scrollX": true,
"pageLength": 10,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel'
]
});
});
</script>
expected result is found search text box input on which place
display text box on pending requests
From the screenshot, it seems you need search text box in the data table. The search box appears by default as such unless you have set any property to not show it. With your js I am able to see the search box You can try adding "searching": true property to your data table also. You can check the documentation here.
Here is a working snippet
$(document).ready(function () {
$('#tableID').DataTable({
// Enable the searching
// of the DataTable
searching: true // will work without this also
});
});
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
<table id="tableID" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Samer</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Rajiv</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Suhail</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Manisha</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>Robbert</td>
<td>68</td>
</tr>
<tr>
<td>6</td>
<td>Mike</td>
<td>25</td>
</tr>
<tr>
<td>7</td>
<td>Ere</td>
<td>23</td>
</tr>
<tr>
<td>8</td>
<td>James</td>
<td>35</td>
</tr>
<tr>
<td>9</td>
<td>Walt</td>
<td>65</td>
</tr>
<tr>
<td>10</td>
<td>Jessieca</td>
<td>28</td>
</tr>
<tr>
<td>11</td>
<td>Raghu</td>
<td>20</td>
</tr>
</tbody>
</table>
I have a index page the code looks like this
#model PagedList.IPagedList<PartialViews.Models.Customer>
#using PagedList.Mvc
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="container">
<table class="table">
<tr>
<th>
Title
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email Address
</th>
<th>
Phone Number
</th>
<th>
Modified Date
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.EmailAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.Phone)
</td>
<td>
#Html.DisplayFor(modelItem => item.ModifiedDate)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) |
#Html.ActionLink("Details", "Details", new { id = item.CustomerID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.CustomerID })
</td>
</tr>
}
</table>
#Html.PagedListPager(Model,page=>Url.Action("Index",new{page,pageSize=Model.PageSize}))
</div>
My CustomersController has this code
private AdventureWorksLT2012Entities db = new AdventureWorksLT2012Entities();
// GET: Customers
public ActionResult Index(int page=1, int pageSize=10)
{
List<Customer> customers = db.Customers.ToList();
PagedList<Customer> cust = new PagedList<Customer>(customers,page,pageSize);
return View(cust);
//return View(db.Customers.ToList());
}
Heres the Main page where i want the Customers List from the Index action to be shown
#model PartialViews.Models.Customer
#{
ViewBag.Title = "Main";
}
<body>
<div class="container">
<h2>Customer's List</h2>
<div id="dvCustomerDetails" style="width: 50%; height: 130px;display: none"></div>
</div>
</body>
<script type="text/javascript">
$.ajax({
url: 'Customers/Index',
contentType: 'application/html;',
type: 'GET',
dataType:'html'
})
.success(function(result) {
$('#dvCustomerDetails').html(result);
})
</script>
I want to display this table onto a new page as a partial view using ajax jquery but I am having trouble implementing it.
I was able to use RenderPartial method to display it as a partial view but i am having trouble doing it with ajax. Any help or suggestion will be appreciated.
Let's say i have this
#using MvcApplication6.Models;
#model List<Employee>
I
I have 5 rows/records of Employee and i passed it to my view. They have id, firstname,lastname,gender,department.
I know that i can use foreach to loop through all of them but what if i want to access a specific record from the list?
I get indexing error if i do something like this :
#Html.LabelFor(model => model[0].firstname)
I just want to display a specific record from my page. What should i do to achieve that result?
full code
#using MvcApplication6.Models;
#model IEnumerable<Employee>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New record", "Create")
</p>
#Html.LabelFor(model => model.Model[0].firstname)
<p>#Html.ActionLink("Check departments", "Index", "Department")</p>
<table border="1">
<tr>
<th>
#Html.DisplayNameFor(model => model.id)
</th>
<th>
#Html.DisplayNameFor(model => model.firstname)
</th>
<th>
#Html.DisplayNameFor(model => model.lastname)
</th>
<th>
#Html.DisplayNameFor(model => model.gender)
</th>
<th>
#Html.DisplayNameFor(model => model.department)
</th>
<th>Action</th>
</tr>
#foreach (Employee item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.id)
</td>
<td>
#Html.DisplayFor(modelItem => item.firstname)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastname)
</td>
<td>
#Html.DisplayFor(modelItem => item.gender)
</td>
<td>
#Html.DisplayFor(modelItem => item.department)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.id }) |
#Html.ActionLink("Details","Details", "Employee", new { id=item.id },null) |
#Html.ActionLink("Delete", "Delete", new { id=item.id }) |
#Html.DisplayFor(modelItem => item.Players[0])
</td>
</tr>
}
</table>
You are trying to access the property model on an instance of your collection. Instead, simply reference the model by index to access the firstname property:
#Html.LabelFor(m => m[0].firstname)
The lambda expression exposes the Model, which in your case is a collection. In addition, you should resolve your #model to List<> instead of IEnumerable<> to prevent lazy evaluation.
I have implemented a save button in my .NET application on the index page. When I click it, it loads, but does not save anything. I am just using the index page for checkboxes. If I uncheck something and save it, it saves, but also unchecks everything else in that row. Nothing happens when I try to check something. Here is the code I'm using:
Index.cshtml
#using (Html.BeginForm("save", "drnos"))
{
<input type="submit" value="Save" />
}
An example of one of my check box fields:
<td>
#Html.EditorFor(modelItem => item.Soft)
#Html.ValidationMessageFor(modelItem => item.Soft)
</td>
drnosController.cs
[HttpPost]
public ActionResult save(Doctor doc)
{
System.Diagnostics.Debug.WriteLine("Save Called");
db.Entry(doc).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
Here is the whole HTML file:
#model PagedList.IPagedList<drnosv6.Models.Doctor>
#using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Index";
}
<h2>Doctors</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm()) //insert the search bar
{
<p>
Find by First Name, Last Name, or RVH ID: #Html.TextBox("SearchString")
<input type="submit" value="Search" />
</p>
}
#using (Html.BeginForm("save", "drnos"))
{
<input type="submit" value="Save" />
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:even').addClass('alt-row-class');
});
</script>
<p>
</p>
<p>Click on a column header to sort by that column</p>
<table>
<tr>
<th>
#Html.ActionLink("RVH ID", "Index", new { sortOrder = ViewBag.IDSortParm })
</th>
<th>
#Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.LastSortParm })
</th>
<th>
#Html.ActionLink("First Name", "Index", new { sortOrder = ViewBag.FirstSortParm })
</th>
<th>
Middle Initial
</th>
<th>
Degree
</th>
<th>
Group
</th>
<th>
Adm Priv
</th>
<th>
#Html.ActionLink("QCPR", "Index", new { sortOrder = ViewBag.QCPRSortParm })
</th>
<th>
#Html.ActionLink("Keane", "Index", new { sortOrder = ViewBag.KeaneSortParm })
</th>
<th>
#Html.ActionLink("Orsos", "Index", new { sortOrder = ViewBag.OrsosSortParm })
</th>
<th>
#Html.ActionLink("Soft", "Index", new { sortOrder = ViewBag.SoftSortParm })
</th>
<th>
#Html.ActionLink("3M", "Index", new { sortOrder = ViewBag.threeMSortParm })
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
using (Html.BeginForm("Save", "Doctor", FormMethod.Post))
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.RVH_ID_)
</td>
<td>
#Html.DisplayFor(modelItem => item.Last_Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.First_Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Middle_Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Degree1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Group)
</td>
<td>
#Html.DisplayFor(modelItem => item.AdmPriv)
</td>
<td>
#Html.DisplayFor(modelItem => item.QCPR)
</td>
<td>
#Html.EditorFor(modelItem => item.Keane)
#Html.ValidationMessageFor(modelItem => item.Keane)
</td>
<td>
#Html.EditorFor(modelItem => item.Orsos)
#Html.ValidationMessageFor(modelItem => item.Orsos)
</td>
<td>
#Html.EditorFor(modelItem => item.Soft)
#Html.ValidationMessageFor(modelItem => item.Soft)
</td>
<td>
#Html.DisplayFor(modelItem => item.C3M)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.RVH_ID_ })
#Html.ActionLink("Details", "Details", new { id = item.RVH_ID_ })
</td>
</tr>
}
}
</table>
<p>
<input type="submit" value="Save" />
</p>
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
Your BeginForm or ActionLink has to point to ActionResult Edit.
When a form is submitted, only the inputs declared within that form get submitted. You only have the submit button in your form, so there are no other fields to fill out your Doctor structure. You need to have your save button on the same form as all your other fields.
In my MVC5 Application, I am currently dealing with 2 tables:
[MemberDues] -- [Id], [Year], [Display], [Amount]
[MemberDuesReceived] -- [Id], [MemberDuesId], [MemberOrgId], [PaidByUserId], [TransactionId], [Paid], [DatePaid], [PaymentMethod], [PayPalPaymentId], [PayPalPayerId], [PayPalPaymentState]
I have a View (below) where I display the records for Different [MemberDues]:
#model IEnumerable<PROJECTdev.Models.MemberDues>
<script type="text/javascript" src="~/Areas/Admin/Scripts/Dues/Index.min.js"></script>
<div id="alert" style="display: none;"></div>
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-2">
</th>
<th>
#Html.DisplayNameFor(model => model.Year)
</th>
<th>
#Html.DisplayNameFor(model => model.Display)
</th>
<th>
#Html.DisplayNameFor(model => model.Amount)
</th>
<th>View</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<span class="glyphicon glyphicon-pencil"></span> Edit
<span class="glyphicon glyphicon-floppy-remove"></span> Delete
</td>
<td>
#Html.DisplayFor(modelItem => item.Year)
</td>
<td>
#Html.EditorFor(modelItem => item.Display, new { htmlAttributes = new { #class = "form-control pull-left", style = "height: 20px; width: 20px;", onclick = "disableEnableDues(" + item.Id + ", this)" } })
</td>
<td>
#Html.DisplayFor(modelItem => item.Amount)
</td>
<td>
<span class="glyphicon glyphicon-list-alt"></span> Paid
</td>
</tr>
}
</tbody>
</table>
What I am attempting to do is have, when the [Paid] button (link) is clicked, a View is brought up which lists all the Member Organizations which have paid their dues. To do this, I have to query [MemberDuesReceived] for the appropriate [MemberDuesId] and return all records which have the matching [MemberDuesId] & [Paid] == true. This I have attempted to below:
public async Task<ActionResult> DuesPaidMembers(int id)
{
MemberDues memberDues = await db.MemberDues.FindAsync(id);
return View(db.MemberDuesReceived.Where(mdr => mdr.MemberDuesId == memberDues.Id && mdr.Paid).ToListAsync());
}
I then created a view called DuesPaidMembers.cshtml which is below:
#model IEnumerable<PROJECTdev.Models.MemberDuesReceived>
#{
ViewBag.Title = "DuesPaidMembers";
Layout = "~/Areas/Admin/Views/Shared/_LayoutAdmin.cshtml";
}
<h2>DuesPaidMembers</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.MemberDues.Id)
</th>
<th>
#Html.DisplayNameFor(model => model.MemberOrganization.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.PaidByUser.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.TransactionId)
</th>
<th>
#Html.DisplayNameFor(model => model.Paid)
</th>
<th>
#Html.DisplayNameFor(model => model.DatePaid)
</th>
<th>
#Html.DisplayNameFor(model => model.PaymentMethod)
</th>
<th>
#Html.DisplayNameFor(model => model.PayPalPaymentId)
</th>
<th>
#Html.DisplayNameFor(model => model.PayPalPayerId)
</th>
<th>
#Html.DisplayNameFor(model => model.PayPalPaymentState)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.MemberDues.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.MemberOrganization.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.PaidByUser.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TransactionId)
</td>
<td>
#Html.DisplayFor(modelItem => item.Paid)
</td>
<td>
#Html.DisplayFor(modelItem => item.DatePaid)
</td>
<td>
#Html.DisplayFor(modelItem => item.PaymentMethod)
</td>
<td>
#Html.DisplayFor(modelItem => item.PayPalPaymentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.PayPalPayerId)
</td>
<td>
#Html.DisplayFor(modelItem => item.PayPalPaymentState)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
#Html.ActionLink("Details", "Details", new { id=item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id=item.Id })
</td>
</tr>
}
</table>
Currently however, when I click the button, my appropriate Controller Action (DuesPaidMember()) is called, but when the line return View(db.MemberDuesReceived.Where(mdr => mdr.MemberDuesId == memberDues.Id && mdr.Paid).ToListAsync()); is hit, I receive the following error:
The model item passed into the dictionary is of type 'System.Threading.Tasks.Task1[System.Collections.Generic.List1[PRISMdev.Models.MemberDuesReceived]]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable1[PRISMdev.Models.MemberDuesReceived]'.`
Does anyone have any thoughts on what I'm apparently doing wrong?
The following line is to blame.
return View(db.MemberDuesReceived
.Where(mdr => mdr.MemberDuesId == memberDues.Id && mdr.Paid)
.ToListAsync());
You are passing the result of ToListAsync as your model, which is a Task<List<PRISMdev.Models.MemberDuesReceived>>.
Instead, insert await so that the task is run and the resulting value of type List<PRISMdev.Models.MemberDuesReceived> is returned as your model:
return View(await db.MemberDuesReceived
.Where(mdr => mdr.MemberDuesId == memberDues.Id && mdr.Paid)
.ToListAsync());