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.

Bootstrap classes are not working with HTML Controls in the view

In my MVC project I applied bootstrap classes to the html input controls but it is not working, before that I used html helper #Html.Editorfor but experiencing the same issue. My code:
HTML:
<div class="container">
<div class="row">
<form action="~/EditProfile/PersonalEdit" method="post" enctype="multipart/form-data">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="text" id="fname" name="fname" placeholder="First Name" class="form-control" />
</div>
</div>
</form>
</div>
HTML helper:
#Html.EditorFor(model=>model.FirstName,new {#class="form-control"})
How can I apply Bootstrap classes and make it responsive?

double check and make sure you are linking to bootstrap properly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

View the source of this page and check if bootstrap.css is available on the page. Also check in chrome developer tools network tab for the path to css and js files. I should not be returning 404 error.

ASP.net C# bootstrap datetimepicker assign value

I'm trying to display the date from the code behind in the bootstrap DateTimePicker, but it won't display correctly.
This is my HTML/ASP Script:
<asp:TableCell>
<asp:Label ID="Label9" runat="server" Text="Label">DATE ISSUED:</asp:Label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<asp:TextBox ID="txt_DateIssued" runat="server"
CssClass="form-control" Width="374px">
</asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</asp:TableCell>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD' });
});
</script>
And here's my C# code:
txt_DateIssued.Text = "2016-03-13";
Output:
Output - DateTimePicker
and when I clicked on the calendar icon, the year begins at 0003 :(
QUESTION:
How can I display the date 2016-03-13 on the textbox?

I am assuming you are using this control Bootstrap Datepicker. In the future you should include the link to the library you have a question on (if your question is concerning a library).
Your JavaScript looks fine. Are you seeing any console errors in the browser? Are you using the latest version? Here is your code working in a Fiddle with the ASP.NET tags converted to standard HTML tags.
Minimal HTML fragment with script tags.
<div class='container'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' ID="txt_DateIssued" class="form-control" width="374px"></input>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
JavaScript
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD' });
});

Unable to raise div with ClientScript.RegisterStartupScript

Actually, I'm trying to show a div on a condition by using ClientScript.RegisterStartupScript.
But, I'm unable to show that. My code goes like this :
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script> $('#PopupMessgebox').modal('toggle');</script>");
PopupMessgebox is the div id
Actually, its a Login form and the login click is designed using list li and for the first time, on clicking that the popup (div) is showing and it is working fine. But, if there is any authentication problem, we are trying to show an error in the div and that div should be popped out. But that doesn't work :(
My div code :
<div id="PopupMessgebox" class="deleteModal modal hide">
<div class="modal-body">
<div style="overflow: hidden;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
</div>
<div class="alert-delete">
<dx:ASPxLabel ID="lbl_Msg" runat="server" Text="Hi" Font-Bold="True" Font-Size="Small"></dx:ASPxLabel>
</div>
</div>
<div class="modal-footer">
<div style="text-align: center;">
<button class="button grey-button" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>

Try wrapping the javascript in the document on ready
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script> $(document).ready(function() {$('#PopupMessgebox').modal('toggle');}</script>");

Try this :
ClientScript.RegisterStartupScript(this.GetType(), "show", "<script type='text/javascript'> $('#PopupMessgebox').modal('toggle');</script>");

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