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中的字符串参数。我怎样才能获得该方法的价值？请任何人都可以帮助我。或者有没有其他方法可以做到这一点。

由于希亚姆

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 () {

            });


        });
    }
}

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

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

如何获取Kendo Grid ClientTemplate值到Javascript

1 个答案: