根据剑道组合框的选择填充文本框答案

【问题标题】：populating textboxes based on selection of kendo combo box根据剑道组合框的选择填充文本框
【发布时间】：2017-04-05 09:00:34
【问题描述】：

我需要根据 MVC 5 应用程序中的组合框选择填充两个文本框控件。组合框是一个剑道 MVC 控件。需要分配给文本框控件的值位于绑定到组合框控件的集合中。有人可以让我知道如何去做。这需要在 javascript/jquery 中处理还是在 kendo 组合框事件中处理。举个例子就好了。

组合框

        @Html.LabelFor(model => model.Name1, htmlAttributes: new { @class = "control-label col-md-4" })

        <div class="col-md-4">
            <div class="editor-field">
                @(Html.Kendo().ComboBoxFor(model => model.Name1)
                 
                    .HtmlAttributes(new { style = "width:300px" })
                    .DataTextField("Name1")
                    .DataValueField("CustomerMasterDataId")

                    .DataSource(dataSource => dataSource
                    .Read(read => read.Action("RequestHeader_CustomerData", "Request").Type(HttpVerbs.Post))
                    )
                )
            </div>
            @Html.ValidationMessageFor(model => model.CustomerNumber, "", new { @class = "text-danger" })
        </div>

文本框

 <div class="form-group">
                @Html.LabelFor(model => model.CustomerNumber, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-6">
                    <div class="editor-field">
                        @Html.EditorFor(model => model.CustomerNumber, new { htmlAttributes = new { @class = "form-control" } })

                    </div>
                    @Html.ValidationMessageFor(model => model.CustomerNumber, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.CustomerGroup, htmlAttributes: new { @class = "control-label col-md-4" })
                <div class="col-md-6">
                    <div class="editor-field">
                        @Html.EditorFor(model => model.CustomerGroup, new { htmlAttributes = new { @class = "form-control" } })

                    </div>
                    @Html.ValidationMessageFor(model => model.CustomerGroup, "", new { @class = "text-danger" })
                </div>
            </div>

填充组合的控制器方法

public ActionResult RequestHeader_CustomerData()
    {
        var response = requestRepository.GetCustomerData().AsQueryable().ProjectTo<CustomerViewModel>();

        var jsonResult = Json(response, JsonRequestBehavior.AllowGet);
        jsonResult.MaxJsonLength = int.MaxValue;
        return jsonResult;
    }

请注意，CustomerNumber 和 Name1 字段将用于填充文本框

视图模型

  public class CustomerViewModel
    {
        public int CustomerMasterDataId { get; set; }
        public int CustomerNumber { get; set; }
        
        [Display(Name = "Customer Name")]
        public string Name1 { get; set; }

        [Display(Name = "Customer Group")]
        public string CustomerGroup { get; set; }
    }

【问题讨论】：

标签： kendo-ui asp.net-mvc-5 kendo-asp.net-mvc kendo-combobox

【解决方案1】：

是的，处理更改事件：

@(Html.Kendo().ComboBoxFor(model => model.Name1)
      .HtmlAttributes(new { style = "width:300px" })
      .DataTextField("Name1")
      .DataValueField("CustomerMasterDataId")
      .DataSource(dataSource => dataSource
      .Events(e => e.Change(onComboChange))
      .Read(read => read.Action("RequestHeader_CustomerData", "Request").Type(HttpVerbs.Post))
                )
            )

现在用js处理：

@section scripts
{
    <script type="text/javascript">
        function onComboChange(e) {
            var dataItem = e.sender.dataItem();

            if (dataItem) {
                //set the value of text box (input)
                $("#CustomerNumber").val(dataItem.CustomerNumber);
                $("#CustomerGroup").val(dataItem.CustomerGroup);
            };
        };

    </script>
}

这是一个等效的 js：http://jsfiddle.net/sg53719/74LwhebL/1/

【讨论】：