Solved

MVC 5 Razor Values and Jquery Progress Bar?

Posted on 2014-07-23
2
3,991 Views
Last Modified: 2014-07-27
I've read the docs and the tried examples and still cannot get MVC 5 Razor variables to work with Jquery Progress bar.  This progress bar is used for a charity drive to show the Goal, Raised, Progress (goal-raised) and percentage in text. This very typical behavior I know. Help...

_________________________________________________________________________________________
||||||||||||||| 40% |||||||||||                                                                                        |
-----------------------------------------------------------------------------------------

Open in new window


Here's what I have so far...

View
known values:
        alert(@Model.Raised);   //  750
        alert(@Model.Goal);     //   100000
        alert(@Model.Progress); // 99250

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></script>
<script src="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css"></script>
<script type="text/javascript">

//basic jquery example which works...
 $(function () {
     $("#progressbar > .ui-progressbar-value").animate({
              width: "77%",
              value: "11"
          }, 600);
     });
</script>

<style>
    .progress-bar 
    {       
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        display: inline-block;
        margin: 0px 10px 5px 5px;
        vertical-align: top;
    }

Open in new window

0
Comment
Question by:WorknHardr
2 Comments
 
LVL 78

Accepted Solution

by:
David Johnson, CD, MVP earned 500 total points
ID: 40216475
Here is some working code http://screencast.com/t/HHQItmfl
http://jqueryui.com/progressbar/#download

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Download Dialog</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var progressTimer,
progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" ),
dialogButtons = [{
text: "Cancel Download",
click: closeDownload
}],
dialog = $( "#dialog" ).dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
buttons: dialogButtons,
open: function() {
progressTimer = setTimeout( progress, 2000 );
},
beforeClose: function() {
downloadButton.button( "option", {
disabled: false,
label: "Start Download"
});
}
}),
downloadButton = $( "#downloadButton" )
.button()
.on( "click", function() {
$( this ).button( "option", {
disabled: true,
label: "Downloading..."
});
dialog.dialog( "open" );
});
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
dialog.dialog( "option", "buttons", [{
text: "Close",
click: closeDownload
}]);
$(".ui-dialog button").last().focus();
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
if ( val <= 99 ) {
progressTimer = setTimeout( progress, 50 );
}
}
function closeDownload() {
clearTimeout( progressTimer );
dialog
.dialog( "option", "buttons", dialogButtons )
.dialog( "close" );
progressbar.progressbar( "value", false );
progressLabel
.text( "Starting download..." );
downloadButton.focus();
}
});
</script>
<style>
#progressbar {
margin-top: 20px;
}
.progress-label {
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body>
<div id="dialog" title="File Download">
<div class="progress-label">Starting download...</div>
<div id="progressbar"></div>
</div>
<button id="downloadButton">Start Download</button>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:WorknHardr
ID: 40223080
That code gives me many good solutions, thx...
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This tutorial gives a high-level tour of the interface of Marketo (a marketing automation tool to help businesses track and engage prospective customers and drive them to purchase). You will see the main areas including Marketing Activities, Design …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now