ASP.NET Jquery UI Button not rendering properly - c#

I've been having a lot of trouble having the theme I load render properly in my ASP.NET MVC 5 application... I've been doing a lot of research, but I think it might be related to the dialog issues I've been having as well... Can anyone please help me out?
From what I understand, I need to reference what class of button I want to use like this:
<button class="ui-button" id="overview">Overview</button>
But it still renders the button as just a gray button, no theme.
Here are my bundles:
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.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",
"~/Content/themes/base/jquery.ui.all.css"));
bundles.Add(new StyleBundle("~/Content/ui-darkness/css").Include(
"~/Content/ui-darkness/jquery-ui-1.10.4.custom.css"));
And here is my Layout:
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/ui-darkness/css")
#Scripts.Render("~/bundles/modernizr")
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Also of note is that Intellisense does not have any tooltips for .button() or .dialog().
Any help would be greatly appreciated!
Edit: I've attached a picture of the non-stylized button "overview"
http://i.stack.imgur.com/kohZH.png

I think when you downlod the JS and CSS file related to jqueryui with out check dialog and button option
go to http://jqueryui.com/download/ and check all the check box and download the js and csss file and use in your project.

You should not had Theme/base CSS.
I do'nt use the same Theme, but It work's here with :
BUNDLE
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/Css/jquery-ui-1.10.3.custom.css",
"~/Content/Css/bootstrap.css",
"~/Content/Css/font-awesome.min.css",
"~/Content/Css/site.css"));
LAYOUT
#Styles.Render("~/Content/css")
VIEW
<button class="ui-button" id="overview">Overview</button>
jquery-ui-1.10.3.custom.css came from \jquery-ui-1.10.4.custom\css\smoothness\
It's enough to add the CSS you find in your theme folder.

Related

Adding new Bundle to Bundle Config

In my _Layout page I have these scripts:
#Scripts.Render("~/Scripts/Scripts.js")
#Scripts.Render("~/Scripts/moment-with-locales.js")
#Scripts.Render("~/Scripts/moment.js")
#Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
#Scripts.Render("~/Scripts/DayPilot/daypilot-all.min.js")
So instead of writing all of those out, I want to create a bundle:
bundles.Add(new ScriptBundle("~/bundles/otherScripts").Include(
"~/Scripts/Scripts.js",
"~/Scripts/moment-with-locales.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/DayPilot/daypilot-all.min.js",
"~/Scripts/DayPilot/daypilot-common.src.js"));
So now in my _Layout page I have this:
#Scripts.Render("~/bundles/otherScripts")
Now in my bootstrap-datetimepicker.js I have edited 1 line.. and the change shows visually when I test this app locally.. but when I publish.. that line that I changed does not work..
The only way it works is if I exclude the bootstrap-datetimepicker.jsfile from the bundle and reference it in the _Layout page specifically.
How do I just combine all of those scripts into the bundle and it work properly when published?

Using Gentella bootstrap theme in ASP.NET MVC

I'm trying to use the Gentelella theme with MVC but I can't get it to work right, and I feel like I'm defining the bundles incorrectly. I copied the HTML code exactly as it was in the sample and I get this:
Bad layout
There shouldn't be any margins - I want it to appear how it does on the GitHub page. I define the bundle like so (admin being what I renamed the build files as):
bundles.Add(new ScriptBundle("~/bundles/admin").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/admin.js"));
bundles.Add(new StyleBundle("~/Content/admin").Include(
"~/Content/bootstrap.css",
"~/Content/admin.css",
"~/Content/font-awesome.css"));

Errors in MVC application

I'm new to webdevelopment, and have made my first MVC application.
Everything works and looks fine om my development machine, but when I publish it to the server I get some errors in Internet Explorer.
But Everything looks and works ok in other browsers, for example Google Chrome.
Does anyone have any idea about what I have done wrong so I know what to look for?
If you need to see any code, please let me know what parts as I don't know what I have done wrong.
Error messages
//Edit
Here is the references that I have in the head tag in _Layout.cshtml
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
And my BundleConfig.cs looks like this
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{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 ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/bootbox.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/all.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/base.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/core.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/draggable.css",
"~/Content/themes/base/menu.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/selectmenu.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/sortable.css",
"~/Content/themes/base/spinner.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/theme.css",
"~/Content/themes/base/tooltip.css"));
}
I finally found out what was causing this issue.
In Internet Explorer settings, "Display intranet sites in Compability View" was selected.
Unchecked it and now everything works.

BundleTable.EnableOptimizations doesn't work asp mvc

I have very strange problem in MVC BundleConfig file. Before publishing my site I set BundleTable.EnableOptimizations to true, and was waiting that my css file would be minimized after publishing. But one file from ScriptBundle is minified, and another one from same ScriptBundle isn't. Here is what I mean:
my BundleConfig code:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
BundleTable.EnableOptimizations = true;
and in _Layout I have:
#Styles.Render("~/Content/css")
So result of this code is that, when I check sources of site in browser, there is one css file, where my bootstrap.css and Site.css files are combined, but bootstrap.css is minified, and Site.css isn't. I just can't figure out why system doesn't minifies my Site.css file.
It's the weirdest problem I had ever had, so if you know what's going on, please help me.
you should try the following code
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
BundleTable.EnableOptimizations = true;
}
using IgnoreList you can bypass any already minified css that is not including in bundle ,because its already minified and mvc bundle will ignore it.
If this doesnt work you need to validate your css, you can use web essentials to validate your css.
Hope this helps.

MVC 4 Ajax is not updating the PartialView within the page

I'm doing a site using MVC 4. It's a site that list musics and the user can create a playlist (like a cart shopping).
I have for every music this action link that should be executed in Ajax:
#Ajax.ActionLink("Adicionar à Playlist","AddPlaylist", new { id = item.MusicaID }, new AjaxOptions {UpdateTargetId="playlist", InsertionMode=InsertionMode.Replace})
The action method from the controller returns a PartialView (the cart of playlist) and only that should update but instead of getting the whole page with that part updated I get a partial view and nothing more on the page.
This is the part where I render the PartialView:
<section id="playlist">
#Html.Partial("_PlaylistPartial")
</section>
Shouldn't this work like I have?
Make sure you have included
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
in your view
It was a stupid thing.
First my include of jquery.unobtrusive-ajax.min.js didn't work like I have:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
So I put like this:
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
And still wasn't working, because I also need to include the JQuery files:
#Scripts.Render("~/Scripts/jquery-1.7.1.js")
#Scripts.Render("~/Scripts/jquery.1.7.2.min.js")
This way it works :)
A little late to the party but I just had a similar problem. The solution was to add this line to _Layout.cshtml:
#Scripts.Render("~/bundles/jqueryval")
First, install Microsoft.JQuery.Unobtrusive.Ajax from NuGet Manager and later include ~/Scripts/jquery.unobtrusive in BundleConfig after including jquery-{version}.js; which will look something similar to this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive*));

Categories