Kendo MVC网格客户端模板在onClick中将字符串传递给控制器

时间:2017-09-11 08:41:18

标签: c# kendo-grid kendo-asp.net-mvc

我正在使用kendo mvc grid来显示我的客户表的索引

这是我的代码看起来像

@model IEnumerable<CRM.CustomerViewModel>
@using Kendo.Mvc.UI
@using System.Collections

<div class="kentoCustm" id="UsrGrid">
@(Html.Kendo().Grid<CRM.CustomerAllViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(o => o.Cu_Name).Title("Customer").Width(180);
        columns.Bound(o => o.Cust_Company).Title("Company");
        columns.Bound(o => o.Cust_Type).Title("Type");
        columns.Bound(o => o.Cust_AssignedTo_Name).Title("Assigned To");
        columns.Bound(o => o.Cust_Email).Title("Email");
        columns.Bound(o => o.Cust_MobilePhone).Title("Mobile Phone");

        columns.Bound(o => o.Cust_ID)
                         .Title("Action")
                         .Filterable(false).Width(100)
                                    .ClientTemplate(
                                     "<button type='button' onclick='Details(#= Cust_ID #)' class='k-button k-button-icontext k-grid-add'><span class='k-icon k-i-search'></span></button>"
                                     + "<button type='button' onclick='Delete(#= Cust_ID #)' class='k-button k-button-icontext k-grid-add'><span class='k-icon k-delete'></span></button>"
                                      ).Width(100);
    })
  .Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true))
  .Sortable(sortable =>
  {
      sortable.SortMode(GridSortMode.SingleColumn);
  })
  .Groupable()
  .Filterable()
  .Scrollable(scr => scr.Height(300))
  .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model =>
      {
          model.Id(p => p.Cust_ID);
      })
      .Read(read => read.Action("Customer_Read", "Ajax"))
      )
  )

</div>


<script>
    function Details(x,z) {
        window.location.href = "/DetailsCustomer/"+ z +"/" + x;
    }
    function Delete(x,z) {
        window.location.href = "/DeleteCustomer/"+ z +"/" + x;
    }
</script>

现在效果不错,在此代码中我有两个DetailsDelete按钮,我正在使用onclick个事件将它们重定向到相应的页面。

<button type='button' onclick='Details(#= Cust_ID #)' class='k-button k-button-icontext k-grid-add'><span class='k-icon k-i-search'></span></button>

这是详细信息按钮。

我想要什么

我想在点击时传递客户名称。我显示的名称为"Salute" + "FirstName" + "LastName",存储在Cu_Name中。这是CustomerViewModel的属性。

我的控制器功能

    public ActionResult Customer_Read([DataSourceRequest] DataSourceRequest request)
    {
        //View model List
        List<CustomerViewModel> customerlist = new List<CustomerViewModel>();

        //GetAddressByVendorId Data from database using repository

        IList<Customer> customer = _customer.GetCustomer().ToList();

        foreach (var item in customer)
        {
            CustomerViewModel customerobj = new CustomerViewModel();

            customerobj.Cust_ID = item.Cust_ID;
            customerobj.Cust_AssignedTo = item.Cust_AssignedTo;
            customerobj.Cust_Company = item.Cust_Company;
            customerobj.Cust_Type = item.Cust_Type;
            customerobj.Cust_Email = item.Cust_Email;
            customerobj.Cust_MobilePhone = item.Cust_MobilePhone;

            // removing spaces in first name
            customerobj.Cust_FirstName = item.Cust_FirstName.Replace(" ", String.Empty);

            // creating display name as "Salute" + "FirstName" + "LastName"
            if (item.Cust_AssignedTo != null && item.Cust_AssignedTo != 0)
            {
                var user = _user.GetUserById(Convert.ToInt32(item.Cust_AssignedTo));
                if (user != null)
                {
                    customerobj.Cust_AssignedTo_Name = user.Usr_FirstName;
                }
            }
            customerobj.Cu_Name = item.Cust_Salute + " " + item.Cust_FirstName + " " + item.Cust_LastName;

            // add each customer to viewmodel list
            customerlist.Add(customerobj);
        }
        DataSourceResult result = customerlist.OrderByDescending(a => a.Cust_ID).ToDataSourceResult(request, pos => new
        {
            Cust_ID = pos.Cust_ID,
            Cust_AssignedTo = pos.Cust_AssignedTo,
            Cust_Company = pos.Cust_Company,
            Cust_AssignedTo_Name = pos.Cust_AssignedTo_Name,
            Cu_Name = pos.Cu_Name,
            Cust_Type = pos.Cust_Type,
            Cust_Email = pos.Cust_Email,
            Cust_MobilePhone = pos.Cust_MobilePhone,
            Cust_FirstName = pos.Cust_FirstName
    });
        return Json(result, JsonRequestBehavior.AllowGet);
    }

我通过在点击时添加Cust_FirstName来更改我的按钮,

"<button type='button' onclick='Details(#= Cust_ID #,#= Cust_FirstName #)' class='k-button k-button-icontext k-grid-add'><span class='k-icon k-i-search'></span></button>"

但我的控制台出现错误

  

未捕获的ReferenceError:未定义prince      在HTMLButtonElement.onclick(索引:1)

其中prince是客户Cust_FirstName

enter image description here

注意

我认为发生此错误是因为我没有在视图中添加Cust_FirstName。但我不想单独显示名字,我想将Cust_FirstName传递给那些函数。

我尝试添加

 columns.Bound(o => o.Cust_FirstName).Hidden();

但是同样的错误发生了。

请在这里帮助我。提前谢谢。

0 个答案:

没有答案