This is a migrated thread and some comments may be shown as answers.

Post form data

1 Answer 39 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Josiah
Top achievements
Rank 1
Veteran
Josiah asked on 13 Oct 2020, 12:30 PM

How can we POST form data from a step?

I just see GET with all forms data.

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 16 Oct 2020, 10:12 AM

Hi Josiah,

As the current thread is a duplicate of a support ticket that I've already answered you, I will close it. 

If you have additional questions, let's keep the communication focused and continue it in the support ticket.  

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Rick
Top achievements
Rank 1
commented on 22 Oct 2021, 01:26 AM

Petar;

If you already answered this in another ticket, can you provide a link to the answer? Thanks.

Alexander
Telerik team
commented on 25 Oct 2021, 02:30 PM

Rick, if what you want to do is, for example, if there are three steps in the Wizard, after the first step is ready and the user clicks the "Next" button, then you want to submit the data from step one.

For the first step in the form, there is the following definition.

.Buttons(b =>
{
    b.Next().Click("onFirstStepComplete");
});

With the above, once the "Next" button is clicked, the below function is executed.

function onFirstStepComplete(e) {
    console.log("First Step submitted");
    console.log($("#wizard").data("kendoWizard").steps()[0].form._model.AccountDetails);
}

With the code in green, we receive the data entered on the first step of the form. Once you have this data, you can create an AJAX call and submit the data inside the onFirstStepComplete function. This is how the targeted functionality can be implemented in the Wizard component. 
Rick
Top achievements
Rank 1
commented on 01 Nov 2021, 05:57 PM

Thank you. Your example works as described. I am using asp.net core 5.

If the model is as such: 

vendor.VendorName, vendor.VendorPhone;   

vendor.VendorName="Faucet King" is on step[0] and vendor.VendorPhone="(111) 555-1212" is on step[1] on a page that loads and the user then edits the record.

Problem For an edited existing record:

I noticed each wizard step has a different copy of the model.

For example: step[0].form._model.VendorName   shows "Faucet King" and step[1].form._model.VendorName shows null;

After editing the form and changing Step 1 Vendor Name field to  "Faucet Queen" from "Faucet King"  and then going to Step 2

step[0].form._model.VendorName is "Faucet Queen" (GOOD) and step[1].form._model.VendorName is null.

step[1].form._model.VendorPhone shows "(111) 555-1212" (GOOD). and step[0].form_model.VendorPhone shows null;  (not edited, but I was hoping to see the phone number from the previous step.)

At the Final Step, I am trying to display a summary of original data and data changed like so, assuming

 Field                            Original Data            Modified Data

  Vendor Name:          "Faucet King"            "Faucet Queen"

Is there a Telerik/kendo way of getting the final model?  I am writing out the original model based on the passed in .net core model i.e., @vendorsVM.VendorName on the final tab of the wizard. but the changed data from the javascript object is much more challenging to write out if there are many fields on the form because I have to grab the form model from each step.

Thank you in advance. 

 

Alexander
Telerik team
commented on 04 Nov 2021, 07:54 AM

Hi Rick,

Thank you for the additional information provided.

In general, each form defined in the wizard stands as a separate form component. You can get the final model in the last step depending on the .Tag() configuration you have:

  • If the wizard is initialized as a form element. You can get the final model through the done event which is fired when clicking the Done button on the last step. For instance:
.Events(e=>e.Done("onDoneHandler"))
<script>
    function onDoneHandler(e) {
       //get final model
    }
</script>
 .Form(form =>
  {
      //additional configuration
       form.ButtonsTemplate("<input type=\"submit\" />");
       form.Events(ev => ev.Submit("onSubmit"));
  });
<script>
        function onSubmit(event){
            event.preventDefault();
            //handle data submission
        }
</script>

That said, to submit the entire Model used in the Wizard you can use the .Tag("form") configuration. If we take for example the Wizard's Overview Demo, you can submit the entire UserDetailsModel, containing the information from the three steps by setting the action and method via the .HtmlAttributes configuration:

@(Html.Kendo().Wizard()
        .Name("wizard")
        //.Events(ev => ev.Done("onDone")) //no need to add an event handler
        .Tag("form")
        .HtmlAttributes(new { @novalidate ="", method="post",action=Url.Action("WizardSubmit","Wizard") })
//...Steps configuration
)

Controller:

        [HttpPost]
        public ActionResult WizardSubmit(UserDetailsModel model) 
        {
        //...
        }

 

Tags
Wizard
Asked by
Josiah
Top achievements
Rank 1
Veteran
Answers by
Petar
Telerik team
Share this question
or