CKEDITOR Problem on MVC2 - asp.net-mvc

I don't know how to use CKEditor in Mvc2 Framework.
I tried but it will not work
<%= Html.TextAreaFor(model => model.ABSTRACT) %>
<script type="text/javascript">
$(document).ready(function() {
$("$ABSTRACT").ckeditor();
});
</script>

Change the $ with # and it should definitely works
$("#ABSTRACT").ckeditor();
also be sure to have this 2 scripts referenced in your page.
<script type="text/javascript" src="#Content.Url("~/yourpath/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="#Content.Url("~/yourpath/ckeditor/adapters/jquery.js")"></script>
You can also consider to associate ckEditor to a class instead of the Id of controls. so with only one call you can set the editor for all the control that have that class in your apps.

Is there any way you could just use the asp.net usercontrol for ckeditor?
http://ckeditor.com/download 3rd one down.
I have not tried it in mvc but I do not see why it would not work in MVC.

Related

ASP.NET MVC View not rendering script tags properly

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>

gmaps4rails on jQueryMobile don't work

I tried gmaps4rails on jQueryMobile Framework.
One page is only link to gmaps page.
Two page is gmaps4rails page.
jQueryMobile ajax page enabled.
From one page to two page don't display gmaps.
But Two page direct access is success display gmaps.
This is my repository.
https://github.com/y-hirasawa/sample-jqm-map
I want to use ajax pages, and display gmaps.
Help me.
You need to include the googlemaps javascript files in your layout:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
the map is created thanks to a window.onload callback. Since the page is already loaded, it fails. So you have to add a jquery mobile callback in your application.js:
$('#gmaps').live('pageshow',function(event){
Gmaps.loadMaps();
});
If you want this to work, you have to set an id to the page containing the google map:
<div class="page" data-role="page" id="gmaps">
Last, you must prevent double loading of scripts, so change your call to the gmaps4rails helper:
<%= gmaps4rails(#json, false, false) %>

In ASP.NET MVC, adding a script reference throws exception

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.

AjaxHelper is not working

I am working on ASP.NET MVC.
in order to use AjaxHelper, I inserted two javascript files in the site.master as following.
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
then I used AjaxHelper in view pages, but it did not work.
so, I changed order of javascript file as following.
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
Then it worked :(
So, my question is that the order of JavaScript file effects to use AjaxHelper class?
Absolutely. The MVCAjax classes will need to reference the more generic Ajax classes. Therefore, the generic ones get referenced first
The MicrosoftMvcAjax.debug.jss file has code in it that references code in MicrosoftAjax.debug.js. Hence the order in which they are declared matters.

CSS and Javascript relative path confusion in ASP.NET MVC

My javascript paths work on this page:
http://localhost:53049/
But not on this page:
http://localhost:53049/Home/Messages
The reason is that the relative paths are different, the former requires ("js/...") and the latter requires ("../../js/...").
I'm including my javascript in my Site.Master file:
<script type="text/javascript" src="js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="~/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.2.6.js") %>"></script>
How do I get around this relative path madness, i.e. what is the best practice way in ASP.NET MVC to set CSS/Javascript paths in the Site.Master so that they work for each view no matter how deep that view's URL happens to be.
ADDENDUM:
It seems that for the Index view, any path will work, strangely:
<script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../Scripts/jquery-1.2.6.js"></script>
But for any other pages (pages with a deeper URL), none of these work.
What's going on here? How can we set the Javascript path once in Site.Master and they work for all pages?
ADDENUM II:
It turned out to only be a problem with the jqgrid javascript file (not the jquery file), apparently inside that file it is referencing other javascript files and gets confused:
<script type="text/javascript" src="<%= Url.Content ("~/js/jquery.jqGrid.js") %>"></script>
You can also use the Url.Content method call to make sure that the paths are correctly set.
Examples can be found here.
Regarding paths used in CSS documents:
/Content/site.css
Body {background-image:url('background.jpg');}
Relative paths in CSS documents are related to the CSS document, not the document being displayed.
This information saved me some headaches.
Try setting the javascript to use a forward slash at the beginning, like "/js/jquery.jqGrid.js" This will set them to use the root domain instead of relative pathing.
The solution for jqGrid: open the file jquery.jqGrid.js and locate the line:
var pathtojsfiles = "js/"; // need to be ajusted
As the comment says, you need to edit that path, e.g. for a typical ASP.NET MVC app,
var pathtojsfiles = "/Scripts/js/"; // need to be ajusted
You need to add runat="server" and to specify the absolute path like this:
<script type="text/javascript" runat="server" src="~/js/jquery.jqGrid.js"></script>]

Resources