Post value from RitchTextEditors in loop to controller

[Bart]

Hi. I have a problem in my application. I render a RitchTextEditor in foreach loop for emails content like this:

   <div class="form-group" style="margin-top: 1rem;">
         @{
             int counter = 0;
         }
         @foreach (var item in Model.EmailsContents)
         {
             <div class="form-group">
                 <div class="card">
                     <div class="card-header">
                         <span class="pull-left font-weight-bold">
                             <span class="col-md-12 control-label label-required">@item.EmailType.GetDescription()</span>
                         </span>
                         <span class="pull-right">
                         </span>
                     </div>
                     <div class="card-body">
                         @Html.HiddenFor(m => item)
                         @(Html.EJS().RichTextEditor("rte12" + counter)
                                                             .ToolbarSettings(t => t.Items(new[] { "Bold", "Italic", "Underline", "StrikeThrough",
                                                              "FontName", "FontSize", "FontColor", "BackgroundColor",
                                                              "LowerCase", "UpperCase", "|",
                                                              "Formats", "Alignments", "OrderedList", "UnorderedList",
                                                              "Outdent", "Indent", "|",
                                                              "CreateLink", "Image", "|", "ClearFormat", "Print",
                                                              "SourceCode", "FullScreen", "|", "Undo", "Redo"  }))
                                                             .ShowCharCount(true)
                                                             .Height(300)
                                                             .Locale("pl-PL")
                                                             .Value(item.Content)
                                                             .MaxLength(10000)
                                                             .Render())
                         @Html.ValidationMessageFor(m => item.Content, "", new { @class = "text-danger" })
                     </div>
                 </div>
             </div>
             counter++;
         }
     </div>

I created counter property to distinguish each item. I don't know if it's good idea.

I have a 20 items in Model.EmailsContents so this foreach loop render a 20 ritchtexteditors with name from "rte120" "rte121" and so on.

The main problem is how to pass this data to controllers crud methods.

I was trying in this way:

$('#submit').on('click', function () {
            var text = document.getElementById("rte_rte-edit-view").innerHTML;
            var text120 = document.getElementById("rte120_rte-edit-view").innerHTML;
            var text121 = document.getElementById("rte121_rte-edit-view").innerHTML;
            var text122 = document.getElementById("rte122_rte-edit-view").innerHTML;
            var text123 = document.getElementById("rte123_rte-edit-view").innerHTML;
            var text124 = document.getElementById("rte124_rte-edit-view").innerHTML;
            var text125 = document.getElementById("rte125_rte-edit-view").innerHTML;
            var text126 = document.getElementById("rte126_rte-edit-view").innerHTML;
            var text127 = document.getElementById("rte127_rte-edit-view").innerHTML;
            var text128 = document.getElementById("rte128_rte-edit-view").innerHTML;
            var text129 = document.getElementById("rte129_rte-edit-view").innerHTML;
            var text1210 = document.getElementById("rte1210_rte-edit-view").innerHTML;
            var text1211 = document.getElementById("rte1211_rte-edit-view").innerHTML;
            var text1212 = document.getElementById("rte1212_rte-edit-view").innerHTML;
            var text1213 = document.getElementById("rte1213_rte-edit-view").innerHTML;
            var text1214 = document.getElementById("rte1214_rte-edit-view").innerHTML;
            var text1215 = document.getElementById("rte1215_rte-edit-view").innerHTML;
            var text1216 = document.getElementById("rte1216_rte-edit-view").innerHTML;
            var text1217 = document.getElementById("rte1217_rte-edit-view").innerHTML;
            var text1218 = document.getElementById("rte1218_rte-edit-view").innerHTML;

            return SubmitValidation(document.getElementById('form')) && (text) && (text120) && (text121) &&

             (text122) && (text123) && (text124) && (text125) && (text126) && (text127) &&

             (text128) && (text129) && (text122) && (text123);
        });

But.. This doesn't work, I would like to pass data from my ritchtexteditors like a array or json..

In controller add method I was trying:

var emailsContentsFromView = viewModel.EmailsContents;

                foreach (var item in emailsContentsFromView)
                {
                    var modelEmail = new EmailsContent()
                    {
                        Content = item.Content,
                        CreatedAt = DateTime.Now,
                        ProgramEdition = model,
                        EmailType = item.EmailType
                    };
                    _emailsContentDataAdapter.AddEmailContent(modelEmail);
                }

Do You have any ideas how to resolve my problem?

Thank's for Your help.

Regards :)

[Pandiyaraj Muniyandi]

Hi Bart, 

Currently, we were validating the reported issue with mentioned scenario and facing complexity to make CRUD based MVC application similar to your use case. If you have any reference link or sample and if it possible to share kindly provide, it will help us to provide solution at earliest. 

Regards 

Pandiyaraj 

[Pandiyaraj Muniyandi]

Hi Bart, 

  

Can you confirm following things to proceed further on this requirement 

  

- Are you facing value not accessible while submit value ? 

- Have you configured application similar to below CRUD project structure (Defined model property alone accessible with DB) ? 

       https://www.syncfusion.com/downloads/support/forum/148626/ze/MailRTE1670079073  

- Are you process all RTE value to store into DB or going to make other action ? 

  

Regards, 

Pandiyaraj 

[Bart]

Hi Pandiyaraj, thanks for help.

1. I don't know if I have not accessible value because i don't know how to pass this value

2. Yes, this structure is similar to my. I have a dataAdapter which is responsible to get data from db.

3. In this case I process all RTE value to store into DB.

I don't know if I explained it correctly.

[Pandiyaraj Muniyandi]

Hi Bart, 

 

Thanks for your update. 

 

By adding FormCollection type argument additionally to post handling ActionResult method, we can access the all form fields value as follows 

 

 

        // POST: Mails/Edit/5 

        // To protect from overposting attacks, please enable the specific properties you want to bind to, for  

        // more details see https://go.microsoft.com/fwlink/?LinkId=317598. 

        [HttpPost] 

        [ValidateAntiForgeryToken] 

        [ValidateInput(false)] // Allowing html content access from form fields 

        public ActionResult Edit([Bind(Include = "Id,Content")] Mail mail, FormCollection formCollection) 

        { 

            string rteValue0 = formCollection["rte120"]; 

            string rteValue1 = formCollection["rte121"]; 

            string rteValue2 = formCollection["rte122"]; 

            string rteValue3 = formCollection["rte123"]; 

            string rteValue4 = formCollection["rte124"]; 

            if (ModelState.IsValid) 

            { 

                db.Entry(mail).State = EntityState.Modified; 

                db.SaveChanges(); 

                return RedirectToAction("Index"); 

            } 

            return View(mail); 

        } 

 

 

 

We have prepared sample for reference, get it from below link 

https://www.syncfusion.com/downloads/support/forum/148626/ze/MailRTE532502328 

 

Note: In the above sample we configure Edit action alone. 

 

Regards, 

Pandiyaraj