Variables are not accessible inside Action Url - kendo dropdown - asp.net-mvc

Question

I have a Kendo Html.Kendo().ComboBox() inside script tag in asp.net mvc.
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%" }))'
Out side this input control I have two variables unitCodeType and minAccValue, which I am not able to access in Action() in the given code. They are showing error. Please check below screen shot
How can I fix this ?

Answer 1

You can pass server-side variables to the Action() method of the HtmlHelper. The Html helper is evaluated on the server i.e. based on the fluent configuration an initialization script is created and output along with an element used for the initialization of the component. So the JavaScript variable you are trying to pass is not available in the context when the Html Helper is evaluated.
You have two options - use server-side variables or initialize the ComboBox using JS:
#{
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
}
}
}
}
});
If you inspect the Network tab in this example you will see the different parameters passed to the read endpoint.