I am a newb in using jquery in MVC, please bear with me. I cannot seem to display the jquery-ui slider control in my mvc page. I have tried to implement the following articles which I have found on the web:
How to add jQueryUI library in MVC 5 project?
jQuery UI with MVC 4
JQuery UI datepicker in Asp.Net MVC
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
However, when I run the code, nothing shows. I have created a small little test project, and am trying to implement the slider on the about page. Here is my code:
In the About.cshtml:
#{
ViewBag.Title = "About";
}
<h2>#ViewBag.Title.</h2>
<h3>#ViewBag.Message</h3>
<p>Use this area to provide additional information.</p>
<div style="border: none; height: 20px;" id="slider">
</div>
#section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#slider").slider();
});
</script>
}
In the BundleConfig.cs file:
using System.Web;
using System.Web.Optimization;
namespace TestApp
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.11.4.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery-ui.all.css"
//"~/Content/themes/base/jquery.ui.core.css",
//"~/Content/themes/base/jquery.ui.resizable.css",
//"~/Content/themes/base/jquery.ui.selectable.css",
//"~/Content/themes/base/jquery.ui.accordion.css",
//"~/Content/themes/base/jquery.ui.autocomplete.css",
//"~/Content/themes/base/jquery.ui.button.css",
//"~/Content/themes/base/jquery.ui.dialog.css",
//"~/Content/themes/base/jquery.ui.slider.css",
//"~/Content/themes/base/jquery.ui.tabs.css",
//"~/Content/themes/base/jquery.ui.datepicker.css",
//"~/Content/themes/base/jquery.ui.progressbar.css",
//"~/Content/themes/base/jquery.ui.theme.css"
));
}
}
}
In the Global.asax.cs file:
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace TestApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
and in the _Layout.cshtml file:
<!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>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</body>
</html>
I have also created a screenshot of my Solution Explorer in case it may help:
Solution Explorer screenshot
I think it must be something small, but I am struggling to find the problem. I would appreciate it if anyone can point out what I should change in order to see and use the jquery-ui slider, or any other jquery controls in my site.
I found my mistake. I did not add/include the Jquery-ui.css file in the content folder. Once it was included I could see the Jquery control.
The link below explained and helped a lot in finding my mistake:
asp-net-mvc-4-jquery-datepicker
Hopefully this post can help someone else too.
Related
I wanted to add paging to my website so I installed the "PagedList.Mvc"
then I made some changes to model like for example changing the type from IEnumerable to IPagedList :
public IPagedList <Product> Products.
but I don't think changing model property has anything to do with the problem of layout disappearance.
And in controller part, I just added some properties to send through ViewModel to "Index" page, which I don't think has anything to do with the main problem.
i also added some <p> and <div> elements to the "Index" page which i don't think it has anything to do with layout problem since its universal to all pages.
I didn't touch the _layout.cshtml page :
<!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>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area
= "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Shop by Category", "Index",
"Categories")</li>
<li>#Html.ActionLink("View All Our Products", "Index",
"Products")</li>
</ul>
#using (Html.BeginForm("Index", "Products", FormMethod.Get, new
#class = "navbar-form navbar-left"}))
{
<div class="form-group">
#Html.TextBox("Search",null,new {#class="form-
control",#placeholder="Search Products"})
</div>
<button type="submit" class="btn btn-default">Submit</button>
}
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
the layout also is mentioned in _ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
but at the end what could be the reason that index page is looking like this, stripped away from menu, links, search box ...
i'm sure the link between "_layout page" and "views" is broken , but which factors beside #RenderBody( which already is there) are involved, I don't know.
btw. in the controller, I removed all viewbag and I'm using ViewModel , could it be a reason?
I have updated from Bootstrap 3 to Bootstrap 4 now the Razor View will not render properly as seen here in this image:
As you can see all Bootstrap styling is gone and the navbar has disappeared. This was fine with Bootstrap 3.
This is just the standard login page that comes with an MVC project, so I have not added anything fancy to it.
My bundle is as follows:
using System.Web;
using System.Web.Optimization;
namespace FoodSnap
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/themes/base/jquery-ui.css"));
}
}
}
In my view I have rendered as follows:
<!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>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#*#Html.ActionLink("FoodSnap_TEST", "LogIn", "Account", new { area = "" }, new { #class = "navbar-brand" })*#
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#*<li>#Html.ActionLink("Home", "Index", "Home")</li>*#
#*<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>*#
<li>#Html.ActionLink("Pre-Registration", "Index", "PreRegistration")</li>
<li>#Html.ActionLink("Roles", "Index", "Role")</li>
<li>#Html.ActionLink("FoodSnap", "Index", "FoodSnap")</li>
<li>#Html.ActionLink("Review", "Create", "FoodSnap")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - FoodSnap_TEST</p>
</footer>
</div>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
I have tried numerous things including CDN's and the result is the same. Has anyone seen this before?
Bootstrap 4 is almost a complete rewrite of Bootstrap 3 which means:
None of the Bootstrap 3 code is compatible with Bootstrap 4.
Read the docs to migrate:
https://getbootstrap.com/docs/4.0/migration/
I'm working with ASP.NET MVC 5 web apps and can't get DevExpress 17.1's file upload control to work properly. Or to be more precise, I've done everything their instructions describe to integrate their software (I've tried both using their templates and integrating manually) but when I use a file upload control the browse button does nothing.
The control appears properly in my Razor view, but none of the features are active. Clicking the browse button does nothing, clicking add, upload, etc. all do nothing. I'm using the example straight out of their documentation:
#using System.Web.UI.WebControls
#using DevExpress.Web.Mvc.UI
#model dynamic
#{
ViewBag.Title = "title";
}
#using (Html.BeginForm()) {
#Html.DevExpress().UploadControl(
settings => {
settings.Name = "uploadControl";
settings.FileInputCount = 2;
settings.ShowAddRemoveButtons = true;
}).GetHtml()
}
I feel like I must be missing something obvious, but I've got all their scrips, all their style sheets, everything integrated as near as I can tell. Can anyone suggest what might be going wrong?
Ok, I found the answer after creating sample apps and doing file-by-file compares. I thought I'd post it here for other unfortunate souls. The trick is that the ordering of things in the shared layout file (~/Views/Shared/_Layout.cshtml) is extremely finicky. Consider the following:
<!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>
#Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors }
)
#Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
new Script { ExtensionSuite = ExtensionSuite.Editors }
)
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Whenever my inclusion of the scripts and style sheets for DevExpress was otherwise than precisely that ordering, I had failures. I don't understand what was going wrong, but I doubt I'll be the only person to run into this.
Hope it helps!
How do i Implement a DateTime Picker from the library of JqueryUI Datepicker.
So far i have folowed these steps http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
Where i have done the first 3 Steps, and now i dont now how to move on so i can Implement the DateTime Picker?
What i have coded so far is my datetime Variable in the Model Class, like this
[DataType(DataType.Date)]
public DateTime Date { get; set; }
And in my Create view i have this
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Job</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Date, "Choose Date", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-1">
#Html.EditorFor(model => model.Date, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Date, "", new { #class = "text-danger" })
</div>
</div>
</div>
}
In my BundleConfig class i have i have implemented
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.theme.css"));
and in the _Layout.cshtml i have implemented
#Scripts.Render("~/bundles/jqueryui")
You'll need to add some pure javascript code, like this: http://jqueryui.com/datepicker/ (click on view source).
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
instead of "#datepicker" you need to use id of your date edit or ".form-control" for all edits which are have such class name
My Entire _Layout class, this is right, right?
<!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>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta name="description" content="The description of my page" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Substi", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "ChooseTeacher", "Substitutes")</li>
<li>#Html.ActionLink("All Schools", "Index", "Schools")</li>
<li>#Html.ActionLink("All Teachers", "Index", "Teachers")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jqueryui")
#RenderSection("scripts", required: false)
</body>
</html>
today I'm having a rather dull issue: for some reason JQuery-UI's Datepicker renders, but has no images whatsoever, this image explains what I'm talking about:
This is the (very) simple .js in which I use datepicker:
$(document).ready(function () {
$(".date").datepicker();
});
This is my _Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/Site.css")
#Styles.Render("~/Content/customcss/sitelayout.css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Scripts/jquery.validate.min.js")
#Scripts.Render("~/bundles/jqueryval")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
And this is the View in which I use datepicker:
#{
ViewBag.Title = "Creación de Reserva";
Layout = "~/Views/Shared/_Layout.cshtml";
#Styles.Render("~/Content/themes/base/datepicker.css");
}
#section Scripts
{
#Scripts.Render("~/Scripts/ReservationCreate.js");
}
<body>
#RenderPage("~/Views/Shared/_Navbar.cshtml");
<div id="wrap">
<h1>Creación de Reserva</h1>
<div id="content">
<div class="editor-label">
<label>Fecha</label>
</div>
<div class="editor-field">
<input type="text" id="ReservationDate" name="ReservationDate" class="date" />
</div>
</div>
</div>
</body>
I checked in Solution Explorer where the images that JQuery-ui uses, and they (apparently) are in the right location, just to doublecheck:
And just in case you need it, this is my BundleConfig.cs:
using System;
using System.Web;
using System.Web.Optimization;
namespace WebApplication
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
So, that's about it, have you guys got any idea why it's not using any of the images for Datepicker? Thank you for checking this out !
The images were not loading because the files in bundleconfig had a different name from the ones in the Solution's /Scripts/ folder.
Changing this:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
to this:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/theme.css"));
}
fixes the problem. Watch out for this!