ASP.NET MVC中Kendo ComboBox的Action无法访问外部变量问题

问题本质 #

你在Razor语法的.Action()方法中直接引用了客户端JS变量unitCodeType和minAccValue，但Razor是服务器端渲染引擎，执行时无法识别客户端变量，因此会出现报错。

解决方案 #

方案一：客户端动态修改数据源参数（推荐，适用于纯客户端生成的变量） #

先通过Razor生成ComboBox的基础结构，再在客户端JS中修改数据源的读取参数：

<script>
// 客户端变量
var unitCodeType = "your-client-value";
var minAccValue = "your-client-value";

// 生成ComboBox的基础HTML（Razor部分不包含动态参数）
var comboBoxHtml = '@(Html.Kendo().ComboBox()
                    .Name(Html.NameFor(model => model.AttributeUnitValue).ToString())
                    .DataTextField("Description")
                    .DataValueField("CodeLovId")
                    .DataSource(datasource => datasource
                        .Read(read => read
                            .Action("GetCodesList", "LookupCode", new { area = "Core" })
                            .Type(HttpVerbs.Post)
                        )
                    ).HtmlAttributes(new { style = "width:50%" }))';

// 将HTML插入到目标容器
$("#your-container-id").html(comboBoxHtml);

// 获取ComboBox实例并修改数据源参数
var comboBox = $("#@Html.NameFor(model => model.AttributeUnitValue)").data("kendoComboBox");
comboBox.dataSource.transport.options.read.data = {
    codeType: unitCodeType,
    selectedValue: minAccValue
};

// 触发数据加载（如果需要）
comboBox.dataSource.read();
</script>

方案二：直接使用服务器端变量（适用于变量来自服务器的场景） #

如果unitCodeType和minAccValue本来就是服务器端的变量（比如来自Model、ViewBag），直接在Razor中引用即可：

@{
    // 服务器端变量示例
    string unitCodeType = ViewBag.UnitCodeType;
    string minAccValue = Model.MinAccValue;
}

<script>
var input = '@(Html.Kendo().ComboBox()
                    .Name(Html.NameFor(model => model.AttributeUnitValue).ToString())
                    .DataTextField("Description")
                    .DataValueField("CodeLovId")
                    .DataSource(datasource => datasource
                        .Read(read => read
                            .Action("GetCodesList", "LookupCode", new { area = "Core", codeType = unitCodeType, selectedValue = minAccValue })
                            .Type(HttpVerbs.Post)
                        )
                    ).HtmlAttributes(new { style = "width:50%" }))';
</script>

方案三：占位符替换（需注意转义问题） #

通过Razor生成带占位符的HTML，再用客户端变量替换占位符：

<script>
var unitCodeType = "your-client-value";
var minAccValue = "your-client-value";

// 生成带占位符的ComboBox HTML
var comboBoxTemplate = '@(Html.Kendo().ComboBox()
                    .Name(Html.NameFor(model => model.AttributeUnitValue).ToString())
                    .DataTextField("Description")
                    .DataValueField("CodeLovId")
                    .DataSource(datasource => datasource
                        .Read(read => read
                            .Action("GetCodesList", "LookupCode", new { area = "Core", codeType = "__CODE_TYPE__", selectedValue = "__SELECTED_VALUE__" })
                            .Type(HttpVerbs.Post)
                        )
                    ).HtmlAttributes(new { style = "width:50%" }))';

// 替换占位符
var input = comboBoxTemplate.replace("__CODE_TYPE__", unitCodeType).replace("__SELECTED_VALUE__", minAccValue);

// 插入到页面
$("#your-container-id").html(input);
</script>

注意：此方法如果变量包含引号、斜杠等特殊字符，可能会破坏HTML结构，需额外处理转义。

内容的提问来源于stack exchange，提问作者Arvind Chourasiya