I am building an Asp.net MVC app and would like to add a datepicker.
I have this code in my form in the view
#Html.LabelFor(b => b.Date)
#Html.EditorFor(b => b.Date, new {id = "news_date"})
This is the javascript I am using to make a datepicker.
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
I would like it so when the user clicks on the textbox a datepicker appears and they can then select a date. currently nothing happens when I click on the text box so I think that there is either an issue with the javascript or with linking it to the textbox.
Any ideas?
Edit:
Web console shows this error:
TypeError: $(...).datepicker is not a function
Edit: Edit: This is the code that is compiled and taken from the browser console:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Enter Transaction - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script type="text/javascript">
$(document).ready(function () {
$("#Date").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
<h2>Enter Transaction</h2>
<form action="/Home/EnterTransaction" method="post"> <p>
<label for="Type">Type</label>
<select id="TypeItems" name="TypeItems"><option value="0">Type1</option>
<option value="1">Type2</option>
</select>
<br />
<label for="Date">Date</label>
<select id="UserItems" name="UserItems"><option value="0">User1</option>
<option value="1">User2</option>
</select>
<br />
<label for="Date">Date</label>
<input type="text" id="news_date" name="news_date" />
<input class="text-box single-line" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="Date" name="Date" type="date" value="12/01/2014" />
</p>
<input type="submit" value="Submit">
<p></p>
</form>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-2.0.3.js"></script>
</body>
</html>
Two things :
First, be sure you have references to jquery and jqueryui.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css"/>
You also need jquery ui css referened.
Second, there's no overload of EditorFor taking htmlattributes as parameters.
You should rather do
#Html.LabelFor(b => b.Date)
#Html.EditorFor(b => b.Date)
and for jquery part
$(document).ready(function () {
$("##Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});
Related
I have watched a few tutorials on how to get the DateTimePicker working and I cannot get it to work.
However, I did notice my application has a basic built-in calendar. Please see below:
I want to know how I can customize this to format the time so it is only 20-30 minute intervals of each hour and limited the booking time from 9 am - 5 pm?
Also, I would like to be able to change the 01/01/0001 00:00 to be at least starting from this year onwards!
Here is my shared layout page which I have removed previous code in the scripts section that I was trying to get to work
I would like to point out to the viewer I have tried this many ways installing packages etc and it never showed up on my www root file. This template came with these styles etc already linked
Layout Page
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap 5 CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<!------ Come back to. Change layout using the cdn instead of installing the layout-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons#1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
</head>
<body>
<partial name="_NavBar" /> #*Created a partial to make the _layout page more nicer for
presentation purposes*#
<div class="container">
<!-- AMC Any alert defined in controller is rendered here -->
<partial name="_Alert" />
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© #DateTime.Now.Year - SolutionName- <a asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- JQuery Needed for .NET Validation -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!------- Allowing me to use Fonts -->
<script src="https://kit.fontawesome.com/7bdf81a9a5.js" crossorigin="anonymous"></script>
<!-------- Allowing me to use datatable.net tables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
View page for creating appointment:
<h4>Create Appointment</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="CreateAppointmentBooking">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="PatientId" class="form-control" />
<label asp-for="StartDateTimeBooking" class="control-label"><i class="bi bi-book" id="datepicker"></i> Book Appointment</label>
<input asp-for="StartDateTimeBooking" class="form-control" id="datepicker" />
<span asp-validation-for="StartDateTimeBooking" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="NameOfDoctor" class="control-label"><i class="bi bi-person"></i>Name Of Doctor</label>
<select asp-for="NameOfDoctor" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.Doctor>()" class="form-control">
<option>Select Doctor</option>
</select>
<span asp-validation-for="NameOfDoctor" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<label asp-for="PreferenceOfAttendence" class="control-label"><i class="bi bi-info-square"></i> Appointment Preference</label>
<select asp-for="PreferenceOfAttendence" asp-items="Html.GetEnumSelectList<PatientHut.Data.Models.PreferenceOfAttendance>()" class="form-control">
<option>Select choice of appointment</option>
</select>
<span asp-validation-for="PreferenceOfAttendence" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DetailOfBooking" class="control-label"><i class="bi bi-card-text"></i> Reason For Booking</label>
<textarea rows="5" asp-for="DetailOfBooking" class="form-control"></textarea> <!------ Text box created here-->
<span asp-validation-for="DetailOfBooking" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
<a class="btn btn-secondary" asp-action="Details" asp-route-id=#Model.PatientId>Cancel</a>
</div>
</form>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
showTodayButton: true,
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 30
});
});
</script>
}
I wrote a demo based on your question, you can refer to it.
Model:
public class Test
{
[BindProperty]
public DateTime? RegisterDate { get; set; }
}
View:
#model WebApplication53.Models.Test
#{
}
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<div class='input-group date' id='datepicker'>
<input asp-for="RegisterDate" type="text" class="form-control" value="#DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
#section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<
<script>
$(function () {
$('#datepicker').datetimepicker();
});
</script>
}
Result:
In addition, the installation package you mentioned does not appear in the www directory, you should use the library to add the required dependency packages, like this:
Then search for the dependencies you need and then download it and it will be displayed in your www directory.
I'm following an older book (2017) so the code is outdated
I'm having a problem connecting bootstrap to _Layout.cshtml
I believe the problem is this link to bootstrap
<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
asp-href-exclude="**/*-reboot*,**/*-grid" />
Since there is no wwwroot folder anymore. How do I link bootstrap correctly?
Here is my _Layout.cshtml code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
asp-href-exclude="**/*-reboot*,**/*-grid" />
<title>SportsStore</title>
</head>
<body>
<div class="navbar navbar-inverse bg-inverse" role="navigation">
<a class="navbar-brand"
href="#">SPORTS STORE</a>
</div>
<div class="row m-1 p-1">
<div id="categories" class="col-3">
Put something useful here later.
</div>
<div class="col-9">
#RenderBody()
</div>
</div>
</body>
</html>
Here is my solution explorer image
Here is the List.cshtml that I'm trying to use bootstrap with
#model ProductsListViewModel
#foreach (var p in Model.Products)
{
<div class="card card-outline-primary m-1 p-1">
<div class="bg-faded p-1">
<h4>
#p.Name
<span class="badge badge-pill badge-primary" style="float:right">
<small>#p.Price.ToString("")</small>
</span>
</h4>
</div>
<div class="card-text p-1">#p.Description</div>
</div>
}
<div page-model="#Model.PagingInfo" page-action="List" page-classes-enabled="true"
page-class="btn" page-class-normal="btn-secondary"
page-class-selected="btn-primary" class="btn-group pull-right m-1">
</div>
You can use CDN links.
You should link the css library in the head tag, and scripts to last of body tag.
<head>
.....
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
......
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
I have an existing sample project in asp.net-MVC-5 with C#. The sample Project Working Fine. But the problem is, whenever I run the Project, the project will leads to the page,where my cursor was in. For Example, If I am editing in home-Index page means, while running-the project starts from Home/Index page only. But I want to start from Login page only. How to give correct link?
My codings are below:
My _viewstart as
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
My _Layout as
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
My Login Page is in the path
~Views/Account/Login.cshtml.
My Login design as follows:
#using M.Models
#model LoginViewModel
#{
ViewBag.Title = "Log in";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="~/Content/adminlte/components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="~/Content/adminlte/components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="~/Content/adminlte/components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="~/Content/adminlte/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="~/Content/adminlte/plugins/iCheck/square/blue.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="~/Content/adminlte/dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<img src="#Url.Content("~/Images/Logo.jpg")" alt="HRMS" width="360" /><br />
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="" method="post">
<div class="form-group has-feedback">
<div class="input-icon">
#*<i class="fa fa-user"></i>*#
#Html.TextBoxFor(model => model.UserName, new { #class = "form-control placeholder-no-fix", #placeholder = "Username", #maxlength = "50" })
#Html.ValidationMessageFor(model => model.UserName)
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-icon">
#*<i class="fa fa-user"></i>*#
#Html.PasswordFor(model => model.Password, new { #class = "form-control placeholder-no-fix", #placeholder = "Password", #maxlength = "50" })
#Html.ValidationMessageFor(model => model.Password)
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
</div>
#*<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="User Name">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>*#
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 3 -->
<script src="~/Content/adminlte/components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="~/Content/adminlte/components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="~/Content/adminlte/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});</script>
</body>
</html>
Thanks in Advance.
This is a setting in the Visual Studio project. Go to the Project properties and look on the Web section. Change your Start Action from Current Page to Start URL and fill in the URL you want, which will most likely be your Project Url. You can copy it from there.
Dropdown is not showing when clicked. Other input fields are working as expected except this.
The dropdown field is one of the field in form tag.
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
I've initialized it in the script tag just before the end of body tag. Also tried to put in head tag, or added document.ready as well as window.onload but all doesn't fix the problem.
<script>
$('.ui.dropdown').dropdown();
</script>
FYI, I've installed Semantic-UI ASP.NET MVC in Nuget.
I've tried the solutions below but to no avail.
Semantic-ui dropdown is not working
Semantic UI Dropdown is not showing the drop down but everything else is working
I managed to get the drop down list shown now, by adding this script in the head tag.
<script>
$(document).ready(function () {
$('#divDropdown').click(function () {
var clicks = $(this).data('clicks');
if (clicks) {
$('#divDropdown').removeClass('active visible');
$('#dropdownMenu').removeClass('visible');
} else {
$('#divDropdown').addClass('active visible');
$('#dropdownMenu').addClass('visible');
}
$(this).data("clicks", !clicks);
});
});
</script>
By right, it can be as simple that initializing it with .dropdown should work. But somehow it's not.
I'm still waiting for someone to propose a better solution than this.
Thanks.
Include semantic CSS inside the head tag
Include jquery in the end of your body tag, then include semantic UI JS
Put your code from semantic dropdown inside
$(document).ready(function () { //code goes here });
this way it will be executed after everything loads (jquery and semantic) and it will work.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Test semantic</title>
<link rel="stylesheet" type="text/css" href="semantic2/semantic.min.css">
</head>
<body>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Select Gender</div>
<div class="menu">
<div class="item" data-value="0">Male</div>
<div class="item" data-value="1">Female</div>
<div class="item" data-value="2">Other</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="semantic2/semantic.min.js"></script>
<script>
$(document).ready(function () {
$('.ui.dropdown').dropdown();
});
</script>
</body>
</html>
I have been trying to attach this http://harvesthq.github.io/chosen/ to my asp.net mvc 4 site, but still to no avail.
I tried doing the same with simple WebForms, and it was a success.
Nuget packages were downloaded to default locations in both cases.
in all I downloaded these packages:
Jquery-2.1.1
Jquery-ui-1.10.4
chosen-1.1.0
chosen.jquery-1.1.0
Scripts are located in /Scripts folder and Css file in /Content
I have been using Visual Studio 2013.
Here is the code of View (simplified):
#model IEnumerable<modelnamehere>
#{
ViewBag.Title = "Index";
}
#using (Html.BeginForm("Index", "TestedController", FormMethod.Get))
{
some code here;
}
<select multiple class="mySelector" data-placeholder="Choose...">
<option>Select 1</option>
<option>Select 2</option>
<option>Select 3</option>
</select>
<link href="#Url.Content("~/Content/chosen.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/chosen.jquery.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".mySelector").chosen();
})
</script>
And here is _Layout.cshtml shared page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - ASP.NET MVC</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("ASP.NET MVC", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Testing Page", "Index","TestedController")/li>
</ul>
</nav>
</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 - ASP.Net MVC</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
I`m kinda new to using JQuery, so if there is some explanation to the wrongs steps I have done, it would be much app