Kendo MVVM with MVC5 and MVC HtmlHelpers

[Adam P]

Hi everyone, my company just recently purchased the Kendo UI control suite and we're experimenting with some different approaches for a new site we're going to begin working on.  One thing we are definitely doing is using MVC5 / EF6 - and for a while we were thinking it might make sense to take a JS MVVM approach on the client, but I'm starting to think otherwise.  We would like to have a rich client experience, but I think minimizing development time is more important.

I have two questions:

First, does it make sense to do a combination of MVVM and MVC?  We would have ASP.NET MVC just return a JSON result that gets consumed by Kendo MVVM, I suppose.  It seems like we would miss out on our annotated unobtrusive validation though with this approach - is that a correct assumption?  What other pros and cons are there to this approach?

Second, is there a better way to write this DropDownList implementation?  I know I could do it without the Helper methods, but I'm just curious if I could use the Helper and keep the code to a minimum while using MVVM:

<div>
    @*Example using Kendo / MVVM*@
    @Html.Kendo().DropDownList().Name("TestDropdown").DataTextField("name").DataValueField("id").HtmlAttributes(new Dictionary<string, object> { { "data-bind", "value: person.contactType, source: contactTypes" } })
</div>
<div>
    @*Example binding directly to MVC ViewModel*@
    @Html.Kendo().NumericTextBoxFor(x => x.TestInt)
</div>

Thank you,

-Adam

[Petur Subev]

Hello Adam,

To the questions:

In my opinion using MVVM is more handy when you develop full client side applications (most of the cases single page apps) and you barely perform full page reloads between visiting the different pages. Of course you can combine MVVM and MVC the way you mentioned, however yes you will loose most of the built-in MVC validation that is generated automatically by the MVC helpers and the data annotations in the model, since you transfer the models as JSONs via Ajax where all this metadata will be lost.

The data-binding approach that you shared is all fine. You can improve it slightly by using anonymous object instead of dictionary like this:

.HtmlAttributes(new { data_bind = "value: person.contactType, source contactTypes"})

Please notice that the underscore will be translated into a hyphen.

I hope this information helps.

Kind Regards,
Petur Subev
Telerik

[Adam P]

Thank you Peter, this answer was exactly what I was looking for.

I think I'm going to stay away from the client-side MVVM stuff for now and go with Kendo UI / MVC.  We were considering possibly doing a SPA driven by an initial MVC page load and subsequent JSON calls to the MVC Controllers, but we are also just as interested in making it a maintainable / coherent development process and we would really like to stick with using data annotated validation.

I haven't really looked into what drives the unobtrusive validation, short of the obvious "data-*" attributes and JQuery.Validation.Unobtrusive.js that is included. I'm guessing that information wouldn't be passed through a JSON call anyway, thus making it impossible to utilize through a method such as this.

Thanks again, your response was very helpful!

[N.Y.]

Hi,

 I'm working on Single Page Application(SPA). I have adde MVC5 kendo grid verison,But I don't get kendo grid namespace in view.please share CRUD operation with kendo grid with knockout.js.

Thanks in advance.

Regards,
N.Y.Gudlanur