I'm trying to use CKEditor in my Webforms application and I have tried many other methods without success. Can someone help? The site uses a Site.Master file which all the aspx files provide content for using content place-holders. So I place the JavaScript call in the ASPX rather than in the master file.
I'm also trying to get it to edit in a content editable div element. It works fine in a small test site but not in my application. Any ideas?
My Site.master has two content placeholders I want to use:
<asp:ContentPlaceHolder ID="Scripts" runat="server" />
and
<asp:ContentPlaceHolder ID="MainContent" runat="server">
An then my aspx files have:
<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server">
<script src="ckeditor/ckeditor.js"></script>
</asp:Content>`
and
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="renderTarget" renderwidth="1100">
</asp:Content>
</asp:Content>
Somewhere in my JavaScript, I set the content editable of my renderTarget div to true.
$(".contentbox[dynamic='true']").attr("contenteditable", "true");
And at this point, I expect CKedtor to add its controls to the div. But It doesn't. i use the same process with TinyMCE and it works fine.
If you have CKEditor in your project correctly, it is as simple as:
<textarea cols="80" class="ckeditor" id="editor1" name="editor1" rows="10"></textarea>
or even
<div contenteditable="true">...</div>
Also, you may want to read up on jQuery Selectors.
An example more like what you posted:
<div id="ckMe">...</div>
<script>
$(document).ready(function () {
$("#ckMe").attr("contenteditable", "true");
});
</script>
all you need is to install the version for asp.net in your project and then just use it as simple as adding a usercontrol:
<ckeditor:ckeditorcontrol ID="CkEditor1" runat="server"></ckeditor:ckeditorcontrol>
Documentation from ckEditor
Related
VERY very basic question. I'm trying to learn ASP.NET. I created a default website1 in VS 2013 Community I get a ton of files. When I run the app in IS, the default.aspx web page appears and all is OK, but above the web page is a banner with links to contact.aspx, login.aspx. register.aspx, etc. and I cannot find where that banner is? It's not on default.aspx. Where is it? Seaching the project for "Contact.aspx" only returns one result, the page itself, as an example.
It's probably coming from a Master Page. Look at the <%# Page %> header at the tops of the .aspx files. You'll see they reference a master page. A Master Page is used to provide structure to the site. It means you don't have to write the same HTML for common elements on every single content page. Content pages (.aspx) then can have their content inserted into the Master Page. And yes, you can nest master pages. This is all done through the <asp:ContentPlaceHolder /> (higher level Master Page) and <asp:Content /> (nested Master Page or Content Page) tags.
Let's look at an example:
MasterPage.master
<%# Master Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server" >
<title>Master page title</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="Main" runat="server" />
</div>
<div>
<asp:ContentPlaceHolder id="Footer" runat="server" />
</div>
</form>
</body>
</html>
Default.aspx
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
Main content here.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" runat="Server" >
Footer content here.
</asp:Content>
The resulting HTML will look like this on the client when you access Default.aspx:
<!DOCTYPE html>
<html>
<head>
<title>Content Page 1</title>
</head>
<body>
<form id="ContentPage_form1">
<div>
Main content here.
</div>
<div>
Footer content here.
</div>
</form>
</body>
</html>
Take special note of how the ID of the form changed from the server side to the client. This trips a lot of people up when they start doing client side JavaScript. If you want the ID to not change, you have to add the ClientIDMode="Static" attribute to the control (you can also set it at page, web.config, or machine.config levels).
I have been dealing with an unusual set of errors when I try to compile my asp.net page. This page is inheriting from my masterpage. It should be getting the Scriptmanager from there. But the errors I am getting suggest that it is not.
Now I have this in my page:
<%# Page Title="MassUpdate" Language="C#"
MasterPageFile="~/Site1.Master"
AutoEventWireup="true"
CodeBehind="Update.aspx.cs"
Inherits="AdminSite.Update"
MaintainScrollPositionOnPostback="true" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" >
<div id="contentarea">
<div>
<h3 style="color:Red; padding-left:5px;">
WARNING - This page can push large amounts of data into the database. Use care when using it!
</h3>
</div>
<asp:ScriptManagerProxy runat="server" >
</asp:ScriptManagerProxy>
And in my masterpage, I have this:
<body>
<header>
<div id="banner">
<h1 style="color:#DBFFFF">UAC Parts Admin</h1>
</div>
</header>
<form id="form1" runat="server">
<div id="container">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<asp:LoginView ID="LoginView1" runat="server" EnableViewState="false">
<LoggedInTemplate>
<div id="menubar">
<h6>Reports</h6>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" />
<asp:ScriptReference Path="~/Scripts/jqueryui.js" />
<asp:ScriptReference Path="~/Scripts/menubar.js" />
</Scripts>
</asp:ScriptManager>
The first error is this:
The control with ID '' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
It happens when I don't have ScriptManager on my page and use ScriptManagerProxy instead.Even though I have ScriptManager on my Master page.
Now when I put a ScriptManager on my page I get a different error.
Only one instance of a ScriptManager can be added to the page.
What do I need to do to get this to work?
Is this an issue with one of my Nuget Packages? (JuiceUI,Widgmo, etc)
I would be glad to post code if requested.
EDIT:
Yeah, this whole thing has been weird. Oddly the master page did not have issues itself. But only when the other pages used it did I have any problems. Moving it to the first element after the form tag was the solution I believe. Though I had also moved the ScriptManagerProxy up a bit in my code too.
The ScriptManager must appear before any ContentPlaceHolders. Generally as Joshua pointed out, the script manager is put at the first element after the form tag. Like so:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" />
<asp:ScriptReference Path="~/Scripts/jqueryui.js" />
<asp:ScriptReference Path="~/Scripts/menubar.js" />
</Scripts>
</asp:ScriptManager>
<div id="container">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
The reason for this is because the .aspx pages that uses this master page provide content that is placed into the ContentPlaceHolder controls. Because your ContentPlaceHolder appeared before your ScriptManager, the ScriptManagerProxy located in your content page was throwing because the ScriptManager would not be defined until later down the page.
This can be a bit odd to think about because you are defining controls in multiple different places. But the codebehind does not execute until everything is put together.
Put the ScriptManager on masterpage and ScriptManagerProxy on the .aspx page.
you need to put the script manager near your form declaration in Master page;
have a look on this Also: Walkthrough: Creating an Ajax-Enabled Web Site
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
...
</form>
</body>
For Your Second Question:ScriptManager Control Overview
Only one instance of the ScriptManager control can be added to the page.
The page can include the control directly, or indirectly inside a nested
component such as a user control, content page for a master page, or nested
master page. If a page already contains a ScriptManager control, but a nested
or parent component needs additional features of the ScriptManager control, the
component can include a ScriptManagerProxy control.
For example, the ScriptManagerProxy control enables you to add scripts and
services that are specific to nested components.
you either have to remove your script manager from master page if wanted to use in Content page or Use proxy in content page with in-addition of script manager in master page
This may be a newbie question, but i'm pretty new to asp.net & C# etc.
I'm working with an ASP.net website, and I'm curious about the structure of it (after automatically creating a web project), specifically the following:
I see that in Default.aspx , I have a tag like this:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>**strong text**
But in Site.master, I have this:
<head runat="server">
*etc*
</head>
So where would I put code if I wanted to include JavaScript code to run, on page load?
I believe you can put your code in any of them. The first one is for adding code or script used by all content pages(that using this master page file) while the second one is if you want to to add script or code from content pages(that should be used only for this specific page)
//in the Master page, the content here is used by all content pages
<head runat="server">
*etc*
</head>
and
//this is specific to the content page that use it. This section needs to be supplied in content pages
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
That section needs to be supplied in each content page and it will be exclusive to that page - no other page can use the script in that section
asp:Content ID="HeaderContent" is a content region. Anything within that tag will get embedded in the associated ContentPlaceHolder in the master page when it is generated.
head is a standard html markup, indicating the page head elements. Typically, the HeadContent placeholder is inside the head tag on the master page.
The head element, container for all the head elements, must use a title for the document. Some other elements it can include: style, base, link, meta, script, noscript.
The asp: Content ID = "HeaderContent" is a content element of the master page.
Have a look at the Plugging in Content part of the following link for detailed information on this: http://odetocode.com/articles/419.aspx
I think you asked when you want to use JavaScript where you put JS in your code.You can put anywhere you wish in asp side between script block such as:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
function Onclick(){
//some codes
}
</script>
</asp:Content>
or
<head runat="server">
<script type="text/javascript">
function Onclick(){
//some codes
}
</script>
</head>
Also you can put JS outside this tag. You only should use tag.
I need to make a quick demo showing how to do interactivity on an ASP.NET MVC page.
I opened an ASP.NET MVC project in Visual Studio 2010, put the view in design mode, dragged in a button, double-clicked on it and looked at the view again. I was expecting to see some ingenious JQuery code generated but instead an <asp:Button> and a <script runat="server"> block was created, which seems to be a mixing of classic ASP.NET and ASP.NET MVC metaphors. I don't think that is the recommended way to build interactivity in MVC, right?
So what is the easiest, most standard-MVC approach for me to (1) create a button, (2) when the button is clicked, change some text in my view?
is it really best practice in MVC to use the runat-server block?
are there some easy wizards which generate JQuery interactivity so that I can do this in a best-practice MVC way?
or do I need to implement the JQuery myself as I would on a plain HTML page without ASP.NET MVC?
View:
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form id="form1" runat="server">
<h2><%: ViewData["Message"] %></h2>
<p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</p>
</form>
</asp:Content>
You should not use asp.net ajax controls in asp.net MVC.
If you want to create a button just write some old-fashioned html like:
<input type="button">Button</input>
then if you need this button to make some action, just write new action instead of code behind method like and call it like:
<input type="button" onclick="javascript:window.location = 'http://mypage.com/mycontroller/buttonaction' />
or even better create a link instead of button by using mvc builded-in html helpers:
<%= Html.ActionLink("Do something" ,"ButtonAction") %>
Faster you catch it better for you. You need to resign from asp.net ajax habit. There is no postback or code behind and it's removed with a reason. MVC is controlled by executed actions which means that you are steering the application by calling specified links. By using pure html you've got lot more control on your output code and flow of actions in your application.
Remember that MVC is not a new ASP.NET AJAX and those two will goes together, so if this style of writing we apps does not suits you then you do not need to use it. It's just the metter of choice which technology is better for you and your projects.
Also to learn more about mvc visit asp.net mvc webpage. I specially recomend you to see some videos like this one. It will definitely help you to better understand what mvc is and what are it's advantages and disadvantages.
The "Header control" we use holds a jquery reference. When I attempt to leverage any jquery functionality from the Master page it fails because the jquery reference has not been added yet.
Is there a way to force the Header Control that is embedded into the Master Page to load it's resources before the Master Page attempts to reference them?
I'd include the jquery reference in the head of the master page itself.
Or if you don't want the jquery on every page then you can do this in your master page:
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
And then do this on the aspx page that needs jquery:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</asp:Content>
Either way you do it accomplishes the same thing. It includes the jquery file in the "head" of your HTML. And that's the easiest way to ensure jquery works properly.
You can use the ScriptManager in the template master to register your javascript inclue file for JQuery.
You can use
ScriptManager.RegisterStartupScript or
ScriptManager.RegisterClientScriptInclude
Another way is in the template master, in the oninit method use this code
Page.Header.Controls.Add(new LiteralControl(" <script src="jquery" type="text/javascript"></script> "));
You could simply move the JQuery script reference into the aspx of the master page itself (at the top, of course). Then, any controls would be able to access JQuery.