如何动态创建css / js / html文件并使用ASP.NET MVC在运行时提供服务

Question

Ok, perfect examples: tryIt Editor (w3schools), jsbin, jsfiddle. I want a user to type css/js/html into different textareas, hit a magic button and poof, the output's displayed in an iframe.

Code examples are appreciated but I'm more after answers to how to go about it than exact implementation. For example, I can easily send the js / html / css as strings to the server. Then dynamically create files for them. But then what?

I want to have these files exist merely for the POST & GET. I dont want to remake a jsfiddle, I want to quickly show a user what output they have, not save it for later. So I dont want these files saved to memory. I want them sent to the user, and if they refresh the page then it's gone.

1. Is the idea of creating files (and removing the old ones each update) a good idea?
2. Should it all just be done client-side in javascript?
3. If using files is the correct method, how can I serve them up? I'm thinking create a file to a temp folder on the server, then POST the link, then send a DELETE request after 300ms with a unique ID + salt, which deletes the temp file if it still exists. But this is far from ideal I can think of a few issues immediately

Answer 1

Any server-side action method can technically return any kind of response. So instead of thinking about files, think about response types. Namely:

• text/html
• text/css
• application/javascript (or maybe text/javascript?)

So you'd need at least three action methods. Pressing the "magic button" can, for example, reload a frame (with a POST request which includes the HTML/CSS/JS inputs) which:

• invokes the action method which returns text/html , which itself:
• includes standard tags in the head node which reference the routes for the CSS and JavaScript "files" (which aren't really files, just action responses)

One handy way to return custom responses from the action methods would be with the ContentResult type:

return Content(htmlText, "text/html");

Or:

return Content(cssText, "text/css");

So your server-side code can, for example, take the CSS text from the client-side and just echo it back like that. (Beware of various attacks, such as XSS. This simplistic implementation isn't likely ideal, but should get you started.) The only one you'd really need to wrap in any custom text would be the HTML response, where you can just statically define the HTML server-side and put the user-input HTML in just the body element.

So just thinking out loud, if the POST request for the frame/iframe consists of the three values, then the basic HTML server-side action might look like:

public GetHTML(string html, string css, string javascript)
{
    // temporarily store the css somewhere server-side
    // temporarily store the javascript somewhere server-side
    // build the html response from static dressing around the user-input html
    return Content(htmlString, "text/html");
}

The CSS/JS are stored in a temporary server-side location, possibly utilizing session state or any built-in temporary storage mechanism. After the above action returns its response, the browser will request the CSS/JS actions from the tags in that response, those are simple enough:

public GetCSS()
{
    // if the temporary location (session?) has a css value
    //   get that value
    // else
    //   get a default, likely empty value
    return Content(cssString, "text/css");
}

// repeat for the javascript content