I'm new to web development and I'm trying to implement the Kendo UI editor with an image browser to insert into the document on an MVC 4.5 page. the editor is working fine, however, when i click the insert image button i gt a 403 forbidden popup message.
I've created a custom image browser controller pointing to ~/Content/images.
and in my view, i am using the custom browser controller within my code
#(Html.Kendo().EditorFor(m => m.QuestionText)
.Encode(false)
.HtmlAttributes(new { style = "width: 100%; height: 200px" })
.Name("EditQuestionText")
.Tools(tools => tools.Clear().InsertImage())
.ImageBrowser(imageBrowser => imageBrowser
.Image("~/JFA/QuestionImages/{0}")
.Read("Read", "JFAImageBrowser"))
)
I've compared my code to the sample project from Kendo for the EditorFor (which will browse the folder) but can find no discernible differences... I also cannot find much in the way of other people who are having this problem so i suspect there is a setting that i cannot find that is causing my issue, any help would be GREATLY appreicated
my image browser (taken directly from the demo)
public class JFAImageBrowserController : EditorImageBrowserController
{
private const string contentFolderRoot = "~/Content/images";
public override string ContentPath
{
get
{
return contentFolderRoot;
}
}
additionally, using Fiddler the click event for the "Insert Image" button is
GET /JFA/JFAImageBrowser/Read?path=%2F HTTP/1.1
where as the demo is
POST /ImageBrowser/Read HTTP/1.1
I don't know why the demo is using a POST where as mine is using a GET, unless this is because of the overridden image browswer
That code looks fine. Can you make sure your JFAImageBrowser controller looks something like this?
public class BlogImagesController : EditorImageBrowserController
{
//
// GET: /BlogImage/
public ActionResult Index()
{
return View();
}
public override string ContentPath
{
get { return AssetFilePaths.BlogContentPath; }
}
}
It's important that it inherits from EditorImageBrowserController
Also, a 403 may mean that the user doesn't have permission to access the directory. Check the permissions for the user you're running as.
It turns out my problem was in the _Layout page. I was using bundling and either
A) I made some error when setting up the bundling
-or-
b) the bundling didn't work as expected/intended.
either way i added the individual script/java script references and it works as expected.
Here is the solution to this problem
the page this issue fixed was it kendo forum
http://www.telerik.com/forums/implementing-image-browser-for-editor
and the direct link for the demo
http://www.telerik.com/clientsfiles/e3e38f54-7bb7-4bec-b637-7c30c7841dd1_KendoEditorImageBrowser.zip?sfvrsn=0
and if this demo didn't work you can see this sample i made from above
https://www.mediafire.com/?9hy728ht4cnevxt
you can browse the editor through HomeController and the action name is homepage (home/homepage)
& I think that the error was in different uses of paths between the base controller & child controller you make.
Related
I want to load my application at http://localhost:52856/CRUD/Products/List so then i can start working on the List.cshtml file instead of loading Index.cshtml at http://localhost:52856 .
Look i know i can just put a button at the index file so then it can redirect to path or use the navbar, but personally i don't want to do that every single time.Just load the application at the file.cshtml i want. But How can i do it?
If you don't like my comment you could do the following in Index.cshtml.cs
public IActionResult OnGet()
{
return new RedirectToPageResult("/CRUD/Product/List");
}
1. Include MVC as a service into our app.
we can optionally use another method called AddRazorPagesOptions() like so:
services.AddMvc().AddRazorPagesOptions(options =>
{
options.Conventions.AddPageRoute("/Customer/Index", "");
});
Within that AddRazorPagesOptions() method, we can set things like route conventions and the root directory for pages. It turns out that, to set a default route for a page.
2. remove or rename Pages/Index.cshtml
By default a Razor Page app goes to Home/Index
Is there a way to change this to Home/App?
This is quite easy in MVC, but Razor pages using a different routing setup and thus MVC routing does not apply.
I would think it would be in options somewhere, but I don't see it:
services.AddMvc()
.AddRazorPagesOptions(options =>
{
options.Conventions.AuthorizeFolder("/Account/Manage");
options.Conventions.AuthorizePage("/Account/Logout");
options. ??SetDefaultPage??
});
I have tried this:
options.Conventions.AddPageRoute("/App", "");
But now two default routes are found and an error is generated:
AmbiguousActionException: Multiple actions matched. The following actions matched route data and had all constraints satisfied:
Page: /App
Page: /Index
It's possible to resolve this error by removing Pages/Index.cshtml from the project, but I wanted to keep that page as well.
In my case the ambiguity was caused by Pages/Index.cshtml left in project.
This worked:
options.Conventions.AddPageRoute("/App", "");
remove or rename Pages/Index.cshtml
Pretty sure it isn't possible. The docs say the runtime controls the search for Index as the default. I couldn't find where that happens in the current release, but IndexFileName is a static in the new internal PageRouteModelFactory class added to the upcoming release:
private static readonly string IndexFileName = "Index" + RazorViewEngine.ViewExtension;
It doesn't seem like it would be difficult to just add a config property to RazorPagesOptions, though. The ASP.NET guys are pretty responsive, I'd open a request as a GitHub issue and hope for the best.
I solved the issue by using Microsoft.AspNetCore.Rewrite:
Then adding code to replace the default Index action, in my case with Portfolio:
var options = new RewriteOptions()
.AddRedirect("^", "portfolio"); // Replace default index page with portfolio
More detailed article about rewrite options - https://learn.microsoft.com/en-us/aspnet/core/fundamentals/url-rewriting?tabs=aspnetcore2x
Another way is to simply redirect from the Index OnGet method, like so:
public class IndexModel : PageModel
{
public IActionResult OnGet()
{
return Redirect("/Welcome");
}
}
Notice that I have change the return type of the OnGet method.
I'm working on an ASP.NET Core app that I would love to publish as a NuGet package that you can add to any Core web project. The app is actually entirely confined to an area (i.e., /Areas/MyArea) in the project, including controllers, views, service classes, models, views, etc., except for a few pieces. Really, these are the pieces that I'd love to magically add to an existing web app:
The area and everything in it
Its CSS and JS in wwwroot/lib/myapp
Entries in the Startup class
MyApp.json in the root
I know NuGet will restore the package dependencies, but I'm not sure how it would also consider the client-side packages.
Any suggestions? Is NuGet the wrong tool for this?
currently afaik it is not possible to deliver files into the web app from a nuget package. I think there is some discussion and work going on about making that possible in the future.
The way I'm handling that in my projects is to embed the views and the needed static js and css resources which is done like this in project.json:
"buildOptions": {
"embed": [ "Views/", "js/", "css/**" ]
},
I created a controller to serve my static resources:
public class cscsrController : Controller
{
private ContentResult GetContentResult(string resourceName, string contentType)
{
var assembly = typeof(cscsrController).GetTypeInfo().Assembly;
var resourceStream = assembly.GetManifestResourceStream(resourceName);
string payload;
using (var reader = new StreamReader(resourceStream, Encoding.UTF8))
{
payload = reader.ReadToEnd();
}
return new ContentResult
{
ContentType = contentType,
Content = payload,
StatusCode = 200
};
}
[HttpGet]
[AllowAnonymous]
public ContentResult bootstrapdatetimepickercss()
{
return GetContentResult(
"cloudscribe.Core.Web.css.bootstrap-datetimepicker.min.css",
"text/css");
}
[HttpGet]
[AllowAnonymous]
public ContentResult momentwithlocalesjs()
{
return GetContentResult(
"cloudscribe.Core.Web.js.moment-with-locales.min.js",
"text/javascript");
}
}
then I link to the controller action in the views where I need to load the js and/or css.
To make the embedded views work I created an extension method of RazorViewEngineOptions:
public static RazorViewEngineOptions AddEmbeddedViewsForCloudscribeCore(this RazorViewEngineOptions options)
{
options.FileProviders.Add(new EmbeddedFileProvider(
typeof(SiteManager).GetTypeInfo().Assembly,
"cloudscribe.Core.Web"
));
return options;
}
and this must be called from ConfigureServices in the web app Startup like this:
services.AddMvc()
.AddRazorOptions(options =>
{
options.AddEmbeddedViewsForCloudscribeCore();
})
;
this technique should work the same for areas. Note that one cool thing is that users can download the views and install them locally and that will override the use of the embedded views making it easy to customize some or all views. By overriding the views it is also possible to then manually install the js and css locally if desired and change the views to link to those local files if customization is needed. The end result is my nuget has everything it needs so there is just some startup configuration to get things working.
Years later, this is possible in ASP.NET Core > v2.x, by using a Razor class library.
I have a pop up that is called through a java script, the same pop up without a JavaScript is an ctp page in cakephp. How can I hide that page from users and search engines going to access it like: /users/register
Is there anything that can be done in .htaccess or cakephp to prevent access to it through /users/register
Remove register.ctp file from users folder and create one in ajax folder users/ajax/register.ctp, then use RequestHandler component to inspect request type:
public function register()
{
if($this->request->is('ajax')){
// add registration code here
} else {
//Throw new error
}
}
I downloaded a trial version of Kendo.UI, so logging onto the forums, at this stage is not possible, hoping someone on here can help me solve this problem.
I'm trying to implement the async upload onto a basic MVC 4 application. I've added a reference to the Kendo.UI.MVC wrappers, and added the necessary namespace Kendo.UI.MVC to both web.config files (root and under Views).
If I implement a basic uploader on my landing view (index.cshtml) it works fine:
<form action="/Home/Save" method="post">
#(Html.Kendo().Upload().Name("files"))
<input type="submit" value="Submit" />
</form>
However, as soon as I add the Save() method to Async, I get an "index was out of range" exception. I know it's the save method, because if I just add "AutoUpload(true)" without an action reference, it does not throw an exception. If I just add "Remove("Remove", "Home")" it still shows the Select button, without an error, but the "Save("Save", "Home")" method keeps throwing the mentioned exception.
I followed the examples that ship with the trial to the letter and it should web working, yet it does not.
View (index.cshtml):
#(Html.Kendo()
.Upload()
.Name("files")
.Async(async => async
.Save("Save", "Home")))
-- Error is being thrown on the above statement
#(Html.Kendo()
.Upload()
.Name("files")
.Async(async => async
.AutoUpload(true)))
-- this line works
Controller (HomeController):
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Save(IEnumerable<HttpPostedFile> files)
{
// I just want the break-point to be hit
// does not due to IndexOutOfRange exception being thrown
return Content("");
}
}
The only thing that seems wrong is the Razor syntax:
(#Html.Kendo()
should be
#(Html.Kendo()
I was able to run your code with this small change.
Updated the MVC templates for Visual Studio and it works. Thanks.