We Keep Coding

Bootstrap Date and Time Picker not showing icons in MVC Razor

I´m trying to setup a date and time picker, but the icons (Calendar and Time) does not shows up. Here is my code:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div id="datetimepicker1" class="input-append date">
Date and Time Test
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
</script>
I´ve tried to change icon-time and icon-calendar to glyphicon-time and glyicon-calendar and no success.
Here is what I get:
Don´t know what to do.. I need help, please. Thanks.

The website for the tarruda bootstrap-datetimepicker.js that you are using says the plugin is not currently maintained. It does not appear to have been upgraded for Bootstrap 3.
I'd suggest one of these date/time picker plugins that are compatible with Bootstrap 3:
http://eonasdan.github.io/bootstrap-datetimepicker/
http://www.malot.fr/bootstrap-datetimepicker/
And if you really want to get the one you are using to work, you can try making manual changes to the JS and CSS. Follow the blog post "Datepicker for Bootstrap with Twitter Bootstrap 3.0" found at kenyontechnology. The post was written for the date-only plugin on which the date/time plugin you are using was forked, so I think the changes should mostly apply.

select item in javascript of jquery

One my designer send some webpage where he used Html(div,Li) CSS for making Drop down list
<div class="frmcmpstn fl">
<a class="btn fl cll" href="#">Are you an Hwp/Family Office or an Institutional <img src="images/dd_arow_ico.png" /></a>
<ul class="signupdd_dd" style="display:none;">
<li>New Delhi</li>
<li>California</li>
<li>Gurgaon</li>
<li>North East America</li>
<li>North America</li>
<li>South Africa</li>
</ul>
</div>
now my problem is I have worked in Asp.net I dont know javascript or JQuery and
I know that is possible in java script or JQuery
Can any one tell me how can get selected item (in javascript or JQuery )....?

I think you mean:
<script type="text/javascript">
$('.signupdd_dd li').on('click',function(){
var $selectedLi = $(this);
//then do some stuff e.g
$selectedLi.addClass('selected');
});
</script>
</body> //-> don't add this line but search in your html code this tag and put <script> just before
Or target the tags:
$('.signupdd_dd li a').on('click',function(){...});

Attach an event handler to the click event for each of the anchors a. The event handler will have the element assigned to this which you can use to get the different element properties.
$(".signupdd_dd li a").click(function(e){
e.preventDefault();
$(".chosen").removeClass("chosen");
$(this).addClass("chosen");
alert($(this).text());
});
You may want to add a class to the a that is clicked for later processing. The event handler should also prevent the default action of the anchors click handler so that navigation does not occur.
Working Example: http://jsfiddle.net/vZkDp/

MVC2 C#: How can I populate a contentplaceholder with html from a file?

So.. The issue I have came across is I am migrating a client's web app to MVC2, and the original method for displaying html content is not capable of working with MVC so I am needing to update it. The functionality I need is like so: There is a side nav that will contain the actions, and say the user clicks on "FooBar" it will populate the "mainContent" placeholder with the "FooBar.html" file from a document directory. I would like to do this with no postbacks as well if it is possible. Any ideas?

You may use jQuery ajax to load the pages when user clicks on the link. load() function will be ideal here.
It is just HTML and javascript. Nothing specific to ASP.NET MVC
//Include jQuery library
<div>
<a href="Home/about" class="aLink" >About</a>
<a href="Home/FAQ" class="aLink" >FAQ</a>
<a href="Home/Contact" class="aLink" >Contact</a>
</div>
<div id="mainContent">
</div>
<script type="text/javascript">
$(function(){
$("a.aLink").click(function(e){
e.preventDefault(); // prevent the default navigation behaviour
$("#mainContent").load($(this).attr("href"));
});
});
</script>

Create pop up panel or similar

I have a request.. where I need to create a link, then after the link is clicked.. a pop up should come up with a gridview in there but whatever is selected from that grid view I should pass it to a label on the page where the pop up was originated.. How can I do this?
I do not want to create a separate page.. just want to be able to add a gridview maybe in a panel... and then make the panel pop upon clicking on a linkbutton.
So so far, I have the panel and the gridview in the panel, how do i make it pop up?
PS : I also have Telerik just have not used it much (is there anything from there I can use)
Thank you

Have a look at the ajax control toolkit.
This example demos the popup functionality that you want.

I'd put the gridview in a DIV and hide the div. You can then use JQuery to handle showing the DIV, capturing your value selected and setting your label. This can all be done client side, avoiding any trips to the server as it seems that shouldn't be necessary for what you've described. Here's a very simple sample. I'm simply showing a textbox and the value entered is updated into the label. You'll of course want to add some styling and html here to make your div look more like a form. But it should get you started. You'll also need to include the jquery references.
<script type="text/javascript">
$(document).ready(function () {
$('.ok').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#lbl').text($('#input').val());
$('#dialog').hide();
});
$('#btnShow').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Set the popup window to center
$('#dialog').css('top', $(window).height() / 2 - $('#dialog').height() / 2);
$('#dialog').css('left', $(window).width() / 2 - $('#dialog').width() / 2);
$('#dialog').show();
});
});
</script>
<label id="lbl">Old Value</label>
<input type="button" id="btnShow" value="Get Value" />
<div id="dialog" style="display:none; width:440px; height:200px; position:absolute; ">
<input type="text" id="input" />
<input type="button" value="OK" class="ok" style="width:70px"/>
</div>

Proper way to handle maneuvering through pages using buttons in ASP.NET MVC?

I'm writing an app with ASP.NET MVC where, for various reasons, the navigation is handled through HTML input buttons. What are the Best practices on how to handle this situation?
Set up a Form on the buttons where information needs to be POSTed and just use JavaScript to redirect on the buttons where information doesn't need to be retained
Have all buttons handled through forms, to the point where a mini-form handles navigation on the buttons where the information doesn't need to be retained
<% using (Html.BeginForm())
{ %>
<input type="hidden" name="controller" value="1" />
<input type="hidden" name="action" value="Location" />
<input id="BackButton" type="submit" value="Go Back" />
<% } %>
Something I haven't thought of here

Here you can find a pretty good article on how to style an anchor tag like a button

Javascript is probably your best bet.
Using a mini form seems really heavy handed. You are basically looking to use a button as a link (I'd look seriously at why you are breaking that very basic web convention: buttons post/modify and links navigate) so the more basic you can make it the better.

3: Style some anchor tags to look like buttons.
On a recent application we implemented option 1. The client liked having "Cancel" buttons on all the forms (...) so we just stuck a click event on the reset inputs which did:
history.go(-1); return false;

Use empty <a href="#"> tags and Javascript/jQuery. For example:
In View:
<script src="<%= Url.Content("~/Content/navigation.js") %>" type="text/javascript"></script>
...
<a id="back" href="#">Back</a>
<a id="next" href="#">Next</a>
<script type='text/javascript'>
var back_href="<%= Url.Action("...") %>";
var next_href="<%= Url.Action("...") %>";
</script>
Somewhere in navigation.js:
$(document).ready(function() {
$('a#back').attr('href', back_href);
$('a#next').attr('href', next_href);
});