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.

Kendo grid - strange problem with displaying toolbar

I've got some strange problems with the kendo Grid.
I recorded a very short video to show you what is exactly happening:
gif
Grid code:
<div class="demo-section k-content wide">
#(Html.Kendo().Grid(Model.Usage)
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Country);
columns.Bound(c => c.Users);
})
.Scrollable()
.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(5)
)
)
</div>
This grid is placed in a Partial View, and the funniest thing is that if I will paste this code to normal View, the toolbar is displaying good
#Edit
My goal is 3 Partial Views -> 1 with kendo Chart, 2 with another kendo Chart and 3 with this kendo Grid.
I pasted all to first partial and the same to second partial. In first everything is displaying fine:
screen
But when I will switch to the second partial, my charts are narrower and problem this grid appears:
screen
To display these Partial I'm using Bootstrap nav:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="columnChart-tab" data-toggle="tab" href="#columnChart" role="tab" aria-controls="columnn" aria-selected="true">Partial 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="lineChart-tab" data-toggle="tab" href="#lineChart" role="tab" aria-controls="line" aria-selected="false">Partial 2</a>
</li>
</ul>
<br />
<div class="tab-content">
<div class="tab-pane fade show active" id="columnChart" role="tabpanel" aria-labelledby="columnChart-tab">
<partial name="~/Pages/Shared/_ColumnChart.cshtml" model="Model" />
</div>
<div class="tab-pane fade" id="lineChart" role="tabpanel" aria-labelledby="lineChart-tab">
<partial name="~/Pages/Shared/_LineChart.cshtml" model="Model" />
</div>
</div>
When I will set second tab default as active, I have problem with the first one then

Bootstrap Tabs in .NET with persist state after page refresh

I am using native bootstrap tabs and trying to persist state of the current tab after the page refresh. Here is my form bootstrap 3 with Tabs:
<form runat="server" id="mainForm">
<div class="Tabs">
<ul class="nav nav-tabs">
<li runat="server" id="liSectionContractPayments" onclick="return makeActiveTab('sectionA');">
<a data-toggle="tab" href="#sectionA">
Heading 1
</li>
<li runat="server" id="liSectionTracking" onclick="return makeActiveTab('sectionB');">
<a data-toggle="tab" href="#sectionB">
Heading 2
</li>
<li runat="server" id="liSectionNotes>
<a data-toggle="tab" href="#sectionC" onclick="return makeActiveTab('sectionC');">
Heading 3</li>
</ul>
<div class="tab-content">
<div id="sectionContractPayments" class="tab-pane fade">
<h4>Heading 1</h4>
Content for heading 1
</div>
<div id="sectionTracking" class="tab-pane fade">
<h4>Heading 2</h4>
Content for heading 2
</div>
<div id="sectionNotes" class="tab-pane fade">
<h4>Heading 3</h4>
Content for heading 3
</div>
</div>
</div>
<%-- This is to keep the state of current tab. --%>
<asp:HiddenField ID="SetActiveNavTab" runat="server" />
</form>
I am using a hidden field SetActiveNavTab to persist state of the current tab, to do that I have the following script:
<script>
/* Not working ... */
function activaTab2(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
function makeActiveTab(activeTabName) {
$('#<%=SetActiveNavTab.ClientID%>').val(activeTabName);
activaTab2($('#<%=SetActiveNavTab.ClientID%>').val(activeTabName));
alert(activeTabName + "AND" + activaTab2($('#<%=SetActiveNavTab.ClientID%>').val()););
}
/* Not working ... */
$(document).ready(function() {
function activaTab(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
activaTab($('#<%=SetActiveNavTab.ClientID%>').val());
});
</script>
The part which is not working is marked with comments. I can't seems to save the clicked on tab to a SetActiveNavTab hidden field. Something wrong with the script?
Also not sure if there is a better way to do that?

You need to post the some part of page rather then full page post back. i-e AJAX
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
HOW IT WORKS
Source
FOR AJAX IN ASP.NET WEB FORMS
In asp.net web forms you need to put update panel
Introduction to the UpdatePanel Control
Understanding ASP.NET AJAX UpdatePanel Triggers

Posting data in Tab based page by partialview

I have 3 tabs in my Page and I used JQuery UI for tabs.
<div id="tabs" style="text-align:right;">
<ul>
<li class="myTab">
Main Information</li>
<li class="myTab"><a href=<%= Url.Action("GetPartialView","Contractors") %> >Contractors</a></li>
<li class="myTab"> Consultants </li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
There is a "Save" button in each tab.The problem is that when for example button "Save" of contractors tab was clicked the page redirect to http://localhost:1347/xxxxx/GetPartialView and didn't fire any method.I want to save data and show user a message that shows data was saved completely.How can I do it?

Do you have the [HttpPost] attribute on top of whatever action is being called to load that page?

Drag-and-drop accordion panels? (ASP.Net)

I have a set of accordion panes(dynamically created) contained in an Accordion control. Basically, what I am wanting is for the user to be capable of dragging these accordion panels so that instead of
A pane
B pane
C pane
They can drag and drop it to be something like
B pane
A pane
C pane
Or whatever. Also, more importantly, I would need to be able to detect that they have changed the order. Would there be a way to have it when they "drop" the pane that it can update a hidden field or something? I don't need a postback on every single drag and drop, but rather I want for when they hit a save button for the server application to detect the order in which the panes are so that it can save this order.
I would prefer to stay away from javascript libraries, but if it would be the easiest way, then I'll consider it.

Based on petersendidit's answer but without "disappearing accordion" bug...
<div id="accordion">
<div id="section_1">
<h3>Section 1</h3>
<p>
Body 1
</p>
</div>
<div id="section_2">
<h3>Section 2</h3>
<p>
Body 2
</p>
</div>
<div id="section_3">
<h3>Section 3</h3>
<p>
Body 3
</p>
</div>
<div id="section_4">
<h3>Section 4</h3>
<p>
Body 4
</p>
</div>
</div>
and
$("#accordion").accordion({
header:'h3'
}).sortable({
items:'>div'
});
Demo at: https://jsbin.com/bitiyucasa

You can do something like this with jQuery UI:
$("#accordion").accordion()
.sortable({
items:'>.ui-accordion-header',
change: function(event, ui) {
$content = ui.item.next();
},
stop: function(event, ui) {
ui.item.after($content);
}
});
This sets $content to the content div for that header on change. And then on stop moves that content to be after the new position of the header.
HTML would be something like:
<div id="accordion">
<h3 id="section_1">Section 1</h3>
<div>
<p>
Body 1
</p>
</div>
<h3 id="section_2">Section 2</h3>
<div>
<p>
Body 2
</p>
</div>
<h3 id="section_3">Section 3</h3>
<div>
<p>
Body 3
</p>
</div>
<h3 id="section_4">Section 4</h3>
<div>
<p>
Body 4
</p>
</div>
</div>
When your user hits the "save" button you can just call:
$('#accordion').sortable( 'serialize');
Which will give you something like:
section[]=2&section[]=1&section[]=3&section[]=4

This widget is probably the sort of thing you are after.
You can add links to the javascript in the head
<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>
The markup is then just a series of divs. With a little bit of effort you should be able to tie this into the accordion control or create a user control to do your bidding
<div id="acc-ct" style="width:200px;height:300px">
<div id="panel-1">
<div>My first panel</div>
<div>
<div class="text-content">My first panel content</div>
</div>
</div>
<div id="panel-2">
<div>My second panel</div>
<div>
<div class="text-content">My second panel content</div>
</div>
</div>
</div>
A preview of it is available here
Hope this helps

You could use predefined dojo control (open source javascript framework)(link text) and use this control from here (link text) .You can also integrate dojo with asp.net like on my blog (link text).
Waiting for response of your success