how to disable ActionLink in razor after 2 minutes - javascript

First time using StackOverflow.
I have a table with different data and I want to disable actionlink after two minutes
<table class="table">
<tr class="btn-danger">
<th>
#Html.DisplayNameFor(model => model._art.libelle)
</th>
<th>
Image
</th>
<th>
#Html.DisplayNameFor(model => model._art.prix_initial)
</th>
<th>
Prix Courant
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr class="btn-primary">
<td>
#Html.DisplayFor(modelItem => item._art.libelle)
</td>
<td>
<img src="#Url.Content(item._art.img)" width="300" height="300"/>
</td>
<td>
#Html.DisplayFor(modelItem => item._art.prix_initial)
</td>
<td>
#{ var prix_calcule = item.valeur_courante
* 0.1 * item._art.prix_initial
+ item._art.prix_initial;
}
#prix_calcule
</td>
<td id="test">
<h1>#Html.ActionLink("Encherir", "Encherir", new { id_article = item._art.id }, new { #class = "btn btn-success" })</h1>
</td>
</tr>
}
</table>
I want after two minutes the actionLink "encherir" to be disabled.
I've tried javascript but unfortunately, it will disable just the first row in the table.

Once you've delivered something to the browser, your control is very limited. There are ways to hide it with Javascript, but users can just turn javascript off, which would leave it up forever.
The best way to handle this, though, is still to hide it with Javascript, but then also include an expiration token in the link. Give it a unique, encrypted value as a GET argument that tells you when it expires. Then, if the user clicks on the link they shouldn't have after two minutes, you can decode that token and return a "Sorry, your link expired" page instead of the real one.

Related

I'm trying to auto populate labels(with parameters from object) on selecting option from dropdown list

I'm new to mvc and html/js both.
So the basic idea of what I am trying to do is:
Dropdown(used to select bookTitle)
Labels below get auto populated with selected book details from dropdown(id,title,author,price,quantity,etc)
Button on the side of these labels which will add this obj into a List
Whole list will then be used for checkout
I'm stuck with the auto-populated labels and add button
Would be a grateful if anyone would be willing to help me
Here is my code:
'''
#model IEnumerable<BookWebApp.Models.Books>
#{
ViewData["Title"] = "OrderBooks";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<html>
<center>
<h1>OrderBooks</h1>
<hr/>
<div id="Title">
<select id="Title_Select">
<option value="" selected-disabled>
Book Names
</option>
#foreach(var item in Model)
{
<option value=#item.Title>
#item.Title
</option>
}
</select>
</div>
<button onclick="getValue()"> Check Details</button>
<hr/>
<div>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.BookID)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
#Html.DisplayNameFor(model => model.Quantity)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
//labels for obj here
</tr>
</tbody>
</table>
</div>
</center>
'''
To populate the list you can do as you did with the DropdownList with a foreach and insert all the fields in the order of the header and on the last one check with value id.
Finally, a push button for the with an onclick function.
In the onclick function you scroll through the list and take Id of all the checkboxes that have the checked property.
You now have the list of all the selected books.
if you want I can give you an example but I suggest you see for yourself that it is much more instructive, tell me if you want the example
There are two ways you can add the labels to the list and then bring the list to the Checkout page, use ajax to post data or use MVC submission. I would recommend the first one (using ajax) because the page will not be refreshed.
Solution 1: Use ajax
Create a Controller method to save the record
Whenever the user click on the button, make an ajax call to post the item to the method, save it to somewhere (Persistence database or cache)
When user navigate to the check-out page, retrieve the list and display to the user
Also you may want to add a remove button for easily manage.
Here's the code to populate the labels:
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.BookID)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
#Html.DisplayNameFor(model => model.Quantity)
</th>
<th>
<!-- This one is for the add button -->
</th>
</tr>
</thead>
<tbody>
#foreach(var label in Model.Labels)
{
<tr class="table-row">
// labels for obj here
<td class="label-id">#label.Id</td>
<td class="label-id">#label.Title</td>
<td class="label-id">#label.Author</td>
<td class="label-id">#label.Price</td>
<td class="label-id">#label.Quantity</td>
<td>
<button class="btn-add-to-collection" onclick="addLabel(this)"></button>
</td>
</tr>
}
</tbody>
<script>
function addLabel(el) {
// query for the properties value then use ajax to post the data to controller
// also save it to the current page state for easily modify
}
</script>
There are multiple methods to achieve your goal to auto populate label data:
Set Attribute values to your select which comprise of details of books.
1.1. Implement an onChange function for your select which will populate data from Select attribute in your labels.
Implement an onChange function for your select which will send an ajax call to your controller.
2.1. Retrieve values from controller and populate relevant values in labels
Create a separate button, on its onClick send an ajax call to your controller.
3.1. Retrieve values from controller and populate relevant values in labels
Now coming to Adding data in list:
Why providing separate buttons for all labels?
Why not add a button Proceed to check out?
And for that you can do:
$.each($(table).find('tbody tr'), function (j, row) {
});
in this code you get all your label values and push them in the list proceed as you please
I hope this helped, if you need code snippets for above mentioned processes, let me know, I will update my answer accordingly.
Edit 1, Solution 1
<div>
<center>
<h1>OrderBooks</h1>
<hr />
<div id="Title">
<select id="Title_Select" onchange="SelectOnChange()">
<option value="" selected-disabled>
Book Names
</option>
#foreach (var item in Model)
{
<option value=#item.BookID>
#item.Title
</option>
}
</select>
</div>
<hr />
<div>
<table class="table" id="BooksTable">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.BookID)
</th>
<th>
#Html.DisplayNameFor(model => model.Title)
</th>
<th>
#Html.DisplayNameFor(model => model.Author)
</th>
<th>
#Html.DisplayNameFor(model => model.Price)
</th>
<th>
#Html.DisplayNameFor(model => model.Quantity)
</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<hr />
<button onclick="ProceedCheckOut()"> Proceed to CheckOut</button>
</div>
</center>
</div>
$(document).ready(function () {
SelectOnChange = function () {
var BookId = $("#Title_Select :selected").val();
var URL = '/Underwriting/Case/GetBookDetailsById';
var _data = {
BookId: BookId
};
$.ajax({
url: URL,
type: "POST",
dataType: "html",
contentType: "application/json",
data: JSON.stringify(_data),
async: true,
success: function (result) {
var Books = JSON.parse(result);
var tr = '<tr>' +
'<td id="BookID">' + Books.BookID + '</td>' +
'<td id="Title">' + Books.Title + '</td>' +
'<td id="Author">' + Books.Author + '</td>' +
'<td id="Price">' + Books.Price + '</td>' +
'<td id="Quantity">' + Books.Quantity + '</td>' +
'</tr>';
$('#BooksTable > tbody').append(tr);
},
error: function (jqXHR, textStatus, errorThrown) {
$Extention.HideLoader();
_$.Notification("YOU MIGHT BE ENTERING WRONG VALUES.", 200);
}
});
}
ProceedCheckOut = function () {
var Books = new Object()
$('#BooksTable tbody tr').each(function (i, field) {
Books.BookID = parseInt($(field).find('#BookID').text());
Books.Title = $(field).find('#Title').text();
Books.Author = $(field).find('#Author').text();
Books.Price = parseFloat($(field).find('#Price').text());
Books.Quantity = parseInt($(field).find('#Quantity').text());
});
console.log(Books);
}
});
I have made minor changes to your code:
Implemented an onChange button, removed GetDetails button, In OnChange button i have called my controller function to get details from database against BookId.
Once i get book details from controller i render that data in my Ajax success
Created a Proceed to checkout button, this button gets data from table and inserts it in an object, now you can use that object to send book data to another page or your controller.
In case of further help please let me know

Not able to pass value from view to controller with jquery POST in mvc 5

I want to pass text box value and Dropdown selected value as Id which user is entering through jquery POST method from view to controller, but i am not able to pass that values at some point in the code i am missing something but not able to find my mistake, also as there can be multiple records and each records display dropdownlist and textbox differently so how i will know i am using textbox with that particular id and that data from textbox saved in that particular id, i am talking about the role of data-posid to be used in jquery post
My code is as follows
<table class="table">
<tr>
<th>
Item Name
</th>
<th>
Reorder Level
</th>
<th>
Current
</th>
<th>
Outstanding
</th>
<th>
Supplier
</th>
<th>
Quantity
</th>
<th></th>
</tr>
#foreach (var item in Laundrybooking)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ItemId)
</td>
<td>
#Html.DisplayFor(modelItem => item.Reorder)
</td>
<td>
#Html.DisplayFor(modelItem => item.Currents)
</td>
<td>
#Html.DisplayFor(modelItem => item.Outstanding)
</td>
<td>
#Html.DropDownList("SIId", null, new { #data_posid="#item.POSId", #class = "form-control", #type = "text"})
</td>
<td>
<input data-posid="#item.POSId" type="text" id="qty" class="qty form-control" placeholder="Quantity" />
</td>
<td>
<button data-posid="#item.POSId" class="addQty btn btn-default"><i class="fas fa-save"></i></button>
</td>
</tr>
}
</table>
$(function () {
$('#SIId').change(function () {
$('.addQty').click(function () {
$.post("#Url.Action("AddQuantity", "PurchaseOrder")", { id: $(this).data('posid'), Qty: $('#qty').val(), Siid: $("select option:selected").val() })
});
});
});
public ActionResult AddQuantity(decimal? Qty, int id, int Siid)
{
var posid = db.SingleOrDefault<POStaging>(id);
if (ModelState.IsValid)
{
posid.Qty = Qty;
posid.SIId = Siid;
db.Update(posid);
}
return RedirectToAction("Index");
}
Please help me with this
Problem is with this code
$('#SIId').change(function () {
$('.addQty').click(function () {
$.post("#Url.Action("AddQuantity", "PurchaseOrder")", { id: $(this).data('posid'), Qty: $('#qty').val(), Siid: $("select option:selected").val() })
});
});
Here you are registering the click event for the button on onChange event of the DropDownList which is fine, but it does not triggers the click event of that button and hence no post call is happening, you need to click on the button to fire the post call. other then that everything looks ok, I have tried this and it is posting the data.
Hope this helps or let me know if I am missing something here...
Happy coding...

Laravel pagination table - sort for one column

I currently have the following:
<table class="table table-striped">
<tr>
<th> Artikelbild </th>
<th> Artikelnummer </th>
<th> Name des Artikels </th>
<th> Beschreibung </th>
<th> Preis </th>
<th> Kategorie </th>
</tr> #foreach($products as $product)
<tr class='clickable-row' <?php if($product->stockCount === 0) echo "style='color:red;'";?>data-href="{{url('/product')}}
<?php echo '/'.$product->id;?>">
<td> <img src="/images/{{$product->imageUrl}}" class="productImageSmall" /> </td>
<td> {{$product->id}} </td>
<td> {{$product->name}} </td>
<td>
<?php if (strlen($product->description) > 30) { $productShortened = substr($product->description, 0, 30) . "[...]"; } else { $productShortened = $product->description; } echo $productShortened; ?> </td>
<td>
<?php echo number_format($product->price, 2, ',', '.');?>€ </td>
<td> {{$product->categoryName}} </td>
</tr> #endforeach
</table>
The $product thing is passed from my controller with the paginate() option.
Now I want that this table is sort-able by one column. So lets say, the user clicks on the "price" (or Preis in german) column on top of the table, then all results should be sorted by the price (from low to high or from high to low), same for the category, for the name and every other column.
How can I do this? Do I have to reload the page and get the data again from the db, but somehow sorted (if yes, how?). Or can I somehow just sort it without reloading it? How can I do this?
Thanks for any help
Building sortable tables is a pretty time-consuming task, so I'd recommend you to use some package. I use this package for building sortable tables.
If you still want to build this functionality by yourself, you can add arguments like ?price=desc to the URL and get these with the request() method. Just an example:
if (request()->has('price')) {
$query = $query->orderBy('price', request('price'));
}
And don't forget to append URL arguments to the pagination links:
{{ $products->appends(['price' => 'desc'])->render() }}

Get the row index of bootstrap table in click without using jquery

I have a bootstrap table in my react project. I want to get the index of row which I click on. I want to do something like this onclick = {this.handleClick} and in handleClick function I want to get the index of row. Is it possible to do it. Most of the solutions available shows everything using jquery and I don't want to use Jquery. I want to do it using just javascript only. This is my table
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th> </th>
<th> Time In </th>
<th> Time Out </th>
<th> Type </th>
<th> Category </th>
</tr>
</thead>
<tbody>
{
FLAGS_LIST.map((x,i)=> (
<tr key={i}>
<td> <div className='red-box'></div> </td>
<td> {x.time_in} </td>
<td> {x.time_out} </td>
<td> {x.type} </td>
<td> {x.category} </td>
</tr>
))
}
</tbody>
</Table>
You can use code like this:
onclick = {this.handleClick.bind(this, i)};
and handleClick should declare like this:
var handleClick = function(i) {
console.log("key of row", i)
...
};

showing adjacent rows in a table using jquery

I am using mvc5 and razor and I have all data required bound to the view.
View.cs
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.TestTermin)
</th>
<th>
#Html.DisplayNameFor(model => model.Location)
</th>
<th>
#Users applied
</th>
</tr>
#foreach (var test in Model)
{
<tr class="text-left">
<td>
#Html.DisplayFor(modelItem => test.TestTermin)
</td>
<td>
#Html.DisplayFor(modelItem => test.Location)
</td>
<td>
#test.Users.Count
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = test.ID }) |
#Html.ActionLink("Details", "Details", new { id = test.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = test.ID })
</td>
</tr>
foreach (var user in test.Users)
{
<tr class="hideMe" style="display:none">
<td>#user.FirstName</td>
<td>#user.LastName</td>
<td>#user.Email</td>
</tr>
}
}
</table>
This results in a html like this:
<tr class="text-left">
<tr class="hideMe">
<tr class="hideMe">
<tr class="text-left">
<tr class="hideMe">
<tr class="text-left">
Is there a way, using jQuery, or something else from the mvc5/razor suite, that can achieve the following:
Clicking on a row, shows the adjacent hidden rows, and on click hides them back again? I do not want to show ALL hidden rows in the table, just the ones that belong to the clicked tr.
I have tried the following:
<script type="text/javascript">
$('tr').click(function () {
var $this = $(this);
$('tr').toggle('slow');
});
</script>
but this just shows everything hidden, and hides everything visible which is not the functionally I am after.
The problem in your code $('tr').toggle('slow'); is that the selector $('tr') selects all the tr's and toggles the display of all the tr's. What you need is to just select the next couple of tr's to the current clicked tr and toggle its display. You can make use of the Jquery .nextUntill() feature.
Working Fiddle
$('tr.text-left').click(function () {
$(this).nextUntil("tr.text-left").toggle('slow');
});

Categories