In my View i have implemented a paging and everything looks good.
However the format of page numbers is not what i expected.
Its showing the pages index like this
:
««
«
…
3
4
5
6
7
8
9
10
11
12
…
»
»»
clicking this links works, but it should have displayed things in a straight row
here is the code for my view
<table>
<tr>
<th>
Account Type
</th>
<th>
Account #1
</th>
<th>
Account #2
</th>
<th>
Amount
</th>
<th>
Comment
</th>
<th>
Date
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.TransactionType)
</td>
<td>
#Html.DisplayFor(modelItem => item.AccountNumber)
</td>
<td>
#Html.DisplayFor(modelItem => item.DestAccount)
</td>
<td>
#Html.DisplayFor(modelItem => item.Amount)
</td>
<td>
#Html.DisplayFor(modelItem => item.Comment)
</td>
<td>
#Html.DisplayFor(modelItem => item.ModifiedDate)
</td>
</tr>
}
</table>
#Html.PagedListPager(Model, page => Url.Action("Index",new {page}))
here is the html of the page generated
enter code here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Statements</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<div id="midNav">
ATM
<span> | </span>
Statement
<span> | </span>
My Profile
</div>
<div id="nav">
<strong>dalmar202</strong>
<span> | </span>
Log Out
</div>
<div id="content" >
<h2>Your Statements</h2>
<select id="Accounts" name="Accounts"><option value="">-- Select Account --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<table>
<tr>
<th>
Account Type
</th>
<th>
Account #1
</th>
<th>
Account #2
</th>
<th>
Amount
</th>
<th>
Comment
</th>
<th>
Date
</th>
</tr>
<tr>
<td>
D
</td>
<td>
1
</td>
<td>
1
</td>
<td>
150.00
</td>
<td>
saad
</td>
<td>
26/09/2013 8:49:19 PM
</td>
</tr>
<tr>
<td>
D
</td>
<td>
2
</td>
<td>
2
</td>
<td>
50.00
</td>
<td>
saad
</td>
<td>
26/09/2013 9:00:29 PM
</td>
</tr>
<tr>
<td>
D
</td>
<td>
2
</td>
<td>
2
</td>
<td>
150.00
</td>
<td>
ss
</td>
<td>
26/09/2013 9:41:09 PM
</td>
</tr>
<tr>
<td>
D
</td>
<td>
1
</td>
<td>
1
</td>
<td>
0.00
</td>
<td>
</td>
<td>
26/09/2013 10:10:58 PM
</td>
</tr>
<tr>
<td>
D
</td>
<td>
1
</td>
<td>
1
</td>
<td>
0.00
</td>
<td>
</td>
<td>
26/09/2013 10:19:07 PM
</td>
</tr>
</table>
<div class="pagination"><ul><li class="active"><a>1</a></li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li class="disabled PagedList-ellipses"><a>…</a></li><li class="PagedList-skipToNext">»</li><li class="PagedList-skipToLast">»»</li></ul></div>
<script src="/Scripts/jquery-1.7.1.js"></script>
</div>
<div id="footer"></div>
</body>
</html>
Please do the following
.pagination ul {
margin-left: 10px;
list-style:none;
}
.pagination li {
display: inline;
}
Related
I have this code:
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:#"document.readyState" completionHandler:^(id _Nullable complete, NSError * _Nullable error) {
if (complete != nil) {
[webView evaluateJavaScript:#"document.body.offsetHeight" completionHandler:^(id _Nullable height, NSError * _Nullable error) {
lastWebViewHeight = [height doubleValue];
Unfortunatelly for this HTML it returns 701px:
<html><head><meta name="format-detection" content="telephone=no"></head><body bgcolor='#111111'> <table width="100%"> <thead style="border: thin solid #000000; color: #fcfcfc; font-size: x-small; text-align: center;"> <tr> <th rowspan="2" nowrap="nowrap"> FLIGHT NO. </th> <th rowspan="2"> DATE </th> <th rowspan="2"> FROM/TO </th> <th rowspan="2"> PIC </th> <th colspan="3" nowrap="nowrap"> FLIGHT TIME </th> <th colspan="3" nowrap="nowrap"> BLOCK TIME </th> <th rowspan="2"> TAKEOFF FUEL (KG) </th> <th rowspan="2"> LANDING FUEL (KG) </th> <th rowspan="2"> LDG </th> </tr> <tr> <th> T/O </th> <th> LNDG </th> <th> TOTAL </th> <th> OFF </th> <th> ON </th> <th> TOTAL </th> </tr> </thead> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size: x-small;" align="center"> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> BBD299 </td> <td nowrap="nowrap"> 22Dec18 06:30 </td> <td> EGPH/EBLG </td> <td> CLD </td> <td> 0640 </td> <td> 0753 </td> <td> 0113 </td> <td> 0625 </td> <td> 0756 </td> <td> 0131 </td> <td> 7400 </td> <td> 4400 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT010K </td> <td nowrap="nowrap"> 22Dec18 00:55 </td> <td> EGSS/EGPH </td> <td> ROH </td> <td> 0144 </td> <td> 0239 </td> <td> 0055 </td> <td> 0131 </td> <td> 0246 </td> <td> 0115 </td> <td> 7000 </td> <td> 4500 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT010J </td> <td nowrap="nowrap"> 21Dec18 22:25 </td> <td> EGPH/EGSS </td> <td> ROH </td> <td> 2236 </td> <td> 2335 </td> <td> 0059 </td> <td> 2222 </td> <td> 2358 </td> <td> 0136 </td> <td> 9700 </td> <td> 7200 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> 004N </td> <td nowrap="nowrap"> 21Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0225 </td> <td> 0307 </td> <td> 0042 </td> <td> 0210 </td> <td> 0314 </td> <td> 0104 </td> <td> 7050 </td> <td> 5070 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 20Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2343 </td> <td> 0028 </td> <td> 0045 </td> <td> 2333 </td> <td> 0032 </td> <td> 0059 </td> <td> 9000 </td> <td> 7250 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 20Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0134 </td> <td> 0213 </td> <td> 0039 </td> <td> 0120 </td> <td> 0219 </td> <td> 0059 </td> <td> 6700 </td> <td> 4900 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 19Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2341 </td> <td> 0026 </td> <td> 0045 </td> <td> 2330 </td> <td> 0030 </td> <td> 0100 </td> <td> 8800 </td> <td> 6900 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 19Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0133 </td> <td> 0212 </td> <td> 0039 </td> <td> 0120 </td> <td> 0218 </td> <td> 0058 </td> <td> 6540 </td> <td> 4700 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004S </td> <td nowrap="nowrap"> 18Dec18 23:30 </td> <td> EGPH/EGNX </td> <td> ROH </td> <td> 2347 </td> <td> 0034 </td> <td> 0047 </td> <td> 2335 </td> <td> 0039 </td> <td> 0104 </td> <td> 8800 </td> <td> 6740 </td> <td> 1 </td> </tr> <tr style="color:#MISSINGPREFLIGHTCOLOR"> <td> NPT004N </td> <td nowrap="nowrap"> 18Dec18 01:20 </td> <td> EGNX/EGPH </td> <td> ROH </td> <td> 0222 </td> <td> 0302 </td> <td> 0040 </td> <td> 0210 </td> <td> 0308 </td> <td> 0058 </td> <td> 6800 </td> <td> 4940 </td> <td> 1 </td> </tr> </tbody> <tbody style="border: thin solid #000000; color: #fcfcfc; font-size:small;"> <tr> <td colspan="13"> <hr /> </td> </tr> <tr> <th colspan="4" style="color: Red;"> </th> <th colspan="2"> ACC. AIRBORNE TIME: </th> <th colspan="1" style="font-family: Arial; color: #HOURSOVERDUE#;"> N/A </th> <th colspan="2"> </th> <th colspan="1" style="font-family: Arial; color: #4380EF;"> </th> <th colspan="2"> ACC. LANDINGS: </th> <th colspan="1" style="font-family: Arial; color: #CYCLESOVERDUE#;"> N/A </th> </tr> </tbody> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size:small;" align="center"> <tr> <td colspan="14"> <hr /> </td> </tr> <tr> <td colspan="5" align="center"> SCHEDULED MAINTENANCE DUE AT: </td> <td align="right"> HOURS </td> <td> N/A </td> <td colspan="2" align="right"> DATE </td> <td nowrap="nowrap" style="color: #DATEOVERDUE#"> N/A </td> <td colspan="2" align="right"> LANDINGS </td> <td style="color: #LANDINGSOVERDUE#"> N/A </td> </tr> </tbody> </table> <table width="100%"> <thead style="border: thin solid #000000; color: #fcfcfc; font-size: x-small; text-align: center;"> <tr> <th colspan="14" align="Center"> <hr/> </th> </tr> <tr> <th colspan="14" align="Center"> <SPAN STYLE="font-size: 12pt">The following is from the maintenance system "Gannet", and is info only.</SPAN> </th> </tr> <tr> <th colspan="14"> </th> </tr> <tr> <th colspan="2"> STATUS </th> <th colspan="2"> WORK CARD NO. </th> <th colspan="4" align="left"> TITLE </th> <th colspan="3"> ITEM TYPE </th> <th colspan="3"> DUE DATE / LIMIT </th> </tr> </thead> <tbody style="font-family: Arial; color: #4380EF; font-weight: bold; font-size: x-small;" align="center"> REPEAT2 <tr> <td colspan="2" style="color: #STATUS#"> [Status] </td> <td colspan="2"> [WorkcardNr] </td> <td colspan="4" align="left" > [Title] </td> <td colspan="3"> [ItemType] [MelItemNr] </td> <td colspan="3"> [DueDate] </td> </tr> REPEATEND2! <tr><td colspan="13"></td></tr> </tbody> </table></body></html>
Though if I render it in a browser, browser requires much less offsetHeight. Do you have any idea why the difference?
You Need to add meta tag as follows
<meta name=\"viewport\" content=\"initial-scale=1, user-scalable=no, width=device-width\" />
dataJSON (array)
dataList.const.ts
https://codebeautify.org/jsonviewer/cb28b09d
component.html
//1st *ngFor (worked
<tr *ngFor="let item of list">
{{item.city.id}}
{{item.city.name}}
{{item.city.coord.lon}}
{{item.city.coord.lat}}
{{item.city.country}}
{{item.city.population}}
//2nd *ngFor (cannot display)
<tr *ngFor="let item of list">
<td>
{{item.list_}}
</td>
<td>
{{item.list_.temp.day}} °C
</td>
<td>
{{item.list_.temp.min}} °C
</td>
<td>
{{item.list_.temp.max }} °C
</td>
<td>
{{item.list_.temp.night }} °C
</td>
<td>
{{item.list_.temp.eve }} °C
</td>
<td>
{{item.list_.temp.morn }} °C
</td>
<td>
{{item.list_.pressure}} hpa
</td>
<td>
{{item.list_.humidity}} %
</td>
<td>
{{item.list_.weather.id }}
</td>
<td>
{{item.list_.weather.main }}
</td>
<td >
{{item.list_.weather.description }}
</td>
<td>
{{item.list_.weather.icon }}
</td>
<td>
{{item.list_.speed}} meter/sec
</td>
<td>
{{item.list_.deg}} °
</td>
<td>
{{item.list_.clouds}} %
</td>
<td>
{{item.list_.rain}}
</td>
</tr>
You may want to take a look into this: ngFor inside ngFor
Basically you should write something like this:
*ngFor = "let item of list"
And then
*ngFor = "let l of item.list_"
Then use
<td>{{l.temp.night}}</td>
https://stackblitz.com/edit/ngfor-example-pnuhfh
This is a stackblitz example for your answer, based on your feedback comments.
The relevant code snippet is:
<tr *ngFor = "let item of fetchData">
<td *ngFor = "let l of item.list_">
{{l.dt}}|
{{l.temp.night}}|
</td>
</tr>
I want to implement bootstrap accordion in my application. Currently, If I click on any rows, it gives me first #Html.Raw(item.D) and #Html.Raw(item.B).
What i want is that, if i click on 2nd row then its respective #Html.Raw(item.D) and #Html.Raw(item.B) should displayed and so on.
Please suggest me where I am going wrong.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
You need to specify id uniquely, to do so you need to append raw id(or something unique for each row) to id and data-target attributes,
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores#(item.id)">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores#(item.id)">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
updated : data-target="#12345-cores#(item.id) & id="12345-cores#(item.id)"
I'm new in MVC5 and i don't know much about dealing with view controls . I create an MVC project , but I need to get the data of checked Rows when submit in the controller , Please can anyone help me ??
this is my view code for the table
<table class="table" id="Table_Session">
<tr>
<th>
<label> </label>
</th>
<th>
<label>User Id</label>
</th>
<th>
<label>IP Address</label>
</th>
<th>
<label>Licence Type</label>
</th>
<th>
<label>Login Date</label>
</th>
<th>
<label>Login Time</label>
</th>
<th></th>
</tr>
#For Each item In Model
#<tr>
<td>
#If Not IsNothing(item) Then
#Html.Hidden("SessionID", item.SessionID)
#<input type="checkbox" id="chboxRow" value="item.SessionID" onclick="">
End If
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.sUserId)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.IpAddress)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.licencetype)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.LoginDate)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.Logintime)
</td>
</tr>
Next
</table>
<div>
#Using Html.BeginForm("KillSession", "KillSession", FormMethod.Post)
#<input type="submit"
class="btn btn-default btn-xs"
value="Kill Session" />
End Using
#Using Html.BeginForm("s_Continue", "KillSession")
#<input type="submit"
class="btn btn-default btn-xs"
value="s_Continue" />
End Using
</div>
So you need to wrap all of the checkboxes in the form or the data will not be included when you post the form. Try this as a stating place.
#Using Html.BeginForm("KillSession", "KillSession", FormMethod.Post)
<table class="table" id="Table_Session">
<tr>
<th>
<label> </label>
</th>
<th>
<label>User Id</label>
</th>
<th>
<label>IP Address</label>
</th>
<th>
<label>Licence Type</label>
</th>
<th>
<label>Login Date</label>
</th>
<th>
<label>Login Time</label>
</th>
<th></th>
</tr>
#For Each item In Model
#<tr>
<td>
#If Not IsNothing(item) Then
#Html.Hidden("SessionID", item.SessionID)
#<input type="checkbox" id="chboxRow" value="item.SessionID" onclick="">
End If
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.sUserId)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.IpAddress)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.licencetype)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.LoginDate)
</td>
<td>
#Html.DisplayFor(Function(modelItem) item.Logintime)
</td>
</tr>
Next
</table>
#<input type="submit" class="btn btn-default btn-xs" value="Kill Session" />
End Using
Then maybe read this and do some Googling, the answers to this are out there, over and over and over again!
I have code below two table first is display Input field and second is display list, problem is that in input field showing the collection which is bind with that.
Code for View
<h2>AddmissionCellWithModel</h2>
<div>
<% using (Html.BeginForm("InsertN", "AddmissionCell", FormMethod.Post))
{ %>
<table>
<tr>
<td>
Student's Name:
</td>
<td>
<%= Html.TextBox("StudentName", Model)%>
</td>
<td>
Addmission Year:
</td>
<td>
<%= Html.TextBox("AddmissionYear", Model)%>
</td>
</tr>
<tr>
<td>
Father's Name:
</td>
<td>
<%= Html.TextBox("FatherName", Model)%>
</td>
<td>
Mother's Name:
</td>
<td>
<%= Html.TextBox("MotherName", Model)%>
</td>
</tr>
<tr>
<td>
Contact:
</td>
<td>
<%= Html.TextBox("Contact", Model)%>
</td>
<td>
Address:
</td>
<td>
<%= Html.TextBox("Address", Model)%>
</td>
</tr>
<tr>
<td>
SchoolName:
</td>
<td>
<%= Html.TextBox("SchoolName", Model)%>
</td>
<td>
EnrollmentId:
</td>
<td>
<%= Html.TextBox("EnrollmentID", Model)%>
</td>
</tr>
<tr>
<td colspan="4" align="right">
<input type="submit" value="Save" />
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
</table>
<%} %>
</div>
<table>
<tr>
<th>
EnrollmentID
</th>
<th>
StudentName
</th>
<th>
SchoolName
</th>
<th>
StudentID
</th>
<th>
FatherName
</th>
<th>
MotherName
</th>
<th>
Address
</th>
<th>
Contact
</th>
<th>
ClassId
</th>
<th>
AddmissionYear
</th>
<th>
EnrollDateTime
</th>
<th>
IsActive
</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: item.EnrollmentID %>
</td>
<td>
<%: item.StudentName %>
</td>
<td>
<%: item.SchoolName %>
</td>
<td>
<%: item.StudentID %>
</td>
<td>
<%: item.FatherName %>
</td>
<td>
<%: item.MotherName %>
</td>
<td>
<%: item.Address %>
</td>
<td>
<%: item.Contact %>
</td>
<td>
<%: item.ClassId %>
</td>
<td>
<%: item.AddmissionYear %>
</td>
<td>
<%: String.Format("{0:g}", item.EnrollDateTime) %>
</td>
<td>
<%: item.IsActive %>
</td>
</tr>
<% } %>
</table>
and code for Controller...
public ActionResult AddmissionCellWithModel()
{
SchoolManagementV1Entities db = new SchoolManagementV1Entities();
List<EnrollmentModel> result = (from q in db.VW_EnrollmentModel
select new EnrollmentModel()
{
EnrollmentID = q.EnrollmentId,
StudentName = q.StudentName,
StudentID = q.StudentID,
FatherName = q.FatherName,
MotherName = q.MotherName,
Address = q.Address,
Contact = q.Contact ?? 0,
AddmissionYear = q.EnrollYear,
EnrollDateTime = q.AdmissionDateTime,
IsActive = q.EnrollIsActive
}).ToList();
return View(result);
}
this return view is return the result object to the view
so some on tell me how can prevent to display the System.Collection.Generic....
Do you need a single or multiple forms?
I'm asking this because in the image I see only 1 form but you are passing a list of EnrollmentModel.
If you need only 1 form and 1 table (I think this is your case), pass to View only EnrollmentModel, not a list of them.
So change this:
List<EnrollmentModel> result = (from q in db.VW_EnrollmentModel
select new EnrollmentModel()
{
EnrollmentID = q.EnrollmentId,
StudentName = q.StudentName,
StudentID = q.StudentID,
FatherName = q.FatherName,
MotherName = q.MotherName,
Address = q.Address,
Contact = q.Contact ?? 0,
AddmissionYear = q.EnrollYear,
EnrollDateTime = q.AdmissionDateTime,
IsActive = q.EnrollIsActive
}).ToList();
return View(result);
with something like this:
var myId=7; //Example
return View(db.VW_EnrollmentModel.Single(m=>m.EnrollmentId==myId));
Note that here I'm guessing your want to display a single VW_EnrollmentModel, retrieved using EnrollmentId.
You then have to change your view setting correct model type and properties: in fact now the model is VW_EnrollmentModel so you don't have AddmissionYear but EnrollYear for example.
If this is not the expected result add a comment and I'll edit my answer.
Hope this helps,
Alberto