Working With ViewModels In Kendo UI ASP.net MVC - asp.net-mvc

Question

I have Three CaseCade Comboboxes, which work just fine for me
The problem is begins when I want to SAVE the id that Are Selected ,
I know how to get the Selected Id Which will be like this, and i have no problem with that
var countries = $("#countries").data("kendoDropDownList")
countries.value()
i don't know how to Set this values in my view model that i defined Above in My view, i don't know a way to pass view model to POST function.
This Is My View
#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;
}
This is My save Action
address here is not initialized
[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("");
}
this is view model
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; }
}

Answer 1

You just need to send json back to controller
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)
...
Collect all data you need, put it in json object, stringify and if json properties correspond correctly to model properties, it will be automatically binded to controllers parameter.