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.
Unfortunately, activation email could not send to your email. Please try again.

return selected item in dropdown list box

Thread ID:

Created:

Updated:

Platform:

Replies:

132546 Sep 7,2017 02:03 PM Sep 11,2017 08:36 AM ASP.NET Core 3
loading
Tags: Grid
Edmund Herbert
Asked On September 7, 2017 02:03 PM

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

Prince Oliver [Syncfusion]
Replied On September 8, 2017 06:10 AM

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 


Edmund Herbert
Replied On September 8, 2017 07:42 AM

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On September 11, 2017 08:36 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;