Question

我在mvc中的kendo网格中创建了一个列，其中包含一个基于字段true或false的锚标记。

columns.Bound(c => c.IsMapped).Width(140).ClientTemplate(
"# if (IsMapped == true) { #" +                                                                    
"<a href='DeleteMap?Id=#=Id#' class='btn btn-xs default'>UnMap </a>" +
"# } else { #" +                                                                  
"<a onclick=\"Show(this);\" href='javascript:void(0);'   
class='btn btn-xs default'> Map </a>" +
"# } #" );

第一个锚标记工作正常并调用我的控制器操作。但是第二个锚标记没有调用java脚本函数。我的Java脚本功能如下。

function Show(e) {
        e.preventDefault();
        alert('Test1');
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));            
        var wnd = $("#portal").data("kendoWindow");
        wnd.refresh({
            url: "Test",
            data: { id: dataItem.Id, pvid: dataItem.PVId }
        });
        wnd.center().open();
    };

当我查看页面源时，第二个锚标记呈现如下，没有设置onclick属性。

<a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-    
filter"></span></a>

我的代码有什么问题吗？提前致谢

Answer 1

而不是像这样构建锚标签

onclick=\"Show(this);\"

将其更改为

onclick='Show(this);'

Answer 2

就我个人而言，这是我为您的模板所做的事情，使其更易于维护和测试。

从剃刀代码中的嵌套JavaScript重构当前模板，并将其拉出到一个单独的函数中，如下所示：

columns.Bound(c => c.IsMapped).Width(140).ClientTemplate("#=unMap(data)#");

然后创建相关的函数：

function unMap(data){
    var retString = ''; 
    if(data.IsMapped === true) {
        retString = '<a href="DeleteMap?Id=' + data.Id + '" class="btn btn-xs default">UnMap </a>'; 
    }
    else {
        retString = '<a data-map="'+ data.Id + '" href="#" class="btn btn-xs default"> Map </a>';
    }

    return retString; 
}

然后在网格的事件配置中添加：

.Events(events => events.DataBound("onBoundData"))

然后附加此JavaScript函数：

 function onBoundData(e) {
      $("a[data-map]").on("click", function (me) {
                me.preventDefault();
          //do your Show(this) method in here 
      });

 }

然后，这会将事件绑定到具有data-map属性的链接。

希望这会有所帮助，如果您有任何跟进问题，请随时提出。

Answer 3

以下代码对我有用。在这里，我使用基于css类的jquery为锚元素分配一个css类并处理锚元素的click事件。

@Html.ActionLink("UnMap", "DeleteMap", new { Id = @item.Id })
    </text>).ClientTemplate(
          "# if (IsMapped == true) " + @"{# <a href=""DeleteMap?                                                                               
          Id=#=Id#"">UnMap</a>" + "# } " + 
          @"else {# <a href=""\#"" class='myCommand'>Map</a>" + "# } #").Width(75);

Answer 4

那对我有用

cshtml columns.Bound（c => c.REQUESTNUMBER）.Title（“请求ID”）。ClientTemplate（“＃= urlMap（data）＃”）。Width（140）;

js

var urlMap = function（obj）{ 返回“” + obj.REQUESTNUMBER +“”； }

JQuery函数调用Kendo Grid MVC里面的Anchor Tag点击

4 个答案: