1. Home
  2. Forum
  3. ASP.NET MVC
  4. dropdown selected value

dropdown selected value

hi ,

How to get dropdown selected value in controler.
Please kindly help me.


Thank you,
Vijayakumar.s

9 Replies
SJ Saravanan Janakiraman Syncfusion Team September 28, 2015 07:34 AM UTC

Hi Vijayakumar,

Thanks for using Syncfusion support.

In the controller page we can get the selected value of dropdown using the dropdownlist ID. We have prepared the sample to showcase your requirement.
Sample Location: Dropdownlist sample

If you want to know how to get started about our components, please find the below link.
http://help.syncfusion.com/js/overview
Also you can find all the samples of our components in the following link location.
http://js.syncfusion.com/demos/web/

Regards,
Saravanan A J

VI Vijaykumar September 30, 2015 09:41 AM UTC

hi,
Many thanks  Saravanan. Now i got selected value

SJ Saravanan Janakiraman Syncfusion Team October 1, 2015 11:08 AM UTC

Hi Vijaykumar,

Thanks for your update.

If you need further clarifications please get back to us we will be happy to assist you.

Regards,
Saravanan A J

MA Manolo May 17, 2016 02:04 PM UTC

Hi,

I don't know if I should open a new post for a similar doubt but...

In this example....how can I submit when dropdown value change instead submit button?

Thanks


PO Prince Oliver Syncfusion Team May 18, 2016 08:33 AM UTC

Hi Vijaykumar,   
  
Thanks for contacting Syncfusion support.   
  
Yes, you can reopen same Incident/Forum if you need follow-up, in case of new issue it would be better to open a new Incident/Forum.   
  
You can make use of client side change event to trigger a submit upon the dropdownlist value change.   
  
For more information, refer to the following link:   
  
We have modified the sample for your convenience, refer to the following link for the sample:   
  
Let us know if you have any further queries.   
  
Regards,   
Prince   


MA Manolo May 31, 2016 03:52 PM UTC

Thanks!

KR Keerthana Rajendran Syncfusion Team June 1, 2016 05:53 AM UTC

Hi Manolo, 
  
Thank you for your update. Please let us know if you require any further assistance on this. We will be  happy to assist you. 
  
Regards, 
Keerthana. 


YU Yudish replied to Keerthana Rajendran November 16, 2017 08:18 AM UTC

Hi Manolo, 
  
Thank you for your update. Please let us know if you require any further assistance on this. We will be  happy to assist you. 
  
Regards, 
Keerthana. 


Hi, i don't know if i should open the same post but i'm trying to do something similar.

I have a view named ClaimList and a partial view _ClaimListGrid.

In the view there is a dropdown populated by a stored procedure.

Once i select something from the drop down it should take the ID from the drop down and query from database and then populate the related result in the grid (from partial view) without refreshing the whole page. Just the data grid should be refresh.

Grid from partial view _ClaimsListGrid
<div>
    @(Html.EJ().Grid<object>("FlatGrid")

          .Datasource((System.Data.DataTable)ViewBag.dataSources)
          .Columns(col =>

          {

              col.Field("ItemDamaged").HeaderText("Item Damaged").TextAlign(TextAlign.Right).Width(75).Add();

              col.Field("Nature").HeaderText("Nature").Width(80).Add();

              col.Field("Value").HeaderText("Value").Width(100).Add();

              col.Field("AmountClaimed").HeaderText("Amount Claimed").Width(100).Add();

          })

          )
</div>

Code in view ClaimsList

    @Html.EJ().DropDownList("selectClaims").Datasource((IEnumerable<object>) ViewBag.datasourcex).DropDownListFields(df => df.ID("ClaimsId")
        .Text("ClaimsFile").Value("ClaimsFile")).WatermarkText("Switch Claim").Width("250px").ClientSideEvents(e => e.Change("click"))

@Html.Partial($"_ClaimsListGrid")

<script>
    function click() {
        var obj = $("#FlatGrid").data("ejGrid");

        $.ajax({
            url: '@Url.Action("DataSource", "Home")',
            type: "get"
        }).done(function (data) {
            obj.dataSource(data); 
        }).fail(function () {
            alert('error');
        });
    }
</script>


Controller

        public ActionResult ClaimsList()
        {
           
            const string req = "Select MAPD_N_ID,XXX_CH_IDFILE " +
                               "from dbo.MA_USERS_DETAILS with(nolock) " +
                               "where MAP_N_ID = 1 " +
                               "and APP_N_ID = 4 " +
                               "and isnull(XXX_CH_IDFILE,'') <> ''";

            var connectionCubage = new ConnectionCubage()
            {
                Base = Base,
                Password = Password,
                Serveur = Serveur,
                Id = Id
            };

            var leDataReader = connectionCubage.Requete(req);
            var claimsDetailses = new List<ClaimsDetails>();
            while (leDataReader.Read())
            {
                claimsDetailses.Add(new ClaimsDetails(leDataReader["MAPD_N_ID"].ToString(), leDataReader["XXX_CH_IDFILE"].ToString()));
            }
            ViewBag.datasourcex = claimsDetailses;
            return View();

        }

public JsonResult DataSource(string selectClaims)
        {
            //ViewBag.Value = selectClaims;

            var storedProcedured = new StoredProcedured()
            {
                Base = Base,
                Password = Password,
                Serveur = Serveur,
                Id = Id
            };
            string sp = "SP_ClaimsLists";
            var clientKey = selectClaims;
            object datasources = null;
            if (clientKey != null)
            {
                IDataParameter[] parametr =
                {
                    new SqlParameter("@ClientKey", SqlDbType.VarChar, 50) {Value = clientKey},
                    new SqlParameter("@language", SqlDbType.VarChar, 50) {Value = "en-US"}
                };
                var datasource = storedProcedured.RequeteDtStoredProcedure(sp, parametr);
                 datasources = ConvertDataTableToJson(datasource);
                return Json(datasources, JsonRequestBehavior.AllowGet);
            }

            return Json(datasources, JsonRequestBehavior.AllowGet);
        }

        private static object ConvertDataTableToJson(DataTable dt)
        {
            var jSonString = new JavaScriptSerializer();
            var rows = new List<Dictionary<string, object>>();
            Dictionary<string, object> row;
            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName, dr[col]);
                }
                rows.Add(row);
            }
            var serialize = jSonString.Serialize(rows);
            var data = jSonString.Deserialize<IEnumerable<object>>(serialize);
            return data;

        }

        public ActionResult _ClaimsListGrid()
        {
            return View();
        }

Can you please help.

Thank you


VA Venkatesh Ayothi Raman Syncfusion Team November 17, 2017 10:46 AM UTC

Hi Yudish, 

Thanks for using Syncfusion products. 

Based on your requirement we have prepared a sample for your convenience which can be download from following link, 

In this sample, we have rendered the Dropdown list in main view and rendered the Grid in partial view without bounding the data source. Now, if we change the Dropdown value, then we have passed to the corresponding selected id using change event and getSelectedItemsId API in Dropdown list. 

Please refer to the following code example, Help documentation and Screenshot for your reference, 
Code example: 
[Main View] 
 
<div class="control"> 
    @Html.EJ().DropDownList("EmployeeTable").ClientSideEvents(e=>e.Change("onChange")).Datasource((IEnumerable<object>)ViewBag.dropdown).DropDownListFields(df => df.ID("EmployeeID").Text("EmployeeID").Value("EmployeeID")).WatermarkText("Select a value").Width("100%") 
</div> 
 
@{Html.RenderPartial("_Grid");} 
 
<script> 
 
    function onChange(args) { 
        var data = JSON.stringify({ id: this.getSelectedItemsID()[0] }); 
        $.ajax({ 
            type: "POST", 
            url: "/Home/Data", 
            async: false, 
            dataType: "json", 
            data:data, 
            contentType: "application/json", 
            success: function (data) { 
                 
                var gridObj = $("#Grid").ejGrid("instance"); //create a grid instance 
                gridObj.dataSource(data); //bound the dynamic dataSource for Grid while changing the value from Dropdown 
 
            }, 
            error: function () { 
                alert('hi'); 
            }, 
        }); 
    } 
</script> 
 
[Partial view] 
<h1>Grid Partial</h1> 
@(Html.EJ().Grid<object>("Grid") 
        
                .AllowPaging() 
                 
            
        //columns not declared 
            .Columns(col => 
            { 
                . .  .  
            }) 
 
) 
 
@Html.EJ().ScriptManager() 

Note: In above code example, we have defined the scriptmanager for render the widgets in partialview if unobtrusive method is disabled       

Screenshot: 
 
                      
 
Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon