I have a twitter bootstrap nav bar, but evertime I navigate on a link it is clearly reloading the navbar with everything else. Isn't it not supposed to do that? I would like it if it didn't. I'm not sure maybe if I'm doing something wrong in my _Layout or not. Any ideas on why my navbar could be reloading?
<link href="../../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/dt-min.js")" type="text/javascript"></script>
<link href="../../Content/Reflection.css" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="float-left" style="width:315px">
<p class="site-title">#Html.ActionLink("Kinfolk", "Index", "Home", new { #style = "color:Orange" })</p>
</div>
<div class="float-center">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu" class="nav">
<li>
<div class="reflection">
<a href="#Url.Action("AllWallPost", "Home")" title="Home">
<img src="../../Images/home (1).ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#Url.Action("UserProfile", "UserProfile")" title="My Profile">
<img src="../../Images/user.ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#" title="Events">
<img src="../../Images/calendar_2.ico" />
</a>
</div>
</li>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
From the code you provided, it is normal that the page reloads when you click on a link.
If you want the page to change without reloading everything, you'll have to use some Ajax (JavaScript) and a combination of Request.IsAjaxRequest() (controller) and PartialView (view).
There are lots of resources out there with those keywords.
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
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
The below code to display "Add Date" button and by clicking that button it will display the modal with external mvc view. "CheckDateShow" is the view page here.
<div class="add-dependent left">
<a href="../Home/CheckDateShow" data-toggle="modal" data-target="#myModalAdd">
<img src="../../Reskin/images/banificiary.png" alt="">
<span class="green-btn">Add Date</span>
</a>
</div>
The modal where it would bind given in below code and it exists in same page.
<div class="modal fade dependents-modal" id="myModalAdd">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The "CheckDateShow" page contains the below code:-
<html>
<head>
<title>..:: Company Logo ::..</title>
<link rel="stylesheet" href="../../css/jquery-ui.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" href="../../css/style.css">
<script src="../../js/jquery-1.10.2.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jquery-ui.js"></script>
<script src="../../js/custom.js"></script>
</head>
<body>
<div>
<ul>
<li>
<label for="">Date of Birth:</label>
<div class="input-data date">
<input type="text" class="input-type datepicker">
<i class="fa fa-calendar"></i>
<span class="red">*</span>
</div>
</li>
</ul>
</div>
</body>
</html>
Now by loading this it is showing only a textbox control, but in reality it should display a datepicker rightside of textbox and we can be able to choose a date.
Please help to resolve this issue.
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 need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>
Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE