Anyone know what the easiest way to implement a date/time picker in bootstrap/razor html code is? I currently have the program running fine by entering directly as:
<div class="editor-label">
#Html.LabelFor(model => model.date)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.date)
#Html.ValidationMessageFor(model => model.date)
</div>
But would love a date/time picker to popup when date is selected? Any suggestions?
Simplicity is key here as the code is for some basic students to see.
EDITED but not working:
My new head, still not working:
<meta charset="utf-8">
<title>App Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="#Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet">
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#date").datepicker();
});
</script>
jQuery UI Datepicker
http://jqueryui.com/datepicker/
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#date" ).datepicker();
});
</script>
</head>
Update:
The #date refers to the name in your model. If you need to add other datepickers, just make sure to change #date to the new property name
I use Calendar control from AjaxControlToolkit library and is very good. You have every thing how to implement it in this link:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx
With MVC you may want to checkout the following post.
All the date or date/time fields just work regardless of thier field name in your model.
http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx
Related
I have been working with blazor server for some time now but I have not been able to achieve how to create a cards carousel with it. I want to use slick slider in my project. I have downloaded slick and jquery, linked jquery, slick.min.js, slick.js, slick-theme.css and slick.css but nothing seems to work. I've tried looking on the web for some solutions but none of these are clear to understand. I've also done this with html, css and js and it works just fine. Please anyone help me with this because i believe a carousel is a very important component in a website.
#using Microsoft.AspNetCore.Components.Web
#namespace Blogger.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-500">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link href="Blogger.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
#RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/all.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Perhaps it is not working for you because you have implemented both the normal and the minified file?
<script src="js/slick.min.js"></script>
<script src="js/slick.js"></script>
Here I have blazor server app, in app I have two _Host.cshtml, one for website which is default _Host.cshtml and another for admin panel that is _HostAdmin.cshtml. Both of them have separate css and js file. I too have separate layout, for website I have Mainlayout.razor which should use _Host.cshtml and for admin panel I have AdminLayout.razor which should use _HostAdmin.cshtml .
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
Below is my _HostAdmin.cshtml
#page "/Admin"
#namespace MCQ.Pages._Pages_Admin__HostAdmin
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="~/Admin" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css" />
<link rel="stylesheet" href="/Adminlte/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/jqvmap/jqvmap.min.css">
<link rel="stylesheet" href="/Adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/Adminlte/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/Adminlte/plugins/summernote/summernote-bs4.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<component type="typeof(App)" render-mode="ServerPrerendered" />
</div>
<script src="~/Adminlte/plugins/jquery/jquery.min.js"></script>
<script src="~/Adminlte/plugins/jquery-ui/jquery-ui.min.js"></script>
<script>$.widget.bridge('uibutton', $.ui.button)</script>
<script src="~/Adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/Adminlte/plugins/chart.js/Chart.min.js"></script>
<script src="~/Adminlte/plugins/sparklines/sparkline.js"></script>
<script src="~/Adminlte/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="~/Adminlte/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="~/Adminlte/plugins/jquery-knob/jquery.knob.min.js"></script>
<script src="~/Adminlte/plugins/moment/moment.min.js"></script>
<script src="~/Adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<script src="~/Adminlte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/Adminlte/plugins/summernote/summernote-bs4.min.js"></script>
<script src="~/Adminlte/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="~/Adminlte/dist/js/adminlte.js"></script>
<script src="~/Adminlte/dist/js/pages/dashboard.js"></script>
<script src="~/Adminlte/dist/js/demo.js"></script>
</body>
</html>
Below is Startup.cs
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
});
You state
Now, the problem is that when I add new razor component and use AdminLayout.razor layout the view doesnot use css and js of _HostAdmin.cshtml.
and I assume your question is "Why".
You're adding a new razor component page to the existing application - probably with a route of something like "/admin/myadminpage". You're misunderstanding what's actually going on.
_Host.cshtml loads the SPA, but that's the only get/post that happens. Navigation after that is changing out components in the DOM. Loading a component with the layout AdminLayout just changes out the Layout component. There's no toing and froing with the server.
What you are trying to do requires a reload of the SPA. You could use:
NavigationManager.NavigateTo("/admin/myadminpage", true);
Also even if you do force a reload, the Fallbacks are in the wrong order - the default before the specific.
endpoints.MapFallbackToPage("/_Host");
endpoints.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/_HostAdmin");
Trying to make a web app using .Netcore When I run the application I get this error. Help me
This is not a errors but a warning. But help me to resolve
I added my code below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/sidebar-nav.min.css" rel="stylesheet" />
<link href="~/css/animate.css" rel="stylesheet" />
<link href="~/css/default.css" rel="stylesheet" />
<link href="~/css/style.css" rel="stylesheet" />
</head>
<body class="fix-header fix-sidebar">
<div id="wrapper">
#Html.Partial("AdminPartials/_TopMenu")
#Html.Partial("AdminPartials/_Sidebar")
<div id="page-wrapper" style="min-height:600px">
<div class="container-fluid">
#RenderBody()
<hr />
<footer class="footer text-center">© #DateTime.Now.Year | Powered by Techguy</footer>
</div>
</div>
</div>
#RenderSection("scripts", required: false)
<script src="~/js/jquery.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/sidebar-nav.min.js"></script>
<script src="~/js/custom.js"></script>
</body>
</html>
In case you are looking just how to update from #Html.Partial to <partial>:
#Html.Partial("AdminPartials/_TopMenu")
#Html.Partial("AdminPartials/_Sidebar")
Should be changed to
<partial name="AdminPartials/_TopMenu" />
<partial name="AdminPartials/_Sidebar" />
More details here: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper?view=aspnetcore-2.2
use
#await Html.PartialAsync("_partialView", new List<Model>())
For the ones how as me are not so familiar with regex. You can do this change easily in whole solution using Find&Replace. It should do the job in most cases.
Find: \#Html.Partial\(\"(.*?)\"\),
Replace: <partial name="$1" />,
option "Use regular expressions" checked
and
Find: \#Html.Partial\(\"(.*?)\", (.*?)\),
Replace: <partial name="$1" for="#($2)"/>,
option "Use regular expressions" checked
i'm trying to create date picker like this in asp.net, but its throwing me error. I'm using MVC architecture to create.
Here is the code i'm using. i'm getting error as:
Microsoft JScript runtime error: Object doesn't support this property
or method
I need date to be selected and sit in the edittext.
<tr>
<td style="width: 450px" class="" height="40px">
<%= Html.TextBox(ViewControlNames.DateTime, "", new { maxlength = "40", id = ViewControlNames.DateTime, Class = "LongInputField" })%>
</td>
</tr>
<script>
$(function () {
$("#CabDateTime").datepicker();
});
</script>
</asp:Content>
Probably you have not included the necessary jQuery UI library.
Add these script tags inside your page AFTER jQuery:
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />
<script src="js/jquery-ui.custom.min.js"></script>
In this way you'll have the jQuery UI widgets bound to jQuery.
Ref: https://learn.jquery.com/jquery-ui/getting-started/
If you need a datetimepicker; you can use a widget plugin that extends datepicker functions by adding a time selection.
Project site: http://trentrichardson.com/examples/timepicker/
Demo code:
$(document).ready(function () {
$('#timePicker').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm ss'
});
});
Demo: http://jsfiddle.net/IrvinDominin/Ljt4T/1/
Have you added?
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
See from your comments you don't seems to be have added libraries and api at top of the page plese check it like i posted here
And for the further documentation please check here http://jqueryui.com/datepicker/
here is my script
<script type="text/javascript">
$(document).ready(function () {
// alert("jquery working fine, still no display..");
$(".datepicker").datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yyyy'
});
});
</script>
<input type="text" class="datepicker" />
The actual Datepicker works great, firebug shows this script, the jqueryUI, the timepicker-addon.js, slider.js, and datepicker.js, jquery is selecting the textboxes.
but alas, still no datetimepicker displaying
I've tried using id's/classes, rearranging the order the scripts are loaded. I would say that the addon is just bunk, but so many seem to have no troubles at all with it.
Does anyone know what I am missing?
The following code works perfectly fine for me:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" class="datepicker" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$('.datepicker').datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yy'
});
</script>
</body>
</html>
Gives the following result as can be seen in this live demo:
So I guess there must be something wrong with your script inclusions and maybe their order. Unfortunately since you haven't shown your code it is difficult to be able to say more.