ASP.NET MVC中如何根据下拉选择为ActionLink传递ID参数

核心问题原因 #

@Url.Action是服务器端生成的静态URL，页面加载后就固定了，无法直接绑定客户端动态选择的ProductID，必须通过JavaScript在客户端处理动态参数。

方案一：选择产品时实时更新链接地址 #

修改脚本，在选择产品时同步更新"Check Stock"链接的href属性：

视图代码（保留原结构，仅调整链接初始值）

<div class="form-group">
<label class="lbl3">Product:</label><span class="required">&nbsp;*</span><label class="ddl1">@Html.DropDownListFor(model => model.ProductID, ViewBag.ProductID as SelectList, "--Select a Product--", new { @class = "form-control prod-ctl", @onChange = "selectedText(this)" })</label>
<input type="hidden" id="txt" name="poProduct" required />
<label class="lbl2">Qty Ordered:</label><span class="required">&nbsp;*</span><input type="text" inputmode="numeric" class="col-md-3 form-control qty-ctl" name="poQtyOrdered" id="poQtyOrdered" required />
<label class="chk-link"><a class='prod-modal chk-stock' href="@Url.Action("AmtInStock", "Products", new { id = 0 })"><span class="fa solid fa-search">&nbsp;<u>Check Stock</u></span></a></label>
</div>

脚本修改

function selectedText(ddlitem) {
    var selvalue = ddlitem.value;
    var seltext = ddlitem.options[ddlitem.selectedIndex].innerHTML;
    $('#txt').val(selvalue);
    
    // 动态生成带ProductID的URL并更新链接
    var stockUrl = '@Url.Action("AmtInStock", "Products")' + '?id=' + selvalue;
    $('.chk-stock').attr('href', stockUrl);
}

方案二：点击链接时动态获取参数并跳转（推荐，带验证） #

无需实时更新链接，点击时获取选中的ProductID并增加未选择产品的验证：

视图代码（修改链接为空跳转）

<label class="chk-link"><a class='prod-modal chk-stock' href="javascript:void(0)"><span class="fa solid fa-search">&nbsp;<u>Check Stock</u></span></a></label>

脚本代码

// 页面加载完成后绑定点击事件
$(document).ready(function() {
    $('.chk-stock').click(function() {
        // 直接从下拉框获取选中值（可删除隐藏框简化代码）
        var productId = $('.prod-ctl').val();
        
        // 验证是否选择了产品
        if (!productId || productId === "") {
            alert("请先选择产品");
            return;
        }
        
        // 构建跳转URL并跳转
        var stockUrl = '@Url.Action("AmtInStock", "Products")' + '?id=' + productId;
        window.location.href = stockUrl;
    });
});

// 保留原selectedText函数（不需要隐藏框的话可直接删除）
function selectedText(ddlitem) {
    var selvalue = ddlitem.value;
    var seltext = ddlitem.options[ddlitem.selectedIndex].innerHTML;
    $('#txt').val(selvalue);
}

额外优化建议 #

• 可删除隐藏框#txt，直接通过下拉框.prod-ctl获取选中值，减少冗余DOM元素；
• 控制器的AmtInStock方法无需修改，已支持接收int? id参数。

内容的提问来源于stack exchange，提问作者Kip M.