如何獲得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的字符串參數。 我怎樣才能獲得該方法的價值？請任何人都可以幫助我。 或者有沒有其他方法可以做到這一點。

謝謝Shyam

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

            });


        });
    }
}

我沒有測試過這段代碼，但希望你能看到我想為你實現的目標。

如果您需要更多信息，請告訴我們。