如何使用剃刀语法在剑道网格列模板中调用 javascript 函数
Posted
技术标签:
【中文标题】如何使用剃刀语法在剑道网格列模板中调用 javascript 函数【英文标题】:How to call a javascript function inside kendo grid column template with razor syntax 【发布时间】:2014-03-05 05:59:45 【问题描述】:我已经使用 MVC4 和 Razor 语法实现了 Kendo Grid。此网格显示来自数据库表的日志条目。 LogText 列包含带有 Windows 换行符的文本。我正在尝试用换行符替换那些换行符。为此,我创建了一个要从列模板调用的 javascript 函数。网格使用服务器绑定。我似乎找不到从模板中进行 javascript 调用的正确语法。我见过很多例子,但似乎都没有使用 Razor 语法。我希望有人可以帮助我。
这是我的代码:
@model IEnumerable<Core.Models.ShipmentLog>
@
ViewBag.Title = "ShipmentLog";
<h2>ShipmentLog</h2>
@(html.Kendo().Grid(Model)
.Name("ShipmentLogGrid")
.Columns(columns=>
columns.Bound(bl => bl.UserName);
columns.Bound(bl => bl.LogTime);
columns.Bound(bl => bl.LogType);
columns.Bound(bl => bl.LogText).Width(600).Encoded(false).Template(#= GetHtmlNewLinesString(@item.LogText) #);
)
)
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
function getHtmlNewLinesString(text)
return text.replace('\n/g', '<br />');
</script>
【问题讨论】:
查看渲染的代码。我相信它会呈现为一张桌子。我只需在准备好的文档中放置一个 .each ,它将遍历表格行并运行您的函数 谢谢马特。当谈到使用 javascript 进行客户端编程时,我承认自己是个新手。我可能不得不按照你的建议去做。但是,我希望能够从 Kendo 列模板中完成此操作。网络上有一些示例说明何时在 javascript 中实现了网格,但对于 RAZOR 则没有。不幸的是,我试图让这个调用在模板中工作的所有东西都不会调用这个函数。再次感谢。 【参考方案1】:@(Html.Kendo().Grid(Model)
.Name("Details")
.Columns(columns =>
columns.Bound(m => m.SubSystemOrderId).Title("Subsys #");
columns.Bound(m => m.Description).Title("Description").Template(@<text><a href="javascript: void(0);" onclick="return window.top.DisplayExternalOrderDetails('@item.SubSystemOrderId', '@item.OrderDetailTypeId', '@item.ProposalId', '@ViewBag.MyOpExUser', '@ViewBag.selectedOpportunityId')">@item.Description</a></text>);
columns.Bound(m => m.SubSystemStatusName).Title("Status");
columns.Bound(m => m.GrossRevenue).Title("Gross Revenue").Format("0:c");
columns.Bound(m => m.IncludeInForecast).Title("Include In Forecast").Template(m=>m.IncludeInForecast ? "Yes" : "No");
columns.Bound(m => m.ProposalId).Title("Proposal Id").Visible(false);
)
)
另一个例子
columns.Bound(m => m.OpportunityName).Title("Opportunity Name").ClientTemplate("<a href='javascript: void(0);' onclick=\"return openMSDynamicsWindow('#= OpportunityUrl #');\">#= OpportunityName #</a>").HtmlAttributes(new @class = "k-link" );
您会看到 im 传递到函数 '#= OpportunityUrl #'
。这就是您可以从模型中获取值的方式。
#= OpportunityName #
将是链接文本。
这是一个更复杂的例子,你真的可以做任何你想做的事。只是让基于字符串的废话工作是一个真正的痛苦
columns.Bound(m => m.Dollars).Title("").ClientTemplate(
"# if (Dollars == null) #" +
"" +
"# else if (Dollars == 0) #" +
"<div>#= kendo.toString(Dollars, 'c') #</div>" +
"# else if (Count > 0) #" +
"<a href='javascript: void(0);' onclick=\"return window.top.openOrderDetails('#= Count #','#= Type #','#= DetailId #','#= OrderId #','#= User #','#= SelectedId #');\">#= kendo.toString(Dollars, 'c') #</a>" +
"# #"
)
【讨论】:
谢谢先生!你的第一个例子是虚无沙漠中的水晶绿洲!非常适合我:)【参考方案2】:这可以在没有 javascript 的情况下实现,但要了解如何使用模板,请参阅 @C Sharper 的回答。
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration#template
columns.Bound(bl => bl.LogText)
.Template(@<text>@item.LogText.Replace(System.Environment.NewLine, "<br />"))
.Width(600)
.Encoded(false);
【讨论】:
您的回答让我走上了正确的道路。谢谢。但是,即使使用 .Encoded(false),我也必须用 @Html.Raw 包装它。最终起作用的是:columns.Bound(bl => bl.LogText).Template(@<text>@Html.Raw(@item.LogText.Replace(System.Environment.NewLine, "<br />"))</text>).Width(600).Encoded(false);
即使这行得通,我仍然想知道在 .Template() 中执行 javascript 函数的语法。我在网上搜索过,找不到具体的语法。这是因为 .Template() 中包含的是服务器端代码吗?我尝试了 .ClientTemplate(),但我认为它不起作用,因为我正在为我的数据源使用服务器绑定。那是对的吗?抱歉所有问题,但我对这些东西不熟悉。【参考方案3】:
这可能对某人有帮助。我用它在文本框中建立一个唯一的 id。除此之外,您还可以轻松地在 onclick 或 blur 事件中编写代码。然后只需传入元素 ID。
Html.Kendo().Grid((List<RadCarePlus.V2.Web.Models.Facilities>) ViewData["FacilitiesList"])
.Name("Facilities")
.Columns(columns =>
int i = 0;
columns.Bound(c => c.ProviderID).Title("Provider Number").Width(150).HtmlAttributes(new style = "text-align:center; white-space: nowrap;" ).HeaderHtmlAttributes(new style = "text-align:center; white-space: nowrap;" );
columns.Bound(c => c.NPI).Title("NPI").Width(150).HtmlAttributes(new style = "text-align:center; white-space: nowrap;" ).HeaderHtmlAttributes(new style = "text-align:center; white-space: nowrap;" );
columns.Bound(c => c.ProviderFirstName).Template(c => c.ProviderFirstName + " " + c.ProviderLastName).Title("Provider Name").Width(140).HtmlAttributes(new style = "text-align:center; white-space: nowrap; text-decoration: underline;" ).HeaderHtmlAttributes(new style = "text-align:center; white-space: nowrap;" );
columns.Bound(c => c.AddressLine1).Template(c => c.AddressLine1 + " " + c.AddressLine2 + "<BR>" + c.City + " " + c.State + " " + c.Zipcode).Title("Address").Width(140).HtmlAttributes(new style = "text-align:left; white-space: nowrap;" ).HeaderHtmlAttributes(new style = "text-align:left; white-space: nowrap;" );
columns.Bound(c => c.Email).Template(c => "<input type='text' name='AdminEmail' id='" + (i = i + 1) + "' value='" + c.Email + "'> ").Title("Administrator").Width(140).HtmlAttributes(new style = "text-align:center; white-space: nowrap; text-decoration: underline;" ).HeaderHtmlAttributes(new style = "text-align:center; white-space: nowrap;" );
)
.Sortable(sortable => sortable.AllowUnsort(false))
.DataSource(dataSource => dataSource.Server().PageSize(5)
)
【讨论】:
以上是关于如何使用剃刀语法在剑道网格列模板中调用 javascript 函数的主要内容,如果未能解决你的问题,请参考以下文章