在同一个视图中根据下拉选择MVC C# 将列表返回到表格形式

Question

My List that should return a table based on what the ID in the dropdown selected was.

Controller:

    public List<tblResults> GetResult(int Id)
    {            
            var v = (from a in entities.tblResults
                     where
                     a.result_id == Id
                     select a);
            return v.ToList();                      
    }

My view that is the issue currently.

      @if (ViewBag.Result != null)
      {
          @Html.DropDownListFor(m => m.maindropdown, new SelectList(ViewBag.ResultGroup, "id", "mainvalues"), "Please Select", new { @class = "form-control", @id = "dropdown" })


                        }
                        <div id="showorhide"> 
                      <table class="table table-striped" style="width:85%" align="center"> 
                         <tr>                            
                            @foreach (var item in ViewBag.GetResult)
                            {
                        <td>
                            @Html.DisplayFor(modelItem => item.result_id)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.name)
                        </td>
                        </tr></table>
                            }
                    </div>

JS code that trigger the table:

    $("#dropdown").change(function () {            
        if ($(this).val() == "Please Select") {
            $("#showorhide").hide();
        }
        else {
            var selectedValue = this.value;
            $.get('@Url.Action("GetResult", "Home")', { id: selectedValue }, function (result) {
                if (result) {
                    $("#showorhide").html(result);
                }
            });
        } 

Answer 1

You send your ajax request to GetProduct but your action is GetResult so you send your data wrong place. I tidy up your code little bit. Your data is not coming because ViewBag.GetResult is empty and you try to append json result as html. So you need to get result and append as table element every result item. And make sure your GetResult returning some values.

view:

@if (ViewBag.Result != null)
{
    @Html.DropDownListFor(m => m.maindropdown, new SelectList(ViewBag.ResultGroup, "id", "mainvalues"), "Please Select", new{ @class = "form-control", @id = "dropdown" })
}
<div id="showorhide">
    <table class="table table-striped" style="width:85%" align="center" id="resultTable">
        @foreach (var item in ViewBag.GetResult)
        {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.result_id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.name)
            </td>
        </tr>
        }
    </table>
</div>

js:

$("#dropdown").change(function () {
    if ($(this).val() == "Please Select") {
        $("#showorhide").hide();
    }
    else {
        var selectedValue = this.value;
        $.get('@Url.Action("GetResult", "Home")', { id: selectedValue }, function (result) {
            if (result) {
                for (let index = 0; index < result.length; index++) {
                    const e = result[index];
                    $("#resultTable").append("<tr><td>" + e.result_id + "</td><td>" + e.name + "</td></tr>");
                }
            }
        });
    }
});