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

Binding Problem

1 Answer 48 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Stefania
Top achievements
Rank 2
Stefania asked on 30 Nov 2020, 09:38 AM

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;

            etc..

            return View();
        }

 

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

 

Thank you

1 Answer, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 02 Dec 2020, 03:28 PM

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

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/.

Tags
TabStrip
Asked by
Stefania
Top achievements
Rank 2
Answers by
Aleksandar
Telerik team
Share this question
or