在mvc中绑定kendo ui网格上的图像按钮

时间:2017-03-02 09:27:06

标签: c# asp.net-mvc-4 kendo-ui telerik kendo-asp.net-mvc

在mvc c#中绑定kendo ui网格上的图像按钮。 我想在网格视图中绑定一个新的列名AddressMaps。

以下是代码:

@(Html.Kendo().Grid<AddressGridModel>()
    .Name("addresses-grid")
    .Events(events => events
        //.DataBinding("onAddressesDataBinding")
        .DataBound("onAddressesDataBound")
    )
    .Columns(columns =>
    {
        columns.Bound(x => x.BillingAddress)
            .Width(100)
            .ClientTemplate("# if (BillingAddress == true) { # <img src=\"/content/images/ico_check_16.png\"/> # } #"); ;
        columns.Bound(x => x.DefaultShippingAddress)
            .Width(100)
            .ClientTemplate("# if (DefaultShippingAddress == true) { # <img src=\"/content/images/ico_check_16.png\"/> # } #"); ;
        columns.Bound(x => x.BillingName);
        columns.Bound(x => x.CompanyName);
        columns.Bound(x => x.Attention);
        //columns.Bound(p => p.Image).ClientTemplate
        //("<img src='/content/images/Google-Maps.png'onclick='deleteRow(this)' />");               

        columns.Bound(x => x.Address);
        columns.Bound(x => x.City);
        columns.Bound(x => x.StateProvinceName);
        columns.Bound(x => x.ZipPostalCode);
        columns.Bound(x => x.CountryName);
        columns.Bound(x => x.Id)
            .Width(100)
            .Template(x => 
                string.Format("<a class=\"modal\" rel=\"{0}\" close=\"{1}\" title=\"{2}\"><img src=\"/content/images/ico_edit_16.png\" /></a>",
                    Url.Action("AddressEdit", "Account", new { addressId = x.Id }),
                    T("Common.Close").Text,
                    T("Address.EditAddress").Text)
                + " | " +
                string.Format("<a class=\"modal\" rel=\"{0}\" close=\"{1}\" title=\"{2}\"><img src=\"/content/images/ico_delete_16.png\" /></a>",
                    Url.Action("AddressDelete", "Account", new { addressId = x.Id }),
                    T("Common.Close").Text,
                    T("Address.DeleteAddress").Text)
            )
            .ClientTemplate(string.Format("<a class=\"modal\" rel=\"/address/#= Id #/edit\" close=\"{0}\" title=\"{1}\"><img src=\"/content/images/ico_edit_16.png\" /></a>",
                    T("Common.Close").Text,
                    T("Address.EditAddress").Text)
                + " | " +
                string.Format("<a class=\"modal\" rel=\"/address/#= Id #/delete\" close=\"{0}\" title=\"{1}\"><img src=\"/content/images/ico_delete_16.png\" /></a>",
                    T("Common.Close").Text,
                    T("Address.DeleteAddress").Text))
                    .Title(T("Common.Action").Text);
    })

    .Pageable(pageable => pageable.ButtonCount(5))
    .Sortable(sortable => sortable
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn))
    .Filterable(f => f.Extra(true)
        .Operators(o => o.ForString(s => s.Clear()
            .Contains("Contains")
            .DoesNotContain("Does not contain")
            .IsEqualTo("Is equal to")
            .IsNotEqualTo("Is not equal to")
            .StartsWith("Starts with")
            .EndsWith("Ends with ")
            .IsNull("Is null")
            .IsNotNull("Is not null")
            .IsEmpty("Is empty")
            .IsNotEmpty("Is not empty")     
    )))

    .DataSource(dataBinding => dataBinding.Ajax()
        .ServerOperation(false)
        .PageSize(20)
        //.Read("ContactList", "Account", new {  id = Model.AccountId })
        .Read(read =>
        {
            read.Type(HttpVerbs.Get);
            read.Action("AddressList", "Account", new { id = Model.AccountId });
        })
    )
    .AutoBind(true)
)

我尝试了很多,但这不起作用。我的要求是在网格中我想绑定一个图像按钮可能是。

这是我尝试过的代码:

columns.Bound(p => p.Image)
    .ClientTemplate("<img src='/content/images/Google-Maps.png' />");    

错误是

  

参数字典包含accountId中方法System.Int32的非可空类型System.Web.Mvc.ActionResult AddressesTab(Int32)的参数SalesWizard.Controllers.AccountController的空条目。可选参数必须是引用类型,可空类型,或者声明为可选参数   参数名称:参数

单击此图像按钮时,将打开地图页面的新选项卡以及相应的地址 在网格中,地址即将到来。 根据地址,它将在新标签中绑定地图。

如何在网格上绑定图像按钮? 这是班级:

    using System.Collections.Generic;
using System.Web.Mvc;
using SalesWizard.Web.Framework;
using SalesWizard.Web.Framework.Mvc;

namespace SalesWizard.Models.Account
{
    public class AddressGridModel : BaseSalesWizardEntityModel
    {
        [SalesWizardResourceDisplayName("Address.Fields.BillingAddress")]
        public bool BillingAddress { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.DefaultShippingAddress")]
        public bool DefaultShippingAddress { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.CompanyName")]
        [AllowHtml]
        public string CompanyName { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.BillingName")]
        [AllowHtml]
        public string BillingName { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.Attention")]
        [AllowHtml]
        public string Attention { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.Image")]
        [AllowHtml]
        public string Image { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.Address")]
        [AllowHtml]
        public string Address { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.City")]
        [AllowHtml]
        public string City { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.StateProvince")]
        [AllowHtml]
        public string StateProvinceName { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.ZipPostalCode")]
        [AllowHtml]
        public string ZipPostalCode { get; set; }

        [SalesWizardResourceDisplayName("Address.Fields.Country")]
        [AllowHtml]
        public string CountryName { get; set; }
    }
}

我正在试用这段代码:

   columns.Bound(x => x.Id)
                             .Filterable(false)
                                 .Width(100)
                                      //.ClientTemplate("<input type='button' id='import-order' class='modal k-button' rel='~/orderimport/2' close='@T('Common.Close')' title='Import Order' value='Import Order' />")
                                      .ClientTemplate("<a href=\"/account/AddressesMap?accountId= #=Id#\" class='modal'><img src=\"/content/images/Google-Maps.png\" class='modal' /></a>")
                                     .Title("Map Address");

0 个答案:

没有答案