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>
Related
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.
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>
Problem: datepicker is not showing up at all. No errors in the console. All files are included and accessible via Firebug.
After spending way too much time trying to get the jQuery UI datepicker to work, and that includes reading through dozens of Google results, I need your help. Not even the simplest, plain, straightforward implementation of the datepicker is working for me.
Current example I'm testing (stripped down to nothing but the datepicker):
<html>
<head>
<meta charset="UTF-8">
<title>DatePicker Test</title>
<!-- JavaScript -->
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.19.custom.min.js"></script>
<!--script type="text/javascript" src="../js/jquery/jquery.ui.datepicker.js"></script-->
<!-- Stylesheets -->
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.19.custom.css" />
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div><input type="text" id="datepicker" class="hasDatepicker" /></div>
</body>
</html>
This does NOT work. I've downloaded the entire jQuery UI code (jquery-ui-1.8.19.custom.min.js) and tried everything. I've even tried to add a simple datepicker field to the demo HTML page that comes with jQuery UI. Nothing.
Then I downloaded the developer bundle of jQuery UI, and tried just the datepicker.js with jQuery, but even that failed.
So although I get no errors, and I can see my selector in the code and through calling it up from the console, I just get plain old nothing.
Then I've tried numerous CSS modifications that have been posted in several forum posts, moved my JavaScript from the top to the bottom, after the datepicker . . . and all kinds of mutations, but nothing has worked.
Is it me?
Certainly, it's possible for others to use the datepicker plug-in, what am I doing wrong?
Hey so I looked into your issue. I suggest removing the class declaration in the input that helped me. Also make sure your script links are correct. You are currently asking them to pull from a folder that comes before your current page. If the page and css/js folders are in the same directory you can remove the "../" at the front.
<input type="text" id="datepicker" />
A helpful add-on in FireFox are the Web Developer tools
Check out this js fiddle here for a working example. It's pretty similar to what you are doing minus the class on the input field, aswell as in this case the example is using CDN's.
You must have something wrong (maybe a script or css isn't getting sourced).
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!
On a skeleton ASP.MVC that Visual Studio creates, I add a script tag to my head section in Site.Master:
<script src="~/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
This causes the page to not render. In my case, I had a custom controllerfactory and the base method GetControllerInstance threw an exception:
The controller for path
'/~/Scripts/jquery-1.3.2.js' could not
be found or it does not implement
IController.
Using "../../Scripts/jquery-1.3.2.js" for the src does not work either.
The only way it works is:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>"
type="text/javascript"></script>
Then of course, the intellisense does not work for jquery. So I have to resort to adding the hack:
<% if (false) { %>
<script src="~/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<% } %>
which the hotfix was supposed to fix according to ScottGu
A line above is a link to a stylesheet:
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
For some reason, that works fine. Whether I use the virtual or relative path, I can see that the resulting url on the page is "Content/Site.css". The same can't be said for the jquery url. jquery link is returned as is - the jquery url is returned on the page containing the "~" or the "../..".
Can someone tell me what is going on?
Thanks
UPDATE:
Thanks to the commenters, I remembered that ~ is an asp.net thing. My only question is then why doesn't the same issue exist for the stylesheet? The link tag above, for example, I can put ~ or relative paths and it always comes out right. Where is the magic?
Have you tried without the ~:
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
The ~ character is used only by server side processing scripts indicating the root of the web site. The reason:
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
works is because it is translated to:
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
The "~" is not supported within standard HTML - it is an ASP.NET shortcut. So you've either got to do it the way you specified in your OP and the hack for intellisense, or as Darin specified but then you lose the ability to automatically pick up your VRoot.
I don't know for sure, but maybe MVC is smart enough to not include CSS files in the routing.