【问题标题】:Retrieving value from DataTextField of kendo MVC combo and assigning it to the viewmodel从 kendo MVC 组合的 DataTextField 中检索值并将其分配给 viewmodel
【发布时间】:2017-04-13 09:04:26
【问题描述】:

我正在我的 MVC 应用程序中实现 MVC kendo 组合框控件。 kendo 组合框控件包含一个模型属性,分别绑定到 value 和 text 属性。 text 属性包含一个名为 CompanyCodeCompany 的串联模型属性。我基本上需要提取公司代码并将其分配给视图模型中的公司代码属性,因为我在保存到数据库时需要该值。请注意,我需要国家代码和公司代码。目前,组合框值字段绑定到 CountryCode。目前,组合框使用 SalesOrganisation 视图模型填充,主窗体使用 newrequest 视图模型发布数据。我在新的请求视图模型上尝试了 CompanyCodeCompany 属性。但这似乎也不起作用。我知道组合@(Html.Kendo().ComboBoxFor(model => model.CountryCode) 中的这段代码将只绑定国家代码。理想的方法是检索公司来自 salesorganisation 的代码值,并直接在 razor 中将其分配给新的请求视图模型。

我不确定检索公司代码值的方法。

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

                       @(Html.Kendo().ComboBoxFor(model => model.CountryCode)
                        // .Name("SalesOrganisation")
                        .HtmlAttributes(new { style = "width:100%" })
                        .DataTextField("CompanyCodeCompany")
                        .DataValueField("CountryCode")
                        .Filter("contains")
                        .MinLength(3)
                        .Value(@user.DefaultCountryCode)
                        .DataSource(dataSource => dataSource
                        .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))
                        .ServerFiltering(true)
                        )
                     )
                    </div>
                @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
                </div>
            </div>

销售组织视图模型

 public class SalesOrganisationViewModel
    {
        public string CountryCode { get; set; }

        public string CompanyCode { get; set; }

        [Display(Name = "Sales Organisation")]
        public string Company { get; set; }


        public string CompanyCodeCompany
        {
            get
            {
                return CompanyCode + " - " + Company;
            }
        }

    }

NewRequest ViewModel

public class NewRequestViewModel
    {

        private string name;

        [Display(Name = "Request Id")]
        public int RequestID { get; set; }
        public int CustomerMasterDataId { get; set; }

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

        public string CountryCode { get; set; }
       public string CompanyCodeCompany { get; set; }
      }

【问题讨论】:

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


    【解决方案1】:

    与您的其他问题类似:基本上,处理组合框上的更改事件并设置公司代码的值。所以首先,在你的视图中添加一个 HiddenFor:

    @Html.HiddenFor(model => model.CompanyCode)
    

    现在处理更改事件:

       @(Html.Kendo().ComboBoxFor(model => model.CountryCode)
        .HtmlAttributes(new { style = "width:100%" })
        .DataTextField("CompanyCodeCompany")
        .DataValueField("CountryCode")
        .Filter("contains")
        .MinLength(3)
        .Value(@user.DefaultCountryCode)
        .Events(e => e.Change(onComboChange))
        .DataSource(dataSource => dataSource
        .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))
        .ServerFiltering(true)
        )
    

    然后访问数据项并设置值:

    @section scripts
    {
        <script type="text/javascript">
            function onComboChange(e) {
                var dataItem = e.sender.dataItem();
    
                if (dataItem) {
                    $("#CompanyCode").val(dataItem.CompanyCode);
                };
            };
    
        </script>
    }
    

    现在国家代码和公司代码都应该发回。这是绑定部分如何工作的示例:http://jsfiddle.net/sg53719/74LwhebL/1/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-31
      • 2019-07-10
      • 1970-01-01
      • 2018-11-24
      相关资源
      最近更新 更多