Form Serialize does not post editor value

5 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 31 Oct Link to this post

    Hello,

    In my mobile application there is an Editor who value i want to submit on save button click. But when i post form serialize the Controller gets no value for Editor in formcollection

    @(Html.Kendo().MobileView()
    .Name("Notizen")
    .Stretch(true)
    .Layout("mobile-tabstrip")
    .Title("Notizen")
    .Content(@<text>
     
         <form class="frmAdressNotes" action="@Url.Action("SubmitMobileNotes", "AdressDetail")" id="frmAdressNotes" method="post">
    @(Html.Kendo().Editor().Value(Model.Notes)
    .HtmlAttributes(new { style = "width: 480px;height:350px"})
    .Name("editor").Encode(true)
    )
    </form>

    </text>)
    )


    @Html.Hidden("txtTheme1", Session["theme"].ToString())
    @(Html.Kendo().MobileLayout()
    .Name("mobile-tabstrip")
    .Header(obj => NavBarTemplate(this))
    )

    @helper NavBarTemplate(WebViewPage page)
    {
    @(Html.Kendo().MobileNavBar()
    .Content(navbar =>
    @<text>
                   
         @(Html.Kendo().MobileButton()
    .Align(MobileButtonAlign.Right)
    .HtmlAttributes(new { @class = "save"})
    .Events(events => events.Click("onClick"))
    .Text(""))
    </text>)
    )
    }

     

    function onClick(e) {

    var $form = $("#frmAdressNotes");
    $form.find("[data-role=editor]").each(function () {
    var editor = $(this).data("kendoEditor");
    // ... append a hidden input that holds the editor value
    $("<input type='hidden' />")
    .attr("name", editor.element.attr("id"))
    .val(editor.value())
    .appendTo(form);
    });
          
            var dataPost = $form.serialize();

    $.ajax({
    url: "@Url.Action("SubmitMobileNotes", "AdressDetail")",
    type: 'POST',
    strNotes: dataPost,
    cache: false,
    aysnc:false,
    success: function (data) {
    if (data == "Error") {
    alert(data);
    } else {
                        
                        window.location.href = data;
    }
    }
    });

    }

     

    if i write the code in form submit Event it Posts correctly. But i Need a Ajax call .Here is my Controller method

    public void SubmitMobileNotes(ControlsContext notemodel, FormCollection formCollection)
    {

    string keyvalue = formCollection["editor"];

     

    keyvalue is always null

     

    Thanks

     

    Anamika

  2. Joana
    Admin
    Joana avatar
    134 posts

    Posted 02 Nov Link to this post

    Hi Anamika,

    At first sight, the code you have provided seems correct. Is the value of the editor retrieved by the onClick function? Have a look at this forum thread where similar topic is discussed: https://www.telerik.com/forums/how-to-pass-content-of-the-editor-to-controller. You could send us a sample runnable project for examination in order to provide more useful information.

    Regards,
    Joana
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 02 Nov in reply to Joana Link to this post

    Hello Joana,

    Looks like Editor is undefined in onclick Event. If i try $("#editor").data("kendoEditor").value() in alert it is undefined.

    But if i call form submit the value gets posted correctly which unfortunately i cannot. I Need ajay call

     

    Anamika

  4. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 02 Nov in reply to Anamika Link to this post

    i have posted a sample Project in Support ticket
  5. Joana
    Admin
    Joana avatar
    134 posts

    Posted 03 Nov Link to this post

    Hi,

    The issue most probably stems from selectors of the editor or form elements. Let's keep the discussion in the support thread.

    Regards,
    Joana
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top