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
Related
I'm trying for like past 6 hours to create static not collapsible sidebar using Bootstrap 5.0, but unfortunately without success.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - ASP.NET</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-reboot.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="row">
<div class="col-lg-3">
<div class="sticky-top">
<!--here will be sidebar-->
</div>
</div>
<div class="col-lg-6">
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
<div class="col-lg-3">
<div class="sticky-top">
...
</div>
</div>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© #DateTime.Now.Year - ASP.NET - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
I have made comment where I want to put it.
I'm fully aware there are a bunch of tutorials and examples online, but they are not using raw Bootstrap 5.0, because even when I copy it 1:1, it returns plenty of warnings about missing classes, and as a result sidebar looks like it was made by someone who learns HTML for last few hours.
Horizontal navbars are fully supported, but creating working vertical sidebar looks impossible.
The blazor server template does a decent job at a side navigation bar. It's not the same as asp.net but the css in the template might give you some new ideas of things to try.
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.
I have a action which works well ( loads all images and CSS) as a normal action but when I use Rotativa.MVC.ViewAsPdf to produce a PDF it don't load the CSS. and the application doesn't show any errors
public ActionResult DownloadNonProfessionalDeputy(int id)
{
Application_Attorney_NonProfessional oAP = db.Application_Attorney_NonProfessional.Find(id);
return new Rotativa.MVC.ViewAsPdf(oAP) { FileName = string.Format("DCM_Attorney_Non_Professional_Application.pdf", new { CustomSwitches = "--print-media-type --header-center \"text\"" }) };// { = "--header-right \"Page [page] of [toPage]\""};
//return View(oAP);
}
help appreciated
Image from PDF
Image from HTML View
The View
#model DCM_Intranet.Models.Application_Attorney_NonProfessional
#{
Layout = null;
int nPage = 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="~/images/gale_phillipson_corn.ico" type="image/x-icon">
<title>Attorney Non-Professional Application</title>
<link href="~/css/style.default.css" rel="stylesheet">
<link href="~/css/jquery.datatables.css" rel="stylesheet">
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/modernizr.min.js"></script>
<script src="~/js/jquery-migrate-1.2.1.min.js"></script>
<script src="~/js/jquery.sparkline.min.js"></script>
<script src="~/js/toggles.min.js"></script>
<script src="~/js/retina.min.js"></script>
<script src="~/js/jquery.cookies.js"></script>
<script src="~/js/morris.min.js"></script>
<script src="~/js/raphael-2.1.0.min.js"></script>
<script src="~/js/jquery.datatables.min.js"></script>
<script src="~/js/chosen.jquery.min.js"></script>
<script src="~/js/custom.js"></script>
<script src="~/js/jquery.capslockstate.js"></script>
<script src="~/js/jspdf.js"></script>
</head>
<body>
<div class="container-fluid" id="content">
<!-- Top Header -->
<div class="row">
<div class="col-md-12">
<table class="table">
<tr>
<td valign="middle" align="left"><h2>Data Capture</h2></td>
<td valign="middle" align="right"><img src="~/Images/dcm.png" width="403" height="100" class="pull-right" />
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
#{nPage++;}
<div class="row">
<div class="col-sm-6 pull-left"><h2>Court of Protection/Power of Attorney - Non-Professional </h2></div>
<div class="col-sm-6 pull-right vcenter"><strong>Page #nPage</strong></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-info" role="alert">
<strong>Should you require any guidance in completing this form please contact the DCM New Business Team on 01748 825971 or dcm#dcmcash.com</strong>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<p>This form is for use for Court of Protection/Power of Attorney case where the deputy is Not Acting in a Professional Capacity.</p>
<p>
This form is intended for professional Introducer/Adviser use only—please do not pass it to your client. The objective of this form is to collect all of the data required to operate Dynamic Cash Management efficiently without any need for your input at a later date.
</p>
<p>Please ensure that the form is completed in full, as any omissions may lead to a delay in setting up your client’s Dynamic Cash Management account.</p>
<p>
<b>
It is particularly important to ensure that your client is consulted on Sections 8 (ATRI) and 9 (Liquidity) as they are used to determine the types of institutions and accounts that we will deposit your client’s cash with. Proper consultation will ensure that Dynamic Cash Management use only those institutions that your client is comfortable with and that they are able to withdraw funds when they need them.
</b>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to use absolute path for both css files and images, for example:
<link href="#Server.MapPath(~/css/style.default.css)" rel="stylesheet">
<img src="#Server.MapPath(~/Images/dcm.png)" width="403" height="100" class="pull-right" />
Your Code:
<img src="~/Images/dcm.png" width="403" height="100" class="pull-right" />
Updated Code:
<img src="~/Images/dcm.png" style="width:403px; height:100px" class="pull-right" />
Keep height and weight in the style attribute.
For the CSS Part, I did the following:
In Action,
return new PartialViewAsPdf("_PartialViewName", model);
In _PartialViewName.cshtml,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
</head>
<body>
// code here
</body>
</html>
In BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
//other css libraries
));
Optimize Css and JavaScript File
Remove Loader from CSHTML page
and Use async in javascript URL'
<script src="~/Content/Themes/1/js/script.js" async></script>
Like this
Adapting Stephen Zeng's answer for asp.net core. This in asp.net core here is what worked for me.
#inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment _env;
#{
var cssPath = $"{_env.WebRootPath}\\styles\\booking\\purchase\\receipt.css";
}
#section styles {
<link href="#cssPath" rel="stylesheet" />
}
A weird thing I ran into as well is that locally and in an Azure staging slot it worked without this. It would only work in the production slot with this change.
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' });
});