I got the Kendo UI intellisense working when I write script on _Layout.cshtml page, but when I want to use it from page utilizing this layout, then the intellisense is gone.
When I add the script kendo.all.min.js at the top of the page utilizing layout, intellisense is back. Such plumbing does not seem right + messes up the console debugging (says that this component was already loaded).
I'm talking about the Kendo UI intellisense (not the MVC helpers, which works ok). I added the below to _Layout.cshtml and it is normally registered in _ViewStart.cshtml.
<head>
#Styles.Render("~/Content/kendo/css")
<script src="~/Scripts/kendo/jquery.min.js"></script>
<script src="~/Scripts/kendo/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
</head>
I added a _references.js file containing:
/// <reference path="kendo/kendo.all.min.js" />
based on this article:
http://madskristensen.net/post/the-story-behind-_referencesjs
It did the job.
Related
What is the difference of both statements concerning the section Scripts and script-tag? NOT the content inside the scripts that does not interest me.
#section Scripts {
#Scripts.Render(Bundles.Scripts.Validation)
}
vs
<script src="#Url.Content("~/Scripts/Validation.js")"></script>
The first one renders the <script> tag where you have #RenderSection("Scripts") in your layout.
This is preferred when you don't have to include a script for all pages.
Also #Scripts.Render will minify and bundle your scripts. Usually this is used at the end of body tag so that Views can get the scripts after the DOM is rendered.
The second one remains where you use the <script> tag.
If you use it in Layout, the script is included in all pages (e.g. jQuery).
Let's take an example
<!-- HTML in Layout, before Scrip -->
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts")
<!-- HTML after Script -->
Here, if the script make use of jQuery you want to included with section because jQuery is included before section.
If you include with <script> in your view you will give an error, that jQuery is missing, because is included before jQuery.
You might want to define sections in you _layout.cshtml file for specific content. It is generally believed that styles belong to <head> and scripts belong before </body>. Your mileage may vary.
If you just output <script> it will go with all the content and not where you might want it to be.
And if script inside view depends on something (jquery) and in your layout you have
#renderBody()
<script src=jquery.js></script>
#renderSection("scripts",required:false)
then you are screwed (-:
I have a very simple MVC project, and in my _Layout.cshtml I have some js includes like so:
<script src="~/scripts/jquery-2.0.3.min.js"></script>
<script src="~/scripts/easing.js"></script>
<script src="~/scripts/bootstrap.js"></script>
However, when it renders, it renders on the page like (note the tilde on the first one):
<script src="~/scripts/jquery-2.0.3.min.js"></script>
<script src="/scripts/easing.js"></script>
<script src="/scripts/bootstrap.js"></script>
I can't seem to get it to render properly, and it doesn't matter which script tag is first, that's the one it adds/keeps the tilde on. I've resorted to including the jquery script twice, the first one will have a tilde but the second one will get included, but I don't like that solution at all.
I'm working with VS 2012, it's a .NET 4.5 MVC application. From my searches it seems this was a known issue for Razor v1, but the solutions they provide don't seem to apply here.
You should be using #Url.Content() helper (We're not in ASP.NET any more, toto).
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<!-- etc. -->
Another option is to use the Microsoft.AspNet.Web.Optimization package and create bundles:
**BundleConfig.cs
public void RegisterBundles(BundleCollection bundles)
{
// ...
bundles.Add(new ScriptBundle("~/js/site").Include(
"~/Scripts/jquery-2.0.3.min.js",
"~/Scripts/easing.js",
"~/Scripts/bootstrap.js"
));
// ...
}
Then in your page use:
#Scripts.Render("~/js/site")
Either stick the references in a bundle and use #Scripts.Render("~/bundlename") or use
<script src="#Url.Content("~/scripts/jquery-2.0.3.min.js")"></script>
Ok, so i've spent the entire day trying to figure this one out- but i cannot! Here is my problem.
I'm using ASP.NET MVC 4 & Razor. My goal is to do some BASIC Ajax. All i want to do is have a div on my page which gets updated by an Ajax link- to prove Ajax is working.
I think the problem has something to do with the script files i need to make Ajax work. By default, i didnt even have a scripts directory- so i created one, and found MicrosoftAjax.js, MicrosoftMvcAjax.js and jquery.unobtrusive-ajax.min.js- and added references into _Layout.cshtml inside the head
Here is what i've got:
In my _Layout.cshtml, i have the following inside my head
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.unobtrusive-ajax.min.js">/script>`
In my HomeController.cs i have:
[HttpGet]
public string GetStatus()
{
return DateTime.Now.ToLongTimeString();
}
Inside my About.cshtml file, i have the following:
#Ajax.ActionLink("Ajax Test", "GetStatus", new AjaxOptions{UpdateTargetId="testtarget", HttpMethod = "Get"})`enter code here`
< div id="testtarget">Test Div</div>
When i compile the application, i can see the "Ajax Test" link- and the "Test Div" text.
When i click "Ajax Test", i get redirected to Home/GetStatus and a print out of the current time onto a blank page.
This is clearly not what i expected
Well, i just figured it out-
the MicrosoftAjax javascript files are no longer used post MVC2- instead, just add jquery and jqueyr.unobtrusive-ajax.min to your head- then the exact same code works :)
For people looking at this post for answers, I would also add: ensure you have properly configured your web.config to allow the unobtrusive library to work
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
I'm just trying to set up an input with datepicker and I'm getting the following error: "Object doesn't support this property or method".
I downloaded the JQueryUI without a theme and there is my head section of the master page:
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="/Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
After that, I created an input text inside a partial view (that remains inside a view):
<input type="text" id="txtDataIda" />
And at the beggining of this partial view:
$(function() {
$("#txtDataIda").datepicker();
});
When I open the page, the error is shown and the datepicker won't work.
I suppose I must be doing something wrong since I've never got the chance to work with JQueryUI before.
Thanks in advance!
You should go to http://jqueryui.com/download and build a custom download with the features that you want. Then, just reference the 2 files (jquery-1.4.2.js, jquery-ui-1.8.5.custom.min.js) in the "js" folder and not all of the files in the "development-bundle" folder. Then, you don't have to worry about multiple files conflicting. I have a feeling that the .widget, .datepicker, and 1.8.custom files may be conflicting. But, if it's all in one custom file, then you don't have to worry about that.
Or if you're not using any other ui features, you could try referencing only the jquery-1.4.2.js, ui.core.js, ui.datepicker.js files to see if that works without conflict.
And, of course, double check that you've put the references in the correct master page that is being used.
Fixed!
The JQuery wasn't being loaded, because the script tag was self closing. When I changed it to , it worked, as bizarre as it seems.
Thanks!
How do I inject a script tag such as
<script src="somejsfile"></script>
or
<script type="text/javascript>some javascript</script>
into the head tag of a page from a partial view?
Update: Answer for the old question
This is about ASP.NET MVC. We can use the RenderSection. Here the sample for MVC 3 using Razor view engine:
layout view or master page:
<html>
<head>
<script ...></script>
<link .../>
#RenderSection("head")
</head>
<body>
...
#RenderBody()
...
</body>
</html>
View, e.g. Home:
#section head{
<!-- Here is what you can inject the header -->
<script ...></script>
#MyClass.GenerateMoreScript()
}
<!-- Here is your home html where the #RenderBody() located in the layout. -->
Even if THX's answer works, it's not a good one as MVC's intention is to be stateless by nature. Moreover his solution does not let you place your scripts where they should go - most sites want their script declarations at the very bottom of their page just before the </body> tag as it is best for performance and search engine optimization.
There is an answer, thanks to Darin Dimitrov:
Using sections in Editor/Display templates
His answer allows you to register scripts from a partial view within the layout view.
The caveat is his answer marks items using a GUID in a dictionary object, so there is no guarantee the scripts will be rendered in the master page in the same order they are listed in your partial view.
There are two workarounds for that:
Register only 1 script from a partial view -or-
Change his HTML Helper implementation to support ordering
I'm trying to work on the later myself.
Good luck.
Partial views are UserControls. Can't you use RegisterClientScriptInclude method of ClientScriptManager?
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
Page.ClientScript.RegisterClientScriptInclude("some key", "http://website/javascript.js");
}