how to cascade drop down within a webgrid in asp.net MVC razor

See more:

ASP.NET

MVC

Hi,

I am facing issue with cascading dropdown list inside a webgrid.
Here is the scenario.
i have two drop down lists, one for table name and one for column names. My cascading has to work in such a way that the after table is selected the columns related to that table should only reflect in the next drop down. Also then i choose a tableName based on some primaryKey , Foreign Key relation the columns should be selected from a method which creates an object of entity data model in a method which inturn returns a Json Object containing the column names
I intend to do it with a JQuery in my view but as i'm new to coding i'm stuck :( ... can someone please advice on what is going wrong with my code.

My View is as Follow"

<div id="grid">
        @wg.GetHtml(
        tableStyle: "gridTable",
        headerStyle: "gridHead",
                rowStyle: "gridRow",
        footerStyle: "gridFooter",
                alternatingRowStyle: "gridAltRow",
        columns: wg.Columns(
                             wg.Column("DestnColumn", "Destination Column"),
                                     wg.Column(header: "SourceTable", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceTables)),
                                     wg.Column(header: "ColumnNames",format: @item => Html.DropDownList("value",new SelectList(string.Empty,"input_field_id","input_field_name"),"Select Column")),
                                   // wg.Column(header: "SourceColumn", format: @item1 => Html.DropDownList("value1", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceColumnsNames)),
                                             wg.Column("DataSize", "Size"),
                                     wg.Column("DataType", "Data Type"))

    )
        )
    </div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#SourceTable").change(function () {
            $("#ColumnNames").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetColumn")',
                dataType: 'json',
                data: { id: $("#SourceTable").val() },
                success: function (SourceColumn) {
                    $.each(SourceColumn, function (i, Colmn) {
                        $("#ColumnNames").append('<option value="' + SourceColumn.Value + '">' +
                        SourceColumn.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve columns.' + ex);
                }
            });
            return false;
        })
    });

</script>

my controller is as follow:

public JsonResult GetColumn(string TableName)
{
    List<string> ColName = new List<string>();
     int id = (from m in db.inputs where m.input_name == TableName select m).Max(p => p.input_id);
    input_field Ifield = new input_field();
    var str = (from m in db.input_field where m.input_id == id select new { m.input_field_name, m.input_field_id }).ToList();


    return Json(new SelectList(str, "input_field_id", "input_field_name"));
}

I am trying to populate value in second dropdown list .
Please help me out people

Thanks and regards
Archana Rajan