1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Post selected value from dropdown tree to controller

Post selected value from dropdown tree to controller

Hello,

I have a form with several input fields, including a field that is selected by the user via the syncfusion Dropdown tree control. All the fields in the form should be bound to my viewmodel to POST to the controller. How can I map a field from my model in the  syncfusion Dropdown tree control so that the controller uses the selected value in the POST method ?

For example, with asp.net there is a tag helper "asp-for="field"" where field is a property of the model. Is there something equivalent in the  syncfusion Dropdown tree control ?



5 Replies 1 reply marked as answer
SS Sharon Sanchez Selvaraj Syncfusion Team July 14, 2021 01:50 PM UTC

Hi Loic, 
 
Greetings from Syncfusion Support. 
 
We have checked with your reported query to pass the selected data from the DropDown Tree to the Controller. This can be achieved by using select event through AJAX.  
 
Refer to the code snippet: 
 
Index.cshtml 
 
<ejs-dropdowntree id="treedata" placeholder="Select a Item" enabled="true" popupHeight="200px" changeOnBlur="false" select="select"> 
        <e-dropdowntree-fields dataSource="ViewBag.dataSource" child="ViewBag.child" value="nodeId" text="nodeText" selected="selected"></e-dropdowntree-fields> 
    </ejs-dropdowntree> 
 
function select(args) { 
        var ajax = new ej.base.Ajax({ 
            url: 'Home/SelectedValue', 
            type: 'POST', 
            contentType: 'application/json; charset=utf-8', 
            data: JSON.stringify([args.itemData]), 
            successHandler: function (data) { 
                console.log('Returned data: ' + JSON.parse(data).result[0].text); 
            } 
        }); 
        ajax.send(); 
    } 
 
 
HomeController.cs 
 
public IActionResult SelectedValue([FromBody] List<object> data) 
        { 
            return Json(new { result = data }); 
        } 
 
 
Refer to the sample attached for your reference. 
 
 
Refer to the below links to know more about DropDown Tree component. 
 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


LR Loic Roger replied to Sharon Sanchez Selvaraj July 15, 2021 11:00 PM UTC

Hi Sharon,

thanks for the feedback. What I am trying to accomplish is a little bit different than when you suggested above.

I am building a form and within this form there are several input fields that the user must provide. My view is a strongly typed view. One of the input field should be selected via Syncfusion's Dropdowntree control. I want the values of all user selections to be posted back to the controller when the user submit the form, without using AJAX or any additional javascript. 

For example, in the code below, I have mapped the model field "TrainingName" using ASP tag helper  asp-for="TrainingName" in the SELECT input so that when the user submit the form, the value selected is applied to the property "TrainingName" of the object "ReportVM". 

What do I need to modify in my definition of the  Syncfusion's Dropdowntree control so that the value of the selection is applied to the field "EmployeeId" ( property of the object "ReportVM") ? Browsing through the  Syncfusion's documentation it looks like I may be able to use the  DropdowntreeFor control but I could not find a clear example on how to use it.

Thank you.

below is the code for my view ("report.cshtml"):


@model ITSecReporting.Models.ViewModels.ReportVM;


@{

    ViewData["Title"] = "Report";

}



<div class="row">

    <div class="col-12">

        <div class="card">

            <div class="card-header">

                <h5 class="card-title">Report</h5>

            </div>

            <div class="card-body col-6">

                <form asp-action="Report">

                    <div class="mb-3">

                        <label class="form-label">Training Name</label>

                        <select asp-for="TrainingName" class="form-select">

                            <option value="Phishing">Phishing</option>

                        </select>

                    </div>

                    <div class="mb-3">

                        <label class="form-label">Employee Name</label>

                        <ejs-dropdowntree id="dropdowntreefor" placeholder="Select an employee">

                            <e-dropdowntree-fields dataSource="ViewBag.dataSource" value="Id" parentValue="Pid" hasChildren="HasChild" text="Name"></e-dropdowntree-fields>

                        </ejs-dropdowntree>

                    </div>

                    <div class="mb-3">

                        <label class="form-label">Report Type</label>

                        <select asp-for="ReportType" class="form-select">

                            <option value="Partial">Partial</option>

                            <option value="Full">Full</option>

                        </select>

                    </div>

                    <div class="mb-5 text-center">

                        <ejs-progressbutton id="slideright" type="submit" content="Generate" enableProgress="false" spinSettings="ViewBag.spinCenter" animationSettings="ViewBag.slideRight"

                                            isPrimary="true"></ejs-progressbutton>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>




SS Sharon Sanchez Selvaraj Syncfusion Team July 16, 2021 01:56 PM UTC

Hi Loic, 
 
Sorry for the inconvenience. 
 
We checked with your requirement and this can be achieved by specifying ejs-for in DropDownTree component. 
 
Refer to the below code snippet: 
 
  <ejs-dropdowntree id="treedata" placeholder="Select a Item" ejs-for="@Model.TrainingName" enabled="true" popupHeight="200px" changeOnBlur="false"> 
                                    <e-dropdowntree-fields dataSource="ViewBag.dataSource" child="ViewBag.child" value="nodeId" text="nodeText"></e-dropdowntree-fields> 
                                </ejs-dropdowntree> 
 
Refer to the below screenshot where the id is obtained through postback: 
 
 
 
Refer to the sample: 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


Marked as answer
LR Loic Roger July 19, 2021 09:30 PM UTC

Thank you very much for your help.

Your answer resolved my issue.

Thanks.


KR Keerthana Rajendran Syncfusion Team July 20, 2021 06:16 AM UTC

Hi Loic, 
 
Most Welcome. We are glad to hear that the provided suggestion helped you to resolve the issue. Please get back to us know if you need further assistance. 
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon