Action Url 中无法访问变量 - kendo 下拉列表答案

【问题标题】：Variables are not accessible inside Action Url - kendo dropdownAction Url 中无法访问变量 - kendo 下拉列表
【发布时间】：2023-02-15 21:48:23
【问题描述】：

我在 asp.net mvc 中的 script 标签内有一个 Kendo Html.Kendo().ComboBox()。

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%" }))'

在这个输入控件之外，我有两个变量unitCodeType 和minAccValue，我无法在给定代码的Action() 中访问它们。他们显示错误。请检查下面的屏幕截图

我怎样才能解决这个问题？

【问题讨论】：

标签： asp.net-mvc kendo-ui

【解决方案1】：

您可以将服务器端变量传递给 HtmlHelper 的 Action() 方法。 Html 帮助程序在服务器上进行评估，即基于流畅的配置，创建并输出初始化脚本以及用于组件初始化的元素。因此，当评估 Html Helper 时，您尝试传递的 JavaScript 变量在上下文中不可用。

您有两个选择——使用服务器端变量或使用 JS 初始化 ComboBox：

@{
  var someParam = 3;
}

<label for="products">HtmlHelper:</label>
@(Html.Kendo().ComboBox()
    .Name("products")
    .DataTextField("ProductName")
    .DataValueField("ProductID")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("RemoteDataSource_GetProducts", "DropDownList",new { myParam = @someParam});
        });
    })
    .HtmlAttributes(new { style = "width: 200px;" })
)

<label for="products">JS initialization:</label>
<input id="products_js" style="width:200px;"/>

<script>
var someOtherParam = "test";
 $("#products_js").kendoComboBox({
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                    data:{
                        myOtherParam:someOtherParam
                    }
                }
            }
        }
    });

如果您检查此 example 中的网络选项卡，您将看到传递给读取端点的不同参数。

【讨论】：