MVC project views/layout broken

Question

I have this project where I applied a theme (getelella in exact) where when I left it looks good and fine (save the project and shutdown pc), but when I open my project again the layout is messed up. I created a new project and it happened again. Can you help me guys what could be the problem here please?

Update, additional info:

At every time I freshly open my project, I run it to check my current progress but it doesn't start to build and it stays there for 20 mins before it runs the project.

As requested in the comment:

 <!-- Bootstrap -->
<link href="~/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Font Awesome -->
<link href="~/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<!-- NProgress -->
<link href="~/vendors/nprogress/nprogress.css" rel="stylesheet" />
<!-- iCheck -->
<link href="~/vendors/iCheck/skins/flat/green.css" rel="stylesheet" />

<!-- bootstrap-progressbar -->
<link href="~/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" />
<!-- JQVMap -->
<link href="~/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="~/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" />
<!-- Custom Theme Style -->
<link href="~/build/css/custom.min.css" rel="stylesheet" />

<!-- jQuery -->
<script src="~/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="~/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="~/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="~/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="~/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="~/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="~/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="~/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="~/vendors/Flot/jquery.flot.js"></script>
<script src="~/vendors/Flot/jquery.flot.pie.js"></script>
<script src="~/vendors/Flot/jquery.flot.time.js"></script>
<script src="~/vendors/Flot/jquery.flot.stack.js"></script>
<script src="~/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="~/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="~/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="~/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="~/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="~/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="~/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="~/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="~/vendors/moment/min/moment.min.js"></script>
<script src="~/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="~/build/js/custom.min.js"></script>

Can you give us more informations? It could be various things. — Pedro S Cord, Aug 16 '17 at 16:14
What do you mean by "courier your computer"?.(Sorry im not that good in understanding english). The code is fine (HTML, CSS and JS) the problem is the project not showing what it used to look like — , Aug 16 '17 at 16:15
Is your port number is getting changed every time ?? eg localhost:3433 here 3433 is port — Power Star, Aug 16 '17 at 16:18
you may have accidentally deleted css or js files associated with gentelella, check if every files are in correct folder and path is correct. — , Aug 16 '17 at 16:19
@ashik Im pretty sure nothing was delete because i have done the same project twice and with the same problem — , Aug 16 '17 at 16:21
Check task runner and see if anything is running and updating the files in the background. — nurdyguy, Aug 16 '17 at 16:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/152077/discussion-between-power-star-and-wafuqu). — Power Star, Aug 16 '17 at 17:18

score 0 · Answer 1 · edited Jan 24 '18 at 01:54

I had a similar problem with some static html pages, and I have found out that there were a couple of JavaScript libraries placed in the wrong place. So I sought for the paths in your script. I see that all of them begin with a tilde:

<script src="~/vendors/bootstrap-daterangepicker/...
<script src="~/build/js/...

I have changed the paths in one of my pages and replaced two dots with a tilde and... bingo! the layout was lost. Then I have changed them back to two dots, like this:

<script src="../vendors/bootstrap-daterangepicker/...
<script src="../build/js/...

and... voilá! the layout was back again.

I suggest you check carefully your paths and change the beginning tilde to dots or whatever be needed and see if you can get your project to work.

MVC project views/layout broken

1 Answers1