javascript - 如何将 Kendo Grid ClientTemplate 值获取到 Javascript

Question

请在下面找到我的剑道网格

@(Html.Kendo().Grid(Model)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Callid).Title("CALL ID").Sortable(true).Width(80);        
                        columns.Bound(p => p.CallConnectTime).Title("CONNECTED TIME");
                        columns.Bound(p => p.CallTerminateTime).Title("TERMINATED TIME");
                        columns.Bound(p => p.Duration).Title("DURATION(Seconds)").Width(140);  
                        columns.Bound(p => p.AudioFileName).ClientTemplate("<input type='hidden'
         value='#=AudioFileName#'/> 
            <a href='javascript:void(0)' class='ui-btn-a ecbPlayClass'>
        <img src='" + Url.Content("~") + "img/play-circle-fill-32.png'
         height='20' width='20'/>"          



                          );        
                    })
                        .Pageable()
                             .Sortable()
                             .Groupable()
                             .Scrollable()
                             .Filterable()
                             .ColumnMenu()
                              .DataSource(dataSource => dataSource
                                 .Ajax()
                             .ServerOperation(false)
                             .Model(model => model.Id(p => p.Callid))
                             )
                         )

我正在尝试调用下面提到的 JavaScript

    <script type="text/javascript">

        $(".ecbPlayClass").click(function (event) {
            var fPath = $(this).children().attr("#= AudioFileName #");           
            var tbl = $('#ECBPlayer');      

            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetEcbaudioPlay")',
                dataType: 'html',
                data: { AFilePath: fPath }
            }).success(function (result) {
                tbl.empty().append(result);
                $("#dialog").dialog();
            }).error(function () {

            });
        });

    </script>

JavaScript中提到的方法是

 public ActionResult GetEcbaudioPlay(string AFilePath)
        {
            string SimageBase64Data = string.Empty;
            try
            {
                //byte[] imageByteData = System.IO.File.ReadAllBytes(AFilePath);
                //SimageBase64Data = Convert.ToBase64String(imageByteData);
            }
            catch (Exception)
            {

            }
            return PartialView("_EcbAudioPlayer", AFilePath);
        }

我只想将 AudioFile 值获取到方法 GetEcbaudioPlay 中的字符串参数。我怎样才能获得该方法的值(value)？请任何人帮助我。或者是否有任何其他方法可以做到这一点。

谢谢希亚姆

Answer 1

好吧，如果是我，我可能会像这样稍微调整一下代码。

对于您的 clientTemplate，我可能会这样做:

columns.Bound(p => p.AudioFileName).ClientTemplate("#=showAudioButton(data.AudioFileName)#");

然后这将调用一个 javascript 函数，然后为您显示一个按钮/链接。

function showAudioButton(filename) {
    var retString = '';

    if (filename.length !== 0 && filename !== '' && filename !== undefined) {
        retString = '<button type="button" class="ui-btn-a ecbPlayClass" data-audio-filename="' + 
            filename +
            '">' +
            '<img src="@Url.Content("~/img/play-circle-fill-32.png")"  height="20" width="20"/>
              </button>';
    } else {
        retString = '<span>-</span>';
    }

    return retString;

}

如果提供了文件名，这应该会返回一个带有图像的按钮。

然后像这样向网格添加一个 DataBound 事件:

.Events(events => {events.DataBound("onDataBound");})

然后我们可以像这样将事件处理程序附加到项目:

function onDataBound(e) {
    var audioButtons = $('button[data-audio-filename]');
    if (audioButtons !== null && audioButtons.length > 0) {
        $('button[data-audio-filename]').on('click', function (me) {
            me.preventDefault();
            var myvalue = $(this).data("audio-filename");
            var tbl = $('#ECBPlayer');   

            //call your service url here.
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetEcbaudioPlay")',
                dataType: 'html',
                data: {
                    AFilePath: myvalue
                }
            }).success(function (result) {
                tbl.empty().append(result);
                $("#dialog").dialog();
            }).error(function () {

            });


        });
    }
}

我还没有测试过这段代码，但希望你能看到我正在努力为你实现的目标。

如果您需要更多信息，请告诉我。