We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

return selected item in dropdown list box

Hi Guys,

How could I send a selected item in drop down list box back to a controller action using ajax in asp.net core 2 mvc application

In simple term i have drop down list box , i select item and i want selected item returned to controller action before form gets posted.

thanks in advance

Edmund Herbert

3 Replies

PO Prince Oliver Syncfusion Team September 8, 2017 10:10 AM UTC

Hi Edmund, 

Thank you for contacting Syncfusion forums. 

To send the selected value in the DropDownList to controller using AJAX post, you need to access the selected value using getSelectedValue method from control’s instance and append it to the data in the AJAX settings. Kindly refer to the following code snippet. 

<div class="frame"> 
    <div class="control"> 
        <ej-drop-down-list id="bikeList" datasource="ViewBag.datasource" watermark-text="Select a bike" > 
            <e-drop-down-list-fields id="empid" text="text" value="text" /> 
        </ej-drop-down-list> 
    </div> 
</div> 
<br /> 
<ej-button id="btn" text="Post value" click="onClick" /> 
<script> 
    function onClick() {  
        var ddlobj = $("#bikeList").data("ejDropDownList"); 
        $.ajax({ 
            url: '@Url.Action("PostValue")', 
            data: { 'SelectedValue': ddlobj.getSelectedValue() }, 
            type: "post", 
            cache: false, 
            success: function () { 
            }, 
            error: function () { 
            } 
        }); 
    } 
</script> 

 Now you can get the SelectedValue from the HttpContext Form in the controller. Kindly refer to the following code snippet.  

[HttpPost] 
public void PostValue() 
{ 
    var SelectedValue = HttpContext.Request.Form["SelectedValue"].ToString(); 
} 

We have prepared a sample for your reference, please find the sample from the following link: http://www.syncfusion.com/downloads/support/forum/132546/ze/DDLcoreAjax-264626978 

Regards, 
Prince 



EH Edmund Herbert September 8, 2017 11:42 AM UTC

Hi thanks for quick response the example I need is in asp.net core2 mvc application I am using a grid one of the fields is a dropdownlist box what I need is to be able to send selected item in listbox using ajax back to controller, in other words when selection is made on grids dropdown list box I want to send selection back to controller, sorry if I was not very clear.


Thanks

Edmund Herbert



TS Thavasianand Sankaranarayanan Syncfusion Team September 11, 2017 12:36 PM UTC

Hi Edmund, 

According to your query, we suspect that you want to call an AJAX post when the dropdown list value get changed. In the actionComplete event of ejGrid control, We have render the ejDropDownList control in the Grid edit form. While changing the dropdown value you can get the selected value of ejDropDownList in the change event of ejDropDownList. 

For an example we have render the shipCountry column as a ejDropDownList column.  

Refer the below code example. 


<ej-grid id="Grid" datasource=ViewBag.datasource allow-paging="true"  
action-complete="complete" > 
     
    --- 
 
    <e-columns> 
         
       --- 
 
   </e-columns> 
</ej-grid> 

<script type="text/javascript"> 
    function complete(args) { 
         
        if (args.requestType == "beginedit" )  
             
           $("#"+this._id+"ShipCountry").ejDropDownList({dataSource:data,width:"100%",change:"change"}); 
         
    } 
     
    function change(args){ 
 
         var value = args.value; // get the selected value from dropdown list change event 
         $.ajax({  
            url: '@Url.Action("PostValue")',  
            data: { 'SelectedValue': value},  
            type: "post",  
            cache: false,  
            success: function () {  
            },  
            error: function () {  
            }  
        });  
 
 
    } 
</script> 



Refer the help documentation. 




Please let us know if you need further assistance on this.  

Regards, 
Thavasianand S. 


Loader.
Up arrow icon