Passing a large HTML string from a view to a controller

Question

Note. I am an interface developer wearing a .Net developer hat. Funny, I know, but how I ended up in this mess is not the point. With this rejection of the path, this is what happens.

As the name implies, I need to pass a rather long line of HTML (as on several pages of text) from the view to the controller. Over the past few days, I have been exploring various ways to achieve this. TBH, some things made sense and some didn't.

Here is my code snippet inside View :

var html = "<form id='htmlContent' action='" + customUrl + "' method='post'>" + "<input type='hidden' name='content' id='contentStr'>" + "</form>"; // string literal html gets appended to some element... $("#htmlContent").submit(); 

A few things I would like to point out here:

• I am using a string literal to create a form here because this DOM must be dynamically bound to another element at some point.
• Can't I use a valid HTML string. I already checked its authenticity separately, and everything looks fine.
• I intentionally use the jQuery submit() method instead of using an Ajax call.

Controller:

 [HttpPost] public ActionResult ParseHtml(FormCollection form) { string htmlStr = form["content"].ToString(); .... // some code in between, but the first line appears to be causing an error or // the value is not being retrieved. .... return new EmptyResult(); } 

I understand that I work in the context of the MVC framework, and I kind of understand the concept of this. But knowing how to implement it with my very limited knowledge is another matter (especially when you inherited a poor code base from someone who had long since left your project!)

I would like to think that it is quite simple and easy to do, but I turned the wheels much longer than I would like. Any pointers in the right direction would be highly appreciated.

Answer 1

In this minimal reproducible answer, I will show you how to do this, and you can run it here:

Index.cshtml

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = '@Url.Action("Create","Stack")'; var html = $("<form id='htmlContent' action='"+url+"' method='post'><input type='hidden' name='content' id='contentStr' value='oranges'/></form>"); $(body).append(html); $("#htmlContent").submit(); }); </script> @{ ViewBag.Title = "title"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>title</h2> 

Controller.cs

 using System.Web.Mvc; namespace MvcPlayground.Controllers { public class StackController : Controller { // // GET: /Stack/ public ActionResult Index() { return View(); } public ActionResult Create(FormCollection form) { string htmlStr = form["content"].ToString(); return View("Index"); } } } 

If you put a breakpoint on return View("Index"); , you will see that htmlStr is “oranges”, that is, the value of the added text field.

Answer 2

Not answering the bulk of your question, as I'm not sure about the details, sorry. I am not saying that you are doing this “wrong” with any stretch, since I’m not sure that it may seem necessary on the periphery, but you can create a situation where you will have a serious headache when analyzing the backend and what not . It’s very likely that a lot of this is not right because I’m not sure of the requirements, so I apologize.

 "I'm using a string literal to construct the form here because this DOM needs to be dynamically attached to other element at some point." 

Do you want to redisplay the same element in another component? It looks like you are looking for a partial view. In doing so, you can display it in View1 and use it in View2 with the same data. If you are trying to create elements on the fly, I assume that you are using some kind of template (that is, there is a project that I am working on, where I iterate over the collection and do

 <input type='text' id=' attribute_@ (item.Id)' name=' attribute_@ (item.Id)' /> 

And then iterate over the FormCollections AllKeys element to get them (parsing attribute_ and what you like:

 foreach(var key in form.AllKeys) { var id = Convert.ToInt32(key.Replace("attribute_", "")); // may want to TryParse var item = Item.GetItemById(id); item.Value = form[key]; item.Update(); } 

Somewhere in the view, you are using javascript to set document.getElementById ("contentStr") (not sure if it is intended, but your identifier and name are different. Not a bad thing in itself, but could lead to an omission)? Again, not sure if var html = is used here. Razor sees that you can just do the regular html [form] ... [/ form]. Are you doing something similar before submit action?

 $('#content').val(html);