West Wind .NET Tools and Demos
How to make a user editable Help or About page in MVC ?
Gravatar is a globally recognized avatar based on your email address. How to make a user editable Help or About page in MVC ?
  rogersb
  All
  Mar 3, 2020 @ 02:27pm

Aloha West Wind board,

Have an asp.net 4.5 MVC C# project thats deployed. But for the Help or About page need to create some kind of tool or method or feature so an Admin user can modify those pages and save. This is so that they can customize their web page without having the programmer do it.

Ive searched for weeks how to possibly do this, wonder if you have done this or have tools that could? Like a kind of lite html editor so if the user is Admin they can click "Edit page" and then get a Wordpress? or simple drop in style UI to put in and arrange photos, carousel, text and links. The changes are saved in the Server project.

So the Admin will not know html, they can pick from a dropbox file or local file, resize an image, add/remove links, but HOW? Thank you so much for any replies.

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  Rick Strahl
  rogersb
  Mar 3, 2020 @ 10:49pm

I tend to use Markdown for that sort of thing.

Markdown is basically text with a few markdown commands that renders into HTML when you parse it. You can use Markdown for simple formatting and styling, kind of like the editor here. You can also use HTML inside of markdown, so more advanced users can embed full HTML content if they want.

It's not directly visual but you can have a preview (like the preview below in the messages here). The markdown you create you can store in a database and then have some way to route to an endpoint and render the Markdown into the view (like @Markdown.ParseHtml(model.MarkdownContent)).

You can store multiple pages in the database (or files) this way essentially and then render them into a common template, or use explicit loading to to specific endpoints. The view could be as simple as your layout page with the Markdown content inside.

For Markdown rendering you can use the Westwind.Web.Markdown package.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Mar 4, 2020 @ 03:50pm

Hi Rick

ok thanks so much for your reply, Im reading and trying to apply this now. Very interesting.

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Mar 5, 2020 @ 03:56pm

It seems I need to be editing the Help and About .cshtml files, and just need some kind of high level drag/drop interface so a non programmer can layout the MVC view pages and save. Something like Coffecup form editor (I was saying html editor which is wrong). The user would click to edit the Help page, was thinking to use old Win32 call(s) to the exe? and pass the path to the .cshtml file so it starts and has the file needed to edit already there. But coffecup and others dont open .cshtml The ideal setup would have the script/code side and preview side.

or

Create the about and help pages in some other format that a form editor would use? I hoped to give the user the ability to drag in a video to the page, when making the help/about do you do this? or use a View page or? still stuck, thanks

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  Rick Strahl
  rogersb
  Mar 8, 2020 @ 01:39pm

Creating HTML Editors is usually a pain. Because most HTML editors are not very good they tend to be user hostile.

The best way to deal with content is to not use HTML but use templates to generate the final layout. You don't want to let people edit raw pages in your site - that's dangerous because those pages run code. You want to be able to create content quickly and that involves not having to screw around with HTML formatting etc. Embedding content like dragging images and videos can be done easily enough even in a text/markdown editor (see image pasting here).

Most modern help systems/CMS all do this - an admin or the system provides the templates and the content is described in some sort of markup language - Markdown is becoming more and more ubiquitous - to provide the content that gets then rendered and embedded.

There are other ways obviously, but having been down this path many times (i sell a help solution and have another SAAS one in the works) and documentation tooling that people will actually use is hard to do - it's got to be EASY and fast or otherwise you get crap content because nobody wants to use the tooling.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Mar 10, 2020 @ 05:35pm

Rick, So what about a concept where an web site editor is used to make whatever the user wants for a (responsive) page. If there are buttons on the left that need to stay? they simply layout whatever it is leaving room for those buttons. This html page is simply at a higher-Z value, like taking a transparency and setting it on the monitor.

That page has to be encoded and saved in SQL on the 'deploy' command, when the page loads the controller also loads the table with the page, possibly as a binary blob?

Then they get to make their own page, whatever is functional for the app is not touched, not seen by the user. they simply make an overlay with links to various pages and it exists on another plane, its up to them not to lay it out stepping on existing buttons. But on any page load the html designed page is brought in and sent to the view page, that code Ive got no clue about.

But the user is only going to have this feature to modify one of the main pages that greet the page visitor and an about, contact and help page. The working pages dont get touched.

Is that practical?

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  Rick Strahl
  rogersb
  Mar 10, 2020 @ 06:30pm

What are you trying to do here? Are you trying to build your own Wix or something like that?

I'm just saying that letting users screw around with HTML design and (worse) real razor (or whatever) markup is problematic because there's so much potential to fuck up the entire page rendering by a single errand HTML tag - and then nothing works 😃

And then there's the whole security issue of code that you have no control over now once that HTML goes into the page... XSS attack potential, now you have to deal with explicitly white or blacklisting the HTML etc.

I don't know your use case, but unless you're building a CMS or CMS like features there rarely is a reason to do this. Not saying that there isn't a valid use case but I'd be really wary of letting end-users (especially non-technical people) do this sort of thing. Anything with raw HTML is very problematic.

If you really have to do this - it's not difficult to get the HTML to render in MVC/Razor/Blazor. Just gen the HTML and output it into the page with @Raw(model.RenderedHtml). That's easy enough, but the fallout from that isn't...

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Mar 11, 2020 @ 07:38pm

Hey Rick, The product is for a non-profit, govt/univ entity, the only people who could make changes are the boss and exec. assistant; theyre skilled, careful and would have to call me (or someone) if they messed it up, so the question of 'who' could do this? theyre trusted people if that helps?

I see what you mean about the dangers. So then a method to white/blacklist the html? Yes of course. Has to scan the data before "putting it" in. I could give more details of the use case privately;

We Could have the user use a design tool to make the page and then give to me and I would manually integrate it into the project... but then its specifically stated that it must be done without a programmer. In another dept we created a Wordpress site, a team with a Graphic Designer & folks doing content. The site is very nice the question why cant (this one) share that sort of style, at least be able to have custom pages? Order: make this site have pages that can be customized by the user. The page contents would be like headlines & article, links.

Not specializing in doing this, Im trying to learn + apply what would deliver a solid solution. It seems that having the Wordpress page edit feature to build content, then saving in SQL, then using the html helper you mentioned would work; or I havent tried coffeecup but edit in that, save the file somewhere then in my app the Admin clicks to edit the Help page, does a File Open dialog, finds the newly made html and saves it in the SQL.

Its been tricky to even specify the issue. If you think that using markup is the better solution, I want to go that route; but hopefully I was able to improve on explaining the problem

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Mar 17, 2020 @ 03:19pm

Im at the point of testing this out. However its not accepting "Raw" as a statement.

 <p>
    @Html.Raw(model=>model.raw1)
</p>

and saw this online, It's enough to use @(new RawString("html string here")) or @Raw("html string here") instead of @Html.Raw("html string here").

  • it's not difficult to get the HTML to render in MVC/Razor/Blazor. Just gen the HTML and output it into the page with @Raw(model.RenderedHtml). That's easy enough, but the fallout from that isn't...

@Raw the name does not exist in the current context, searching could not find anything that worked. And yes I see how this approach is a risk, need to try. Next up is trying markup. If sharing this offline is best, thats fine. thanks!

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  Rick Strahl
  rogersb
  Mar 18, 2020 @ 07:08pm

What are you using exactly? What version of MVC? MVC 4? Core? Razor Pages? Syntax is slightly different depending on which you use.

This is MVC 4 syntax it also works in ASP.NET Core MVC.

<div>
@Html.Raw("<b>this is raw HTML text that gets embedded as is</b>")

or

@Html.Raw(Model.RawHtmlText)

</div>

The Lambda syntax you're using is meant only for edit controls I believe - there's no need for that when calling a one-way expression function.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Mar 19, 2020 @ 08:51am

MVC 4.5 c# Razor w/Visual Studio 2015

I try that and the command Raw is red underlined, Raw does not exist in the current context? UPDATE

The same platform now works, not sure why; had issues with the IDE may need to re-install.

Html works just fine as expected now. But which tool for the user to create the web form if they dont know html/css/js at all?

Is a platform upgrade advisable? thanks

Gravatar is a globally recognized avatar based on your email address. re: How to make a user editable Help or About page in MVC ?
  rogersb
  Rick Strahl
  Apr 4, 2020 @ 09:48am

Rick, Ive changed to using EMBED or IFRAME instead of trying to save the markup. So there is a wordpress page (could be something else) and the page from which ever, Help/About or Home comes from this site. The user can customize the site. Then in my app? the corresponding page is filled in.

So it can be set on the same server, just use something besides port 80 perhaps.

Then the challenge becomes making it Responsive & tuning it for a tablet & phone

But does this make sense? Is it a better approach? thanks

© 1996-2020