Getting the following console error when running a program after it's been deployed that I don't get when using VS2013:
Note: Updated Console Error output based on using Fiddler (this is the response from the 500 status code
readyState: 4, responseText: "<!DOCTYPE h...", status: 500, statusText: "Internal Se..."}
readyState: 4
responseText:
"<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error - My ASP.NET Application</title>
<link href="/Contentbug/css?v=MDbdFKJHBa_ctS5x4He1bMV0_RjRq8jpcIAvPpKiN6U1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>
<hr />
<footer>
<p>© 2015 - My ASP.NET Application</p>
</footer>
</div>
<script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
<script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModal-label">ATTENTION: Please Review Your Custom Email Before Sending</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
<button type="button" class="btn btn-primary" id="sendButton" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
<script>
$('[name="optradio1"]').on('change', function () {
....
});
</script>
...
</body>
</html>
status: 500
statusText: "Internal Server Error"
After reading a few threads about the BundleConfig I changed it so that my bundle name wasn't the same as one of my directory names but that still didn't work as I'm getting the same error, except with the updated name change.
Thoughts/suggestions?
BundleConfig
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Contentbug/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
Portion of _layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Contentbug/css")
#Scripts.Render("~/bundles/modernizr")
</head>
first do these things.
Deploy only compiled code.
hosting directory should be the root directory(Eg:www.stackoverflow.com),you should not host in sub-directory(Eg:www.stackoverflow.com/supraj).
Make sure that you host through FileZilla, a safe method.
If these doesnt work,if you sucessfully runs in localhost,then the only problem is with webconfig file
Related
This is a very simple question. I have seen this example of a navigation bar and I would like to do something similar https://getbootstrap.com/docs/4.1/examples/pricing/.
When I copy the code
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
To my _layout.cshtml file to get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<environment names="Development">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
This does not render like the example. Why?
You are using the wrong version of Bootstrap!
Specifically, the code you copied for the nav bar is from version 4 of Bootstrap (https://getbootstrap.com/docs/4.1/examples/pricing/, note the 4.1 in the url), but the libraries you are calling in are for version 3.3.6. These versions are not compatible, you need to pick one or the other.
At least that what it looks like, I'm not sure what is in your 'css' bundle that you are calling for development, but for staging and production you are calling on https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css, again, note the 3.3.6
jquerymobile panel cross page
I wanna make a same panel menu for every page.
because the panel menu is the same content for every page.
How do I do? or any suggest?
My sample code is by following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div data-role="page" id="status">
<div data-role="header" data-theme="b">
<h1>Access Point Status</h1>
<a class="ui-btn" data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
</div>
<div id="left-menu" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
</div>
<div data-role="page" id="A">
<div data-role="header" data-theme="b">
<h1>PAGE A</h1>
<a class="ui-btn " data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
</div>
<div id="left-a" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>
create a panel in body tag and outside page div like following
<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="false">
<a href="#" data-transition="pop" data-rel="close">
Home
</a>
</li>
<li data-icon="false">
Logout
</li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
.... other pages ....
</body>
then in pagecreate event of first page add this
$(document).on("pagecreate", "#firstPage", function () {
$("body>[data-role='panel']").panel().enhanceWithin(); //you can put this in document.ready but its not preferable
}
I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();
I want to prevent any client page in my MVC 5 application from being cached. My _Layout.cshtml page looks as follows. Notice the code in the head tag. Is this enough (and is it correct) to prevent caching on any page in my app? Or do I need to also add code on every page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="visible-lg visible-md" src="~/Images/WebBirderFatbirder.png" title="WebBirder">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div id="bodyContentDiv" class="container body-content">
#RenderBody()
<hr />
<footer>
<br/>
<br />
<br />
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am trying to get modal data-dismiss action working to close the modal on click. There seems to be an issue that I cannot find documented and hopefully someone here can shed some light on it. Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Modal test </title>
<link href='themes/default/bootstrap/css/bootstrap.css' rel='stylesheet'/>
<link href='themes/default/bootstrap/css/bootstrap-responsive.css' rel="stylesheet"/>
</head>
<body>
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">x</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not...
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="themes/default/bootstrap/js/bootstrap.js"></script>
</body>
</html>
is the full suite of bootstrap including bootstrap-modal.js
I put in the <div class="alert alert-block"> for testing the action, it seems to work in the alert but not the modal!
add this code please:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal(); // initialized with defaults
$('#myModal').modal('show'); // open your modal dialog
});
</script>