Binding Problem

[Mattia]

Hi,

How can I bind a model to grids, combo, textarea etc into my tabStrip and get my model populated back on button press?

This is my Index.cshtml

@model RestRequestModel

<form method="post" asp-action="Index">
    <div style="margin-bottom:5px;">
        <button id="invokeBtn" class="k-button k-primary" name="invoke" value="Invoke">Invoke</button>
    </div>
    <div style="margin-bottom:5px;">
        <h3>Request</h3>
        <select asp-for="Method" style = "width:18%;"
                asp-items="@new SelectList(Enum.GetNames(typeof(RestSharp.Method)))"></select>


        <input type="text" placeholder="Type URL here ..." style="width:80%; margin-left:10px;" asp-for="Url"
               value='@Model?.Url' />
    </div>

    <div class="k-content">
        @(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Animation(animation =>
                    animation.Open(effect =>
                  effect.Fade(FadeDirection.In)))
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Url Segments")
                  .Selected(true)
                  .Content(@<text>
                    @(Html.Kendo().Grid(Model.UrlSegmentParameters)

                                .Name("UrlSegmentsGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(p => p.Name).Title("Key");
                                    columns.Bound(p => p.Value).Title("Value");
                                    columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(172).HtmlAttributes(new { style = "vertical-align:top;" });
                                })
                                .ToolBar(toolbar => toolbar.Create().Text("New"))
                                .Pageable()
                                .Sortable()
                                .Editable(editable => editable.Mode(GridEditMode.InLine))
                                .Scrollable(scr => scr.Height(430))
                                .Filterable()
                                .DataSource(dataSource => dataSource
                                    .WebApi()
                                    .PageSize(20)
                                    .Events(events => events.Error("error_handler"))
                                    .Model(model =>
                                    {
                                        model.Id(p => p.Name);
                                    })
                               //.ServerOperation(false)
                               //.Read(read => read.Action("GetUrlSegments", "RestClient", Model))
                               //.Destroy(update => update.Action("UrlSegments_Destroy", "RestClient"))
                               )
                    )
                  </text>);

              tabstrip.Add().Text("Authorizations")
                  .Content(@<text>

                       <div style="margin-bottom:5px;">
                                    <h5>Authentication Mode</h5>

                                    @(Html.Kendo().ComboBox()
                            .Name("authenticationModeCombo")
                            .HtmlAttributes(new { style = "width:100%;" })
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .DataSource(dataSource =>
                            dataSource.Read(read => read.Action("GetAuthMode", "RestClient")))
                            .Events(events => events.Change("authenticationModeChanged"))
                            .SelectedIndex(0)
                            )
                        </div>
            <hr />
                        <div id="httpBasicAuthPanel" style="display:none;">
                             <table width="100%">
                                 <tr>
                                     <td style="width:20%">Username</td>
                                     <td><input type="text" asp-for="BasicAuthAuthModel.Username" name="usernameTxt" style="width:100%;"/></td>
                                 </tr>
                                 <tr>
                                     <td style="width:20%">Password</td>
                                     <td><input type="password" name="passwordTxt" asp-for="BasicAuthAuthModel.Password" style="width:100%"/></td>
                                 </tr>
                             </table>
                        </div>

                         <div id="Oaauth2Panel" style="display:none;" >
                             <table width="100%">
                                 <tr>
                                     <td style="width:20%">Authentication endpoint</td>
                                     <td><input type="text" name="authEndpointTxt" asp-for="MSAzureOAUTH2AuthModel.AuthenticationAuthorityUrl"  style="width:100%"/></td>
                                 </tr>
                                 <tr>
                                     <td style="width:20%">Client Id</td>
                                     <td><input type="text" name="clientIdTxt" asp-for="MSAzureOAUTH2AuthModel.ClientId"  style="width:100%"/></td>
                                 </tr>
                                 <tr>
                                     <td style="width:20%">Client Secret</td>
                                     <td><input type="text" name="clientSecretTxt" asp-for="MSAzureOAUTH2AuthModel.ClientSecret" style="width:100%"/></td>
                                 </tr>
                             </table>
                        </div>
                  </text>);
          })
    )


    </div>

</form>
<script>
    $(document).ready(function () {
        $("#invokeBtn").kendoButton();
    });

    //error handler dei grid
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    //Mostro/nascondo i div nel tab Authorizations
    function authenticationModeChanged() {

        var value = this.value();

        if (value == 1) {
            document.getElementById("httpBasicAuthPanel")
                .style.display = "block";

            document.getElementById("Oaauth2Panel")
                .style.display = "none";
        }
        else if (value == 2) {
            document.getElementById("httpBasicAuthPanel")
                .style.display = "none";

            document.getElementById("Oaauth2Panel")
                .style.display = "block";
        }
    }

</script>

 

This is my Controller

public IActionResult Index()
        {
            ViewData["authTypesData"] = GetRequestType();
            return View(new RestRequestModel
            {
                HeaderParameters = new List<RestParameter>(),
                UrlSegmentParameters = new List<RestParameter>(),
                QueryParameters = new List<RestParameter>(),
                BasicAuthAuthModel = new BasicAuthAuthenticationModel(),
                MSAzureOAUTH2AuthModel = new MSAzureOAUTH2AuthenticationModel()
            });
        }
[HttpPost]
        public IActionResult Index(RestRequestModel model)
        {
            var url = model.Url;
            return View();
        }

 

model.Url and Method are populated on postback but anything else is null

 

Thank you

[Aleksandar]

Hi Stefania,

If I understand correctly you are using the TabStrip to create a Wizard-like experience, am I correct? If that is the case I can suggest reviewing the Telerik UI for ASP.NET Core Wizard component. The Wizard displays its content in sequential order where each step can be a form, for example. Make sure to review the Wizard Demos as well.

If you decide to continue with the TabStrip approach I can suggest reviewing this blog post for guidance:

https://www.telerik.com/blogs/step-wise-forms-with-asp-net-mvc-and-kendo-ui

If I understand the issue correctly, you would like to pass the complete Grid data on form submission. Note that if that is the case you will need to serialize the Grid data and handle the form submission to pass the complete data. Check this SO thread for details.

I hope this helps.

Regards,
Aleksandar
Progress Telerik