asp.net 核心开始收集项目核心不适用于剑道控制

Question

. Answers to this question are eligible for a +100 reputation bounty. Hitesh Kansagara is looking for a :

BeginCollectionItem for asp.net core is not working with kendo control that is the main issue

I have used BeginCollectionItem in asp.net core. Inside this collection I have used kendo combobox and datepicker both data not bind with model list when post the data. anyone have idea about it.

Below is the code sample for cshtml file

@using HtmlHelpers.BeginCollectionItemCore
    @using DemoProject.Model
    @model BatchDetail
    
    
    <tr data-rownum="@Model.Seq">
        @using (Html.BeginCollectionItem("oBatchDetails"))
        {           
            <td>                
            @Html.EditorFor(model => model.CheckCardNo, new { htmlAttributes = new { @class = "form-control input-sm patientCheckCard clsAlphaNumericText", maxlength = "50", autocomplete = "off" } })
            </td>
            <td>
            @(Html.Kendo().DatePickerFor(model => model.CheckDate).Format("MM/dd/yyyy").HtmlAttributes(new { style = "width:115px", @class = "smalldtpicker paidDate", autocomplete = "off", @type = "" }))
          </td>            
        }
    </tr> 

When I see the $("#formid").serialize() in console. I found the below result.

oBatchDetails%5B25e11650-70cd-4d04-9fe0-4ce0e621cbfd%5D.CheckCardNo=123456789&
CheckDate=12%2F27%2F2021&

where check date should be oBatchDetails%5B25e11650-70cd-4d04-9fe0-4ce0e621cbfd%5D.CheckDate=12%2F27%2F2021&

but Begin collection item not handle this kendo datepicker.

Answer 1

I found the solution for kendo control. to resolve this issue need to call render function to work with kendo controls. Got the reference from https://www.telerik.com/forums/datepicker-error-with-core-5-0

below is the corrected code and it is workin fine with begin collection item core.

 @using HtmlHelpers.BeginCollectionItemCore
        @using DemoProject.Model
        @model BatchDetail
        
        
        <tr data-rownum="@Model.Seq">
            @using (Html.BeginCollectionItem("oBatchDetails"))
            {           
                <td>                
                @Html.EditorFor(model => model.CheckCardNo, new { htmlAttributes = new { @class = "form-control input-sm patientCheckCard clsAlphaNumericText", maxlength = "50", autocomplete = "off" } })
                </td>
                <td>
                @{
                   Html.Kendo().DatePickerFor(model => model.CheckDate).Format("MM/dd/yyyy").HtmlAttributes(new { style = "width:115px", @class = "smalldtpicker paidDate", autocomplete = "off", @type = "" }).Render();
                 }
              </td>            
            }
        </tr>

Answer 2

You can try to change the name of CheckDate to the correct format in $(function(){}) :

$(function () {

            $("input[name='CheckDate']").attr("name", $("input[id$='CheckCardNo']").attr("name").replace("CheckCardNo", "CheckDate"));
        });