Drop down list value is null when changed in javascript

Question

Hi i have this DDL in my html code as you can see :

<select class="form-control" name="RoleId" id="RoleId">
                                                <option value="1">User</option>
                                                <option value="2">Admin</option>
                                                <option value="3">Security</option>

                                        </select>

I call my json action contoller with this code :

<script type="text/javascript">
    $(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#RoleId").change(function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetRolePolicy", "RolePolicy", new { area= "Admin" })',
                dataType: 'json',
                data: { RoleName: $("#RoleId").val() },
                success: function (data) {


                    var cusid_ele = document.getElementsByClassName('toggle');

I need the value of selected item in combobox but this line of code

{ RoleName: $("#RoleId").val() },

Return null to my action in controller .why ?

                    public JsonResult GetRolePolicy(string RoleId)
        {
            int RoleIdConverted = int.Parse(RoleId);
            RolePolicy _RolePolocy = new RolePolicy();
}  

Answer 1

You're sending a parameter called RoleName :

data: { RoleName: $("#RoleId").val() }

But expecting a parameter called RoleId :

public JsonResult GetRolePolicy(string RoleId)

The parameter names need to match. Rename one of them.

Answer 2

您的操作参数名称应为RoleName

public JsonResult GetRolePolicy(string RoleName)