Question

我目前在MVC项目的一个Razor视图中具有以下代码：<b>Item Code: </b>@Html.DropDownList("ItemID", (SelectList)ViewBag.Items)

我想稍后在Razor视图的@Ajax.ActionLink中访问下拉列表的值。有没有办法在视图中访问下拉列表的值？

Answer 1

使用JQuery获取当前选定的值-

$('#dropDownId').val();

Answer 2

如果您没有用于处理DOM元素的特殊库（如jQuery），则可以按照以下示例使用香草Javascript：

//get the element by its ID value    
var dropdownElement = document.getElementById("ddlItems");

// now we have a reference to the dropdown field, let's read the selected value (or text):    
// 1- selected value
var selectedValue = dropdownElement.options[dropdownElement.selectedIndex].value;

// 2- selected text
var selectedText = dropdownElement.options[dropdownElement.selectedIndex].text;

// display a popup with selected text and value
window.alert("selected value is: (" + selectedValue + "), and selected text is: (" + selectedText + ").");

<select id="ddlItems">
  <option value="1">1st item</option>
  <option value="2">2nd item</option>
  <option value="3" selected="selected">3rd item</option>
</select>

Answer 3

如果我正确理解了您的问题，则您正在尝试将DropDownList帮助程序中的选定值从视图传递到@Ajax.ActionLink帮助程序中，这是不可能的，因为@Ajax.ActionLink帮助程序已处理并渲染了服务器端，然后再发送到浏览器。

您可以改用不带@Html.ActionLink参数的routeValues帮助器，并设置该锚标记的id属性：

@Html.ActionLink("Get Item", "TargetAction", "TargetController", null, new { id = "link" })

然后使用通俗易懂的AJAX处理该链接的click事件，并从下拉菜单元素中传递所选值：

$('#link').click(function(e) {
    e.preventDefault();

    // get selected value from dropdownlist
    var selected = $('#ItemID').val();

    $.ajax({
        type: 'GET',
        url: this.href,
        data: { id: selected }, // action parameter with selected value
        cache: false, // disable caching
        success: function (result) {
            // do something to target DOM
        }
    });

    return false;
});

其他说明：

1）确保传递到data设置中的参数与链接的href属性所指向的目标控制器操作中的参数完全匹配。

public ActionResult TargetAction(int id)
{
    // do something 
}

2）您可以使用DropDownList的强类型版本，即DropDownListFor来绑定viewmodel属性。

@Html.DropDownListFor(model => model.ItemID, ViewBag.Items as SelectList, ...)

获取Html.DropDownList的值

3 个答案: