Kendo DropDownList始终将相同的值从视图传递到控制器

Question

Good morning/afternoon/evening and I apologize for the inconveniences.

I have the following kendo sub-grid that has a simple dropdown with options:

<script id="subgrid" type="text/kendo-tmpl">
@(Html.Kendo().Grid<AccrualProfileDetailsModel>()
.Name("grid_#=acrpr_id#")
.Columns(columns =>
{
    columns.Bound(c => c.acrpr_id).Hidden();
    columns.Bound(c => c.acp_id).Hidden();
    columns.Bound(c => c.pc_name).Title(Resource.PayCode);
    columns.ForeignKey(c => c.acr_function, StaticLists.GetAccrualCodeFunction(), "Value", "Description")
           .Title(Resource.Type);
    columns.Command(command =>
    {
        command.Edit().Text(" ").HtmlAttributes(new { title = Resource.Edit + " " + Resource.AccrualProfile }).UpdateText(" ").CancelText(" ");
    }).Width("10%");
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.ToolBar(t =>
{
    t.Template(
        @<text>
            <div style="display:inline">
                @(Resource.Select + " " + Resource.AccrualCode + "  "):
                @(Html.Kendo().DropDownList()
                          .Name("accrualProfileDetails_#=acrpr_id#")
                          .DataValueField("acp_id")
                          .DataTextField("acp_name")
                          .BindTo(AccrualCodes)
                          .Events(ev => ev.Change("function(args) {accrualProfileDetailsDrpDwnChange(args, 'grid_#=acrpr_id#');}"))
                          .ToClientTemplate()
                )
            </div>
        </text>);
})
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(10)
    .Model(model =>
    {
        model.Id(p => p.acrpr_id);
        model.Field(p => p.acr_function).Editable(true);
        model.Field(p => p.pc_name).Editable(false);
    })
.Read(read => read.Action("ReadAccrualProfilesDetails", "AccrualProfiles").Data("GetSubGridParams(#=acrpr_id#)"))
.Update(update => update.Action("UpdateAccrualProfileDetail", "AccrualProfiles"))
)
.Events(ev => ev.Save("function(e) {getDropDownListValue(e, #=acrpr_id#)}"))
.ToClientTemplate()
)

Every time that the value of the DropDownList changes, it will trigger a read event that refreshes the records present in the subgrid. The function that fires the read event is the following:

function accrualProfileDetailsDrpDwnChange(e, gridId) {
    var grid = $("#" + gridId).data("kendoGrid");
    grid.dataSource.read();
}

If you see this line:

.Read(read => read.Action("ReadAccrualProfilesDetails", "AccrualProfiles").Data("GetSubGridParams(#=acrpr_id#)"))

the READ event has attached a function that is called GetSubGridParams that, in theory, should do something like this:

function GetSubGridParams(acrpr_id) {
    var acp_id = $('#accrualProfileDetails_' + acrpr_id).data().kendoDropDownList.value();
    return {
        acrpr_id: acrpr_id,
        acp_id: acp_id
    };
}

It captures the id from the grid and the value of the DropDownList that will be passed to the controller as parameters.

The problem is that every time the value of the DropDownList changes, the value passed to the controller IS ALWAYS THE SAME, it doesn't matter which option you choose from the DropDownList. I was searching on the web and on the Telerik documentation but the proposed solutions are always the same, but those solutions are not working for me.

My problem is simple: I need to pass to the controller the selected value of the DropDownList, something that the GetSubGridParams function is not doing.

NOTE

I saw that it is better to make a DropDownListFor instead of a simple DropDownList and binding it to an attribute from the model, but, as you can see, I can't do that because the DropDownList is inside a template and the model will be not recognized. Or maybe I don't know how to do it to recognize the model inside that template, eventually... Also, I tried to pass the values using ajax but the values still the same...

Any help will be appreciated. Thanks in advance.

Answer 1

After several tests, I got this thing working. I made it work passing the data that was going from the View to the Controller via the "Change" event attached to the DropDownList, the accrualProfileDetailsDrpDwnChange function. After deleting the GetSubGridParams because it was not working as I was expecting, I edited that accrualProfileDetailsDrpDwnChange function as follows:

function accrualProfileDetailsDrpDwnChange(e, gridId, acrpr_id) {
    var grid = $("#" + gridId).data("kendoGrid");
    var acp_id = $('#accrualProfileDetails_' + acrpr_id).data().kendoDropDownList.value();
    var url = '@Url.Action("ReadAccrualProfilesDetails", "AccrualProfiles")' + "?acrpr_id=" + acrpr_id + "&acp_id=" + acp_id;
    grid.dataSource.transport.options.read.url = url;
    grid.dataSource.read();
}

The most important part is this:

var url = '@Url.Action("ReadAccrualProfilesDetails", "AccrualProfiles")' + "?acrpr_id=" + acrpr_id + "&acp_id=" + acp_id;
    grid.dataSource.transport.options.read.url = url;
    grid.dataSource.read();

After setting the URL to the grid the parameters acrpr_id and acp_id are correctly sent from the View to the Controller as I wanted :D and every time the "READ" event from the grid is fired, the content is correctly shown. That was my way to make it work.

Cheers.