I am using ASP.NET MVC3. Adding a web project, it gives me all the files required for jquery to run.
It gives me Content Folder and some folders for storing css and Images.
It also gives me Scripts folder, where I can have my .js files.
Whenever I want to download some custom JQUERY UI controls, It gives me a zip file which has different folders and scripts.
How do I map them so that, I am not keeping too many jquery files in my project.
For example, I want to use DatePicker Jquery UI, I go to jquery site and download them and it gives me a ZIP File which has various folders.
There is folder called development again it has got all the files.
If I wan to go for timepicker, I think there is only a CSS difference between timepicker and datepicker.
Timepicker needs slider. So I am not sure do i need to reference jqueryslider.js in my Layouts file.
Please shed some light on this mapping of downloaded files and already existing files in MVc3?
if have to include new Jquery UI Control, What should be the changes, is it just in .js file, images folder, or css folder.
I personally think its only css and images, please correct me.
Thank you.
All you need to do is add the content in the js folder to the scripts in your Scripts folder and copy everything from the css\\ folder into the Content folder of your MVC application.
Once you have done this, you simply add the following references to the _Layout file in your Shared folder (just modify to match your version of JQuery and the correct version of your JQuery-UI download):
<link href="#Url.Content("~/Content/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
Just remember to keep the reference to your JQuery library (jquery-1.7.1.min.js in the example above) before the reference to the JQueryUI scripts.
-- Kindly mark as the answer if this has been helpful
Related
I have been going through all kinds of tutorials they are either just straight up not useful or they are using previous versions of VS and/or ASP.NET.
How do you install tailwind CSS on an MVC project?
I wish they had published the lib for everyone to copy and paste in their resource file and use it freely.
How do you install tailwind css on a MVC project? I wish they had published the lib for everyone to copy and paste in their resource file and use it freely.
You can try to include tailwind css from CDN, like below.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Besides, you can try to finding client-side libraries and add the required files to your project through the Add Client-Side Library dialog.
I've created this package that's adding a new build action.
You simply set the PackageReference and set the build action of your stylesheet to TailwindCSS. During the build process, the stylesheet will be converted via PostCSS.
For more details, you can take a look at its GitHub repo.
I'm using PhpStorm for a Bootstrap project.
Is there any way to make PhpStorm autocomplete get and predict CSS classes from external file without linking this file to the edited file?
Or any way to select stylesheet file and make PhpStorm use its' classes inside whole project without linking this CSS file to the edited file?
In HTML templates/partials completion includes selectors from all project stylesheets - unless you have some styles explicitly linked/embedded in your partial via <link> or <style> tag. See https://youtrack.jetbrains.com/issue/WEB-2223 and linked tickets.
Vuejs templates will be treated differently since 2017.2 - see https://youtrack.jetbrains.com/issue/WEB-25767
I have this code in an Index.cshtml file:
#{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />
This file is a view in my ASP.NET MVC4 application.
When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the 'Content\Site.css' file.
However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren't reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.
Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn't have a problem with the file, and so indicates that the path is valid - but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn't exist.
Any idea on what I am doing wrong here?
The actual image I am using here loads correctly.
the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.
The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:
<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>
As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.
you also could use #url.content() helper method to convert your relative path to absolute. It's extremely useful when you will implementing website with multiple areas and also it's the common style to set path to the content in MVC so it's better does it this way
css belongs in the head - i can't stand .net
It also needs to NOT have the closing /> at the end of the tag - it messes things up. XHTML proper, but not everyone understands it. Unclose the link tag and try...
Use ~/ before your file statement for example:
<img src="~/images/team-image3.jpg" class="img-responsive" alt="">
instead of
<img src="images/team-image3.jpg" class="img-responsive" alt=""> etc...
When I add jqm-icon-pack-2.1.2-fa.css to my website, the jQuery UI fonts don't show. If I remove the reference, they show. I'm creating an MVC4 mobile application using Visual Studio 2012. Here is how I'm referencing the css files:
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="#Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">
If I remove the last reference, the jQuery icons work but the Font Awesome icons don't work. I've tried to reorder the references and that didin't work. I've inspected the page with Firebug and I can't see a difference. I've made sure the paths are correct as well. I'd like to post a link to my website but it's inside an extranet so it can't be accessed. The best I can offer is I'm setting an input to type="search" and the search icon and clear text icon do not appear. Any help would be greatly appreciated!!
ANSWER: I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.
When inside a View, within MVC, and you have your JavaScript, I tried to move it to a JavaScript file in the same directory, and it reports it can not file the javascript file
As an example I user NerdDinner and the DinnerForm.aspx, created a JavaScript file in the same directory as the DinnerForm.aspx called DinnerForm.js and referenced it in the aspx file, as below:
Here is the issue, I need to keep my JavaScript file near if not in the same directory in the project as DinnerForm.aspx, how do I go about doing this?
I don't want to place the full path, eg: "~\views\dinners\dinnerform.js" as this is just a work around, and will cause issues later
Any ideas?
You can't have the JavaScript files in the Views folder as it does not actually exist to the browser. If you have a look at the Web.config file in the Views folder, you'll see that it is set to the HttpNotFoundHandler handler. That means it returns 404 for all requests to its folder.
Why not put them in the Scripts folder? You could always have sub folder under it.
E.g. /Scripts/Dinner/dinnerform.js
JavaScript files by convention should be placed in project's Scripts folder and could be linked as
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"