在 Kendo 网格中创建新条目时加载字段的随机值

Question

图 : Kendo 网格

这是一个 kendo 用于生成优惠券的可编辑网格。我想要优惠券代码字段的 6 位随机值，同时从控制器创建新条目。

View

@{
   Layout = Request.IsAjaxRequest() ? null : 
    "~/Views/Shared/_AdminLayout.cshtml";
}

<!--Kendo Scripts and Style Start------------------------------------------- -------------------------------------->


<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.aspnetmvc.min.js">
</script>


<!--Kendo Scripts and Style End-->
<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
    height: 400,
    columns: [

        { field: "Coup_Code", title: "Coupon Code"},
        { field: "Coup_Discription", title: "Coupon Discription" },
        { field: "DiscountType", title: "Discount Type", editor: PlaceDropDownEditor1 },
        { field: "DiscountAmount", title: "Discount Amount" },
        {field: "ExpiredOn",format: "{0: yyyy-MM-dd}"},
        {command: [ "edit" , "destroy"], width: 180 }
    ],
    toolbar: ["create"],
    dataSource: {
        type: "aspnetmvc-ajax",
        transport: {
            read: {
                url: "/Coupon/Coupon_Read"
            },
            create: {
                url: "/Coupon/Coupon_Create"
            },
            update: {
                url: "/Coupon/Coupon_Update"
            },
            destroy: {
                url: "/Coupon/Coupon_Destroy"
            }
        },
        schema: {
            data: "Data",
            model: {
                id: "CoupID",
                fields: {
                    CoupID: { type: "number", editable: false, nullable: false },
                //    Coup_Code: { type: "string", validation: { required: true, required: { message: "required" } } },
                    Coup_Discription: { type: "string" },
                    ExpiredOn: { type: "date" },
                    DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },


                }
            }
        },
        serverPaging: true,
        serverSorting: true,
    },
    editable: "inline",
    scrollable: true
})
  function PlaceDropDownEditor1(container, options) {
      $('<input required name="' + options.field + '"/>')
       .appendTo(container)
       .kendoDropDownList({
           autoBind: true,
           dataTextField: "DiscountType",
           dataValueField: "DiscountType",
           dataSource: {
               type: "json",
               transport: {
                   read: "/Coupon/GetDicountType"
               }
           }
       });
  }

</script>

Answer 1

该解决方案对我有用。在 view

中包含此函数

 edit: function (e) {
        var model = e.model;
        if (model.Coup_Code == null)
            model.set("Coup_Code", "@ViewData["random"]");
        // model.set("DiscountType", "Percentage")
        e.container.find("input[name=Coup_Code]").attr("maxlength", 6).attr("required", "required");
        e.container.find("input[name=DiscountType]").attr("required", "required");
        //  e.container.find("input[name=Coup_Discription]").attr("maxlength", 200);
    }

controller

 public ActionResult Index()
    {
        ViewData["random"] = RandomString(6);
        return View();
    }

    private static Random random = new Random();
    public static string RandomString(int length)
    {
        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        return new string(Enumerable.Repeat(chars, length)
          .Select(s => s[random.Next(s.Length)]).ToArray());
    }

在 Kendo 网格中创建新条目时加载字段的随机值

Load Random value for a field while create new entry in Kendo grid

c#

asp.net-mvc

telerik

kendo-grid