We Keep Coding

Cyclic update of a container in ASP.NET Core MVC

I'm trying to create a cyclic updating container in ASP.NET Core MVC. That's how it look like
And here is the source code:
AdminLTE
For the example in the image, if from database, here are 151 New Orders, when this part of panel is auto-updating, the value will be 151.
One solution for me was to auto-update the whole page, but it's not ok.
Second solution was to use Ajax to call the Index Controller, where I update the model's value from database each time controller is called. But this does not working, because to figure it out, the page must be refreshed. Not ok.
<script type="text/javascript">
function updateModelData() {
setInterval(updateModel, 3000);
var i = 0;
function updateModel() {
$.ajax({
url: "/Home/Index",
type: "GET",
dataType: "json",
success: function (response) {
if (response.data.length == 0) {
// EMPTY
} else {
var obj = jQuery.parseJSON(response.data);
console.log(obj);
}
}
});
}
}
updateModelData();
</script>
So how can I make this informative section to get updated in an automatic cyclic mode?
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>#Model.doctors_count</h3>
<p>Doctors</p>
</div>
<div class="icon">
<i class="fa fa-users"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>#Model.nurses_count<sup style="font-size: 20px"></sup></h3>
<p>Nurses</p>
</div>
<div class="icon">
<i class="fa fa-users"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>#Model.patients_count</h3>
<p>Patients</p>
</div>
<div class="icon">
<i class="ion ion-person"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>65</h3>
<p>This Month</p>
</div>
<div class="icon">
<i class="ion ion-pie-graph"></i>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
<!-- ./col -->
</div>
<!-- /.row -->

One option is to use JavaScript function setInterval() and make an update per each desired time interval. See here for details and basic example: JavaScript setInterval
On each time interval trigger an ajax call to a separate method in your controller that returns a partialview (so just the html code you want to update) and append it to your page (make sure you first empty the target container):
example 1: JavaScript append html
example 2 (partialview/ajax update): Update with partial view

For the example in the image, if from database, here are 151 New Orders, when this part of panel is auto-updating, the value will be 151.
To achieve the requirement of updating particular content automatically based on the latest data from database, you can try:
If you'd like to make request to backend using Ajax etc to get data and update the DOM with retrieved data automatically, as #TheMixy mentioned, you can try to call your function repeatedly using setInterval() method.
Besides, you can try to integrate ASP.NET Core SignalR in your project, which could help implement real-time web functionality that enables server-side code to push content to clients instantly.
You can call client methods to push data from server to all connected clients while you add/update orders from your backend code, then update the content on client side once it received the data.

Using Twitter Bootstrap to Make Website and Contents Mobile Friendly

I am making a website (www.jocogolocal.com), and one of the objectives is to use Twitter bootstrapping to make all contents of the site fit the screen and eliminate as much white space as possible, but I feel like I am stuck because despite my efforts, it is not formatting the way I would like it, and sometimes it would even break the site with how bad / big the content / image banner gets. below is the code of both the master page and the page with the content, View Vendor, any help will be highly appreciated.
Master page
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="container">
<asp:Image runat="server" ImageAlign="Middle" ImageUrl="~/Images/JoCoGoBanner.png" class="img-responsive col-lg-12 col-md-12 col-sm-12 "/>
</div>
</div>
</div>
</div>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
View Vendor
<ItemTemplate>
<tr>
<td>
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-12">
<p><asp:Label runat="server" ID="lblName" Enabled="false" Font-Bold="true" Font-Size="X-Large" Text='<%# Bind("Name") %>'/></p>
</div>
</div>
</td>
</tr>

There is no full answer to this question other than to point you in the right direction to help yourself.
Tables should be used to display tabular data. They shouldn't be used for full site layout which is what you are essentially doing. One of the main selling points to bootstrap CSS is that it has already fleshed out flexible building blocks for you to use. I'm assuming this is a school project? Challenge yourself to build the layout without tabular structure using divs and the bootsrap classes (containers, rows, cols). With the current site it looks like you are missing the point of bootstrap all togather.
If you are attempting to eliminate white space, stop stacking containers inside of containers inside of containers. Each one of these elements has their own padding and margin values so every time you do this, you are fighting against yourself even more.
For Example, your first table is full of unnecessary elements that are fighting against what you are trying to do.
You:
<table>
<tbody><tr>
<td>
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="container">
<img class="img-responsive col-lg-12 col-md-12 col-sm-12 col-xs-20" src="Images/JoCoGoBanner.png">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody></table>
Clean div with flexible layout using bootstrap:
<div class="jumbotron p-0"><img class="img-responsive col-lg-12 p-0" src="Images/JoCoGoBanner.png"></div>
Break free from tabular layout thinking or you will always be fighting against yourself dealing with flexible layout requirements.

selenium c# how to set values to Span and hidden span text

i am trying to send values to tag-text using c# selenium. tried different scenarios but could not. can any one help me?
<div class="list">
<div class="darkTag">
<div class="contents">
<span class="tag-text">Tamil</span>
<div class="tag-remove">x</div>
</div>
<div class="tag-bg" style="background: rgb(255, 87, 51);"></div>
</div>
</div>

C# ASP.NET insert html code into repeater based on the data from db

So needed help again
Sorry a bit confusing but, I am trying to create a chat box which user can submit and then retrieve it again from the DB, I am following this script https://bootsnipp.com/snippets/EkQe7
As you can see, from the HTML code, there is two types, one is when you chat and another is when other people chat,
<div class="chat">
<div class="chat-history">
<ul class="chat-ul">
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
</ul>
</div> <!-- end chat-history -->
</div> <!-- end chat -->
So now, what I am trying to do is from the retrieve the message from DB then code-behind submit the HTML code into the Repeater,
If it is "You", then will use this code
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
If it is other people, then will use this code
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
My question is how to do that from Code-Behind PageLoad? How to add the code above into the Repeater from code-behind?
Thanks!

First, you'll have to retrieve the records in the database in the code behind. (See this msdn article for details)
messages.DataSource = myMessages;
messages.DataBind();
Now we can use Repeater, in which the html is separated by author, to iterate the data. Note that I am assuming how your database of messages is structured.
<asp:Repeater id="messages" runat="server">
<ItemTemplate>
<div runat="server" visible='<% (Container.DataItem("author") == "us") %>'>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
<%# Eval("testMessage") %>
</div>
</li>
</div>
<div runat="server" visible='<% (Container.DataItem("author") != "them") %>'>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name"><%# Eval("authorName") %></span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right">
<%# Eval("testMessage") %>
</div>
</li>
</div>
</ItemTemplate>
</asp:Repeater>
I haven't tested this code, but its a high level idea of what to do. You may also want to see some Examples on using Repeater.

.active class not active on Bootstrap progress bar in Modal

I have a Modal on my View which contains a progress bar. The problem is, although I added the active class to the progress bar to animate, when I Inspect Element in Chrome, I can see that the .active class is not applied.
Here is my modal:
<div class="modal fade" id="pleaseWaitDialog" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Processing...</h4>
<p>This may take a while, depending on your connection.</p>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Importing Patients
</div>
</div>
</div>
</div>
</div>
</div>
And here is a image of the modal when I Inspect Element.
Why is this happening?

Add your active class by yourself before the 'Show' model line as
$(".progress-bar").addClass('Active');
$("PleaseWaitDialog").model('show');
There is some piece of code that is removing this class.

Basically .active class you used is to animate the progress bar dynamically.
This may be occur if some of classes you used over write the .active class. You can test this problem by using this class in nested form or use it one by one.
Otherwise you can handle it by using java-script to handle it dynamically.
Try this :
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>