Post form data

[Josiah]

How can we POST form data from a step?

I just see GET with all forms data.

[Petar]

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

[Rick]

Petar;

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

[Alexander]

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]

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="[phone]" 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 "[phone]" (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]

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>

• If the wizard is initialized as a div element. Each form behaves like a normal form. Therefore you can submit them with a provided .ButtonsTemplate() configuration option and a submit handler. For instance:

 .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) 
        {
        //...
        }