I created a view with two tabs.
One of the tabs has to be split in multiple pages.
Don't know how to do that with pagination.
Do i need a separate view for each tab or it can still be done in one view?
Can you please help me with an example for the same view?
<div class="w3-bar w3-dark-grey">
<button class="w3-bar-item w3-button tablink w3-red" onclick="openTab(event,'Statistics')">Statistics</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'History')">History</button>
</div>
<div id="History" class="w3-container w3-border city" style="display:none">
<h2>History</h2>
#helper ShowHistory(Site.classes.HistoryStruct[] aHistory)
{
<br>
<table class="table table-hover table-bordered">
<thead>
#if (aHistory == null)
{
<tr></tr>
}
else
{
<tr>
<th>Username</th>
<th>Info</th>
<th>Date</th>
</tr>
}
</thead>
<tbody id="tblStatistics">
#{string sClass = "class='divaproved'";
for (int i = 0; i < aHistory.Length; i++)
{
<tr #Html.Raw(sClass)>
<td>#aHistory[i].UserName</td>
<td>#aHistory[i].Info</td>
<td>#aHistory[i].Date</td>
</tr>
}
}
</tbody>
</table>
}
<div class="container">
#ShowHistory(Site.classes.UserAccessDB.aHistory)
</div>
</div>
If you just need to paginate your table you can try this js: DataTables
Give an ID to the table you need to paginate and add the following code at the end of your page
$(document).ready( function ()
{
$('#myTable').DataTable();
}
);
Related
I have a view which shows the list of files from a folder and the file count may differ for every user
my view is as follows
<div class="container" style="padding-top:10px; height:100%; width:100%;padding:0;margin:0;">
<table class="table table-bordered table-striped">
<thead>
<tr style="text-align:center;">
<th>File Name</th>
<th>Download</th>
</tr>
</thead>
<tbody>
#foreach (handbook.Data.EmpDoc files in Model)
{
<tr style="text-align:center;">
<td>
<input type="checkbox" id="chk(#files.Filename)" />
</td>
<td>#files.Filename</td>
<td class="text-nowrap">#Html.ActionLink("Download", "DownloadFile", new { fileName = files.Filename, id = files.EmployeeId })</td>
</tr>
}
</tbody>
</table>
</div>
and this is the script i am using to check if the check box is checked
<script>
// this is the scrpt for checkbox
$(document).on("click", "[type='checkbox']", function (e) {
if (this.checked) {
$(this).attr("value", "1");
} else {
$(this).attr("value", "0");
}
});
</script>
I am able to generate id for each file like chkDocs or chkpayslip but when i click in it, it sends value =0 to the controller
please help
Hello friends I have a problem is that I want to show the return value of a field of the database in the table .. My problem is that it shows all the return values in one head .. I want only 8 numbers in each row Show me and dynamically add another line .. Thank you for your help
</div>
<div role="tabpanel" class="tab-pane fade" id="Tab3">
#if (ViewBag.ProductPartNumber != null)
{
List<ShowProductPartNumberViewModel> list = ViewBag.ProductPartNumber;
<div class="table-responsive">
<table class="table table-striped">
<tbody>
#foreach (var item in list)
{
<tr>
<td>#item.ProductNumberTitle </td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
Try this:
#for (int i = 0; i < list.Count(); i += 8)
{
var items = list.Skip(i).Take(8).ToList();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
<tr>
<td>
foreach (var item in items)
{
sb.Append(item.ProductNumberTitle)
}
sb.ToString();
</td>
</tr>
}
To be more specific let me explain what did I encounter.
I was trying to submit a List of data from view to controller. I was able to submit some data successfully without any problem. But the problem arises when the data is more than around a list of 250 items and more than that. When I click a submit button it passes a NULL value when I debug it. There is no error with my code because I have submitted a list of 100 items to the controller without any problem. I guess there will be something that I have to specify so that It will also send a large number of lists.
Here I'm not using ajax or any javascript code to submit the form. I'm submitting it directly to the controller using post request.
I have posted some snippet of my code below to describe it more precisely.
View
<form method="post" action="SubmitList">
<div class="row">
<div class="col-md-12" style="padding-top:1%">
<input type="submit" value="PASS" class="btn btn-primary" style="float:right;" />
<div class="box-body">
<table id="#example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
#{
int i = 1;
}
#for (int j = 0; j < Model.Count(); j++)
{
<tr>
<td>#Html.Raw(i++)</td>
#Html.HiddenFor(item => item[j].Id, new { htmlAttributes = new { #class = "form-control" } })
<td>
#Html.DisplayFor(item => item[j].FullName)
</td>
</tr>
}
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
</div>
</form>
Controller
[AuthorizedAction]
[HttpPost]
public async Task<IActionResult> SubmitList(List<Student> students)
{
////
}
Can you tell me what's wrong with my code, please
Please try this in Startup#ConfigureServices
services.Configure<FormOptions>(options => options.ValueCountLimit = 1000); // you may want to adjust this limit
Reference: https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.http.features.formoptions
I have been trying to select multiple rows from my table of data(Generated using EF) and then pass all selected rows to the next view to perform some action. On passing the data to the next view i am getting the following error :
System.NullReferenceException: 'Object reference not set to an instance of an object.'
Temporary local of type 'int[]'> was null.
Any help on how to solve this will be appreciated.
Below is my code:
View:
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
#using (Html.BeginForm()) {
<form action="#" method="post">
<label>Search by Company Name:</label> #Html.TextBox("SearchString")
<input type="submit" value="Go" placeholder="Search" style="background-color: #0a9dbd; color: white; border-color: #0a9dbd;">
<label>Search by Card Number:</label> #Html.TextBox("searchCard")
<input type="submit" value="Go" placeholder="Search" style="background-color: #0a9dbd; color: white; border-color: #0a9dbd;">
Export to Excel
</form>
}
</div>
<div class="panel-body">
Add Gift Card
Get Card Balance
Load Cards
<br />
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Card ID</th>
<th>Company</th>
<th>Card Number</th>
<th>Card Number 2</th>
<th>Date Created</th>
<th>Card Status</th>
<th>Discount Level ID</th>
<th>Loyalty Level ID</th>
<th>Gift Card Enabled</th>
<th>Loyalty Enabled</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td><input type="checkbox" name="ids" value="#item.CardID" /></td>
<td>#item.CardID</td>
<td>#item.Customer.CustomerCompanyName</td>
<td>#item.CardNumber</td>
<td>#item.CardNumber2</td>
<td>#item.CardDate</td>
<td>#item.CardStatus</td>
<td>#item.DiscountLevelID</td>
<td>#item.LoyaltyLevelID</td>
<td>#item.GiftCardEnabled</td>
<td>#item.LoyaltyEnabled</td>
<td>
<i class="fa fa-edit "></i> Edit <br />
</td>
</tr>
}
</tbody>
</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 }))
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
Controller:
public ActionResult PostCards(int[]ids)
{
var myObject = new Card();
foreach(var id in ids)
{
myObject = db.Cards.Single(o => o.CardID == id);
return RedirectToAction("LoadCards", myObject);
}
return View();
}
public ActionResult LoadCards()
{
return View();
}
I need the selected data to be passed to the LoadCards view.
Let us first look at the NullReference you are getting. The problem here is that no correct index is created to bind the checkboxes to an array. Use a for loop instead of foreach. In MVC/Razor, how do I get the values of multiple checkboxes and pass them all to the controller?
To get the desired behaviour:
change the foreach to a for loop so the correct indices for sending the data will be created.
add a checkbox in each row that lets the user select the rows to submit.
your action should recieve a collection of models for each row. This model always transports the CardId and tells us whether it was selected.
public class SelectedCardModel {
public int CardId { get; set; }
public bool IsSelected {get; set;}
}
In the view:
#using (Html.BeginForm("PostCards", "CustomerView", FormMethod.Post) {
// <table> etc ...
<tbody>
#for (var i = 0; i < Model.Count; i++) {
#{ var item = Model.ElementAt(i); }
<tr>
<td>
#Html.Hidden("CardId[" + i + "]")
#Html.CheckBox("IsSelected[" + i + "]")
</td>
// display other properties of item ...
<td>#item.CardID</td>
// ...
</tr>
}
</tbody>
</table>
<button type="submit">Load Cards</button>
}
Action:
[HttpPost]
public ActionResult PostCards(SelectedCardModel[] selectedCards) {
foreach(var card in selectedCards) {
if (card.IsSelected) {
var selectedId = card.CardId;
// ...
}
}
}
I have this code in C# using EF Core 1.2 where I have a form containing two submit buttons. The first button 'upload' invokes my method 'UpLoadMyFile' which compares
each line from my textarea to a pattern and returns a string which tells me if it matches one pattern.
Then I add all my text and its states into a
List <Tuple<string, string>>
that I pass to my View via a ViewModel and display each line plus its state in a table.
Now I'm trying to save each line into my database when I click my second button 'save'. But every time I try to save my lines a NullReferenceException occurs
which tells me my List from my table is null.
I would like to know how to pass all lines and states from my Table 'MyTupleList' to my Post Method since I really don't know how to fix my problem.
My View:
#model Models.ViewModels.CreateSaetzeModelView
<form asp-action="ProcessCreateLines" asp-controller="SoftwareService" method="post" enctype="multipart/form-data">
<div class="div-marginBottom">
<table class="table">
<tbody>
<tr>
<td>
<textarea name="ExpressionTextarea" id="ExpressionTextarea" runat="server" TextMode="MultiLine" asp-for="#Model.LoadExpressions"></textarea>
<div class="col-md-10">
<input type="submit" name="upload" value="upload" /> !--Calls 'uploadmyfile' action-->
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<br />
<div class="div-ExpressionEingabe">
</div>
#if (Model.MyLinesList != null)
{
<div class="div-marginBottom">
<table id="MyTupleList" class="table table_align">
<thead>
<tr>
<th>
State
</th>
<th>
MyLines
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.MyLinesList)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Item2)
</td>
<td>
#Html.DisplayFor(modelItem => item.Item1)
</tr>
}
</tbody>
</table>
<input type="submit" name="save" value="save" />
</div>
}
My Code:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> ProcessCreateLines(string upload, string save, CreateLinesModelView cmv)
{
//Button 'upload': Checking my lines
if (!string.IsNullOrEmpty(upload))
{
string expressions = Request.Form["ExpressionTextarea"].ToString();
List<Tuple<string, string>> result = new FileUploadController().CheckExpressions(expressions);
cmv.MyLinesList = result;
return View("ProcessCreateLines", cmv);
}
//Button 'save': Saving my lines into a Database
if (!string.IsNullOrEmpty(save))
{
// ****************************MyLinesList is null*******************
var list = cmv.MyLinesList;
...saving my list into database...
}
}
I managed to solve my problem thanks to the comment of #StephenMuecke by using instead of a Tupel a selfmade class
public class MyListModel
{
public string myLine { get; set; }
public string myState { get; set; }
}
}
and creating a List out of it in my ViewModel
public List<MyListModel> LineWithState { get; set; }
Also in my View I replaced the foreach loop with a for loop
#for (int i = 0; i < Model.LineWithState.Count; i++)
{
<tr>
<td>
#Html.TextBoxFor(m=>m.LineWithState[i].myState)
</td>
<td>
#Html.TextBoxFor(m=>m.LineWithState[i].myLine)
</tr>
}