One Page with Counter +

One Page with Counter + - in ASP.NET

Mark Tabor

Hi I need a page just like the slide in which I have a counter which the user can increase and decrease , but it should be updated the other site like if my Page is viewed at 10 location then they should get updated as soon as the admin update the counter , It is just for a need of queue system where one user manually Update the queue number from his office the other location should get updated as soon as the admin update.

any reference example or mthodology to adobe which get updated on every micro second do i need to save the counter into the db or i can run it without saving to db , but the question is if i am not saving it into the DB then how the other locations get updated how the variable counter value is shared among many location ( although I will host the application on the server )

12 Replies

Know the answer? Post it — somebody with the same question will find it here.

Salman Beg6y ago
I can able to see in your action method that you are passing counter. So from Ajax call also you need to pass counter. Thanks.
0
Mark Tabor6y ago
salman beg what would be data in my case

0
Salman Beg6y ago
Mark. We need to change this code. In the button click event we need to call the action method. You can follow up with this link for example, https://www.c-sharpcorner.com/UploadFile/302f8f/Asp-Net-mvc-using-jquery-ajax/
0
Mark Tabor6y ago
Salman Beg
can you check the below code it works fine as i have one view where i have buttons for increment ,decrement and reset and it is working fine but i did not use ajax i normally calling controller method on button click so how to conver the entire stuff to be ajax based
0
Salman Beg6y ago
Hey Mark. If you will not use database then it's difficult to manage the value because Everytime you are updating the value. I can understand that you are thinking about every time hitting to db means it will take some time but as we are using asynchronously then performance will not affect much. Thanks.
0
Ramachandran M6y ago
Try below code

Create partial view

public ActionResult Create()
{
var model = new MyModel();
if (Request.IsAjaxRequest())
{
return PartialView( "_Partial", model.PartialModel );
}
else
{
return View( model );
}
}

bind the partial view inside the view

$(document).ready(function(){
setInterval(callajax,1000);
function callajax()
{
$.ajax({
url: '/controller/create',
dataType: 'html',
success: function(data) {
$('#myPartialContainer').html(data);
}
});
}

});
0
Mark Tabor6y ago
Hi I have made a simple view with counter variable and Three buttons one to increment one to decrement and one to reset the value

as below in my code.

View:
@model IEnumerable
@{
Layout = null;
ViewBag.Title = "Home Page";
}
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
"text/css">
#div1, #div2 {
height: 50px;
}
.container {
height: 550px;
width: 1350px;
background-color: dimgrey;
}
.row .col-xs-6 {
height: 300px;
background-color: black;
color: white;
}

@using (Html.BeginForm("UpdateCounter", "Home",
FormMethod.Post, new { enctype = "multipart/form-data" }))
{
class="container">
class="row">
class="col-xs-6">
"text-align:center;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-size:100px;">TOKEN NUMBER
@foreach (Counter customer in Model)
{
class="col-xs-6" style="background-color:red">
"text-align:center;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-size:200px;">@customer.Counter_value

}

class="row" style="text-align:center">

"submit" value="+" class="w3-button w3-block w3-black" />

"submit" value="-" class="w3-button w3-block w3-black" />

@Html.ActionLink("Next", "UpdateCounter", "Home", null, new { @class = "btn btn-primary" })

@Html.ActionLink("Previous", "DecreaseCounter", "Home", null, new { @class = "btn btn-primary" })

@Html.ActionLink("Reset", "ResetCounter", "Home", null, new { @class = "btn btn-primary" })

}

Controller Method:

[HttpGet]
public ActionResult UpdateCounter(Counter counter)
{
using (CounterAppForANTHEntities1 entities = new CounterAppForANTHEntities1())
{
Counter updatedCustomer = (from c in entities.Counters
where c.id == 1
select c).FirstOrDefault();
updatedCustomer.Counter_value = updatedCustomer.Counter_value+1;
entities.SaveChanges();
// return View(updatedCustomer);
}
return RedirectToAction("Index");
}
[HttpGet]
public ActionResult DecreaseCounter(Counter counter)
{
using (CounterAppForANTHEntities1 entities = new CounterAppForANTHEntities1())
{
Counter updatedCustomer = (from c in entities.Counters
where c.id == 1
select c).FirstOrDefault();
updatedCustomer.Counter_value = updatedCustomer.Counter_value - 1;
entities.SaveChanges();
// return View(updatedCustomer);
}
return RedirectToAction("Index");
}
[HttpGet]
public ActionResult ResetCounter(Counter counter)
{
using (CounterAppForANTHEntities1 entities = new CounterAppForANTHEntities1())
{
Counter updatedCustomer = (from c in entities.Counters
where c.id == 1
select c).FirstOrDefault();
updatedCustomer.Counter_value = 0;
entities.SaveChanges();
// return View(updatedCustomer);
}
return RedirectToAction("Index");
}

how i can convert this into the Ajax based methodology and update aschronously , I also need another page where i will haev no buttons i just need to show the counter value which getting update after every seconds .

Ramachandran M6y ago

1. Use setInterval to call ajax method

setInterval(function, milliseconds);

set to function executes on every 1minute and fetches new data from the server.

1. Use UpdatePanel with traget ID and display the value

2. Programatically trigger button click event inside the update panel and display the result

Mark Tabor6y ago

what if i do not use the database? can i achieve the same result

Salman Beg

Salman Beg6y ago

When you change value from 78 to 79, and after that if four person opened the page then they can able to see 79. But if the page is opened from a long time then they cann't be able to see 79. To resolve this issue i have 2 solutions exists.

i/ They need to refresh the page.

ii/ In that page, you can add an ajax call with async:true and need to add timer(after what time that value will be updated automatically). so in the ajax after particular time crossed the ajax call will call automatically and it will hit to the db, get the value and update the particular counter value in that page.as it will work asynchronously so it won't effect that much on performance.

Thanks.

Mark Tabor6y ago

Salman Beg Thanks if i have opened the counter application in three places and I have updated the counter from 78 to 79, Should the other four person who has open up the same page would be able to see the updated value or they need to refresh the page.

Salman Beg6y ago

Hi.

Create a method which will save the counter value in db. Whenever the user clicks call the method using ajax with async:true. So that the method will call asynchronously and it will update the value accordingly. Thanks.