如何从DropDownList选择中获取Selected ID从View更改为Controller

时间:2017-08-04 16:45:23

标签: c# asp.net asp.net-mvc

我的视图中有一个DropDownList,我希望从DropDownList中捕获所选值的ID,并将该值作为参数传递给我的一个Controller操作方法。

@Html.DropDownList("ddlL", new SelectList(string.Empty, "Value", "Text"), "Select")
<script type="text/javascript">
    $("#ddlL").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("LoadLDet")',
                    datatype: 'JSON',
                    success: function (data) {
                        $("#ddlL").append('<option value=' + '0' + '>' + 'Select' + '</option>');

                        $.each(data, function (key, value) {

                            $("#ddlL").append('<option value=' + value.LId + '>' + value.LName + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to display Data');
                    }
                });
$("#ddlL").change(function () {
                $("#ddlW").empty();
                var LID=$(this).val();
                alert(LID);
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetWTest")',
                    datatype: 'JSON',
                    data: { LocID: $("#ddlL").val() },
                    success: function (data) {

                    $("#ddlW").append('<option value=' + '0' + '>' + 'Select' + '</option>');

                    $.each(data, function (key, value) {
                        $("#ddlW").append('<option value=' + value.WinId + '>' + value.WinName + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to load Win data');
                }
            });
            return false;
        });
</script>

LoadLDet()的帮助下,我获取了所有数据并将其绑定在DropDownList ddlL 中。然后将 LocID DropDownList ddlL 的更改事件功能传递到JsonResult GetWin()以绑定第二个DropDownList ddlW

[HttpPost]
    public JsonResult LoadLDet()
    {
        MyService.ServiceInfoClient Service = new MyService.ServiceInfoClient();
        var Loc = Service.GetLocList();
        return Json(Loc);
    }

public JsonResult GetWin(string LocID)
        {
            MyService.ServiceInfoClient Obj = new MyService.ServiceInfoClient();
            IEnumerable<MyService.Win> Win = Obj.GetWinByLocId(Convert.ToInt32(LocID));
            return Json(Win);
        }

我还有另一个ActionResult ExportDataInExcel()课程,其中我想将选定的DropDownList LId WId 作为参数传递给其中一个方法我打电话来获取需要导出的数据。请指导我如何将&#34; LId&#34; 从视图传递到我在Ajax中捕获的控制器,我如何通过 WId 即第二个{从视图到下面提到的操作方法的ID {1}}。

DropDownList

2 个答案:

答案 0 :(得分:0)

这可以帮助

$("#ddlL").on('change', function() {
        var id =$(this).val(); // here's your value
        alert(id); // show your value
        // do your ajax call here
    });

答案 1 :(得分:0)

看看这段代码。我使用data列出了我想要发送给服务器的所有参数。我修改了你的代码。我使用getJSON方法从服务器获取JSON。这有点简单。

<script type="text/javascript">
    $("#ddlL").empty();

    // Get data from LoadLDet action.
    $.getJSON('@Url.Action("LoadLDet")', function(data) {
        $("#ddlL").append('<option value="0">Select</option>');

        $.each(data, function (key, value) {
            $("#ddlL").append('<option value=' + value.LId + '>' + value.LName + '</option>');
        });
    });

    // Send data to ExportDataInExcel action.
    $("#ddlL").on('change', function() {
        var lId = $(this).val();
        var wId = $("#otherDropdownId").val();

        $.ajax({
            type: 'POST',
            url: '@Url.Action("ExportDataInExcel")',
            datatype: 'json',
            data: {
                LId: lId, // FIRST DROPDOWN VALUE
                WId: wId  // SECOND DROPDOWN VALUE
            },
            success: function (data) {
                alert("Data successfuly sent.");
            },
            error: function () {
                alert("Error occured while sending the data.");
            }
        });
    });
</script>

您接收参数的操作。

public ActionResult ExportDataInExcel(int LId, int WId)
{
    ExportData(LId, WId, xyz);
    return View("Index");
}