在Kendo UI ASP.net MVC中使用ViewModels

时间:2016-05-30 06:37:02

标签: asp.net-mvc mvvm kendo-ui

我有三个CaseCade组合框,对我来说效果很好 当我想保存被选中的id时,问题就开始了, 我知道如何获得选择ID这将是这样的,我没有问题

var countries = $("#countries").data("kendoDropDownList")
countries.value()

我不知道如何在我在我的视图中定义的视图模型中设置此值,我不知道将视图模型传递给POST函数的方法。

这是我的观点

@using System.Web.Optimization
@using Kendo.Mvc.UI
@model Mfr.Admin.Models.Address.CreateViewModel
@{
    Layout = "~/Views/Shared/_Main.cshtml";
}
<
<div class="demo-section k-content">
<h4>Countries:</h4>
@(Html.Kendo().DropDownListFor(m=>m.CountryId)
      .HtmlAttributes(new {style = "width:100%"})
      .OptionLabel("Select Country...")
      .DataTextField("Title")
      .DataValueField("Id")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCascadeCountries", "Address");
          });
      })
      )

<h4 style="margin-top: 2em;">states:</h4>
@(Html.Kendo().DropDownListFor(m=>m.StateId)
      .HtmlAttributes(new {style = "width:100%"})
      .OptionLabel("Select state...")
      .DataTextField("stateTitle")
      .DataValueField("stateId")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCascadeStates", "Address")
                  .Data("filterStates");
          })
              .ServerFiltering(true);
      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("CountryId")
      )
<script>
    function filterStates() {
        return {
            countries: $("#CountryId").val()
        };
    }
</script>

<h4 style="margin-top: 2em;">cities:</h4>
@(Html.Kendo().DropDownListFor(m=>m.CityId)
        .HtmlAttributes(new {style = "width:100%"})
      .OptionLabel("Select city...")
      .DataTextField("cityTitle")
      .DataValueField("cityId")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCascadeCities", "Address")
                  .Data("filterCities");
          })
              .ServerFiltering(true);

      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("StateId")

      )
<script>
    function filterCities() {
        return {
            cities: $("#StateId").val()
        };
    }
</script>
<button class="k-button k-primary" id="get" style="margin-top: 2em; float:       right;">Save</button>

</div>
<script>

$(document).ready(function () {

    $("#get").click(function () {
        // I want To call My post function Here,  and pass viewmodel with initialized values to that
        // I Suppose It will be something like this
        //but I dont know how to set values to view model
        //$.ajax({
        // url: "@Html.Raw(Url.Action("Create", "Address"))",
       // type: "POST",
        // dataType: "json"
        //)};
    });
});

</script>
     <style>
   .k-readonly {
    color: gray;
}

这是我的保存动作

这里的

地址未初始化

        [HttpPost]
        public ActionResult Create(CreateViewModel address)
    {
        if (address == null)
            throw new ArgumentNullException(nameof(address));

        var addressModel = new Address()
        {
            Description = address.Description,
            CityId = address.CityId,
            StateId = address.StateId,
            CountryId = address.CountryId,
            UserApplicationId = User.Identity.GetUserId<int>()
        };

        _addressRepository.Add(addressModel);
        _addressRepository.Complete();

        return Json("");

    }

这是视图模型

public class CreateViewModel
   {

    public int Id { get; set; }
    public int UserApplicationId { get; set; }

    public int CountryId { get; set; }

    public int StateId { get; set; }

    public int CityId { get; set; }
    public string Description { get; set; }

}

1 个答案:

答案 0 :(得分:0)

你只需要将json发送回控制器

var countries = $("#countries").data("kendoDropDownList")
var countryId = countries.value();
var id = ..... //and so on

var data = {'Id': id, 'CountryId': countryId, /*ad so on*/ }

...
data: JSON.stringify(data)
...

收集您需要的所有数据,将其放入json对象,stringify,如果json属性与模型属性正确对应,它将自动绑定到控制器参数。