Kendo UI mobile using ASP.NET MVC

[André]

I'm using trial version of Kendo UI Complete for ASP.NET MVC to test some features of the mobile component.
I'm trying to build a mobile app to test some features, but I'm having some problems to understand some concepts.

              1. The initialization of the app:

var app = new kendo.mobile.Application();

Should be done just once, to be able to use the navigation capabilities of the kendo framework, am I right? Using the MVC pattern of ASP.NET MVC, where is the best place to put this piece of code? There is some best practice/suggestion to place the initialization?

                  2. This question is related with the first one. In the "Create" view, I have the following code:

@model MiniSIGEMobile.Models.Student
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <ul data-role="listview" data-inset="true">

         <li data-role="fieldcontain">
            @Html.LabelFor(model => model.Person.FirstName)
            @Html.EditorFor(model => model.Person.FirstName)
            @Html.ValidationMessageFor(model => model.Person.FirstName)
        </li>
        <li data-role="fieldcontain">
            @Html.LabelFor(model => model.Person.Age)
            @Html.EditorFor(model => model.Person.Age)
            @Html.ValidationMessageFor(model => model.Person.Age)
        </li>
        <li data-role="fieldcontain">
            @Html.LabelFor(model => model.Course)
            @Html.EditorFor(model => model.Course)
            @Html.ValidationMessageFor(model => model.Course)
        </li>
        <li data-role="fieldcontain">
            <input type="submit" value="Create" />
        </li>
    </ul>
}

And the "Create" action in the controller is like this:

// POST: /Student/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Student student)
{
    if (ModelState.IsValid)
    {
        db.Students.Add(student);
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(student);
}

So when I click the "Create" button, the information is stored in the database, but the RedirectToAction("Index") is forcing the rebuild of all HTML, so the mobile app is no more initialized, without the mobile styles (because I'm initializing just once in another controller action).
How should I solve this?

           3. Finally, I would Like to know how can I change the style of the "Create" input to be like a kendoMobileButton? 

 Any kind of suggestion or guidance will be very appreciated!

[André]

The last one (3.) I already found the solution: <input class="km-button" type="submit" value="Create" /> 

Just added class CSS style.

[Alexander Valchev]

Hello André,

Thank you for your interest in Kendo UI Mobile. With regard to the questions you posted:

1. Your understanding is correct. I recommend you to initialise the application in the page which contains the initial mobile View. Usually this is the index/home page of the project.
2. Regular submit buttons perform postback to the sever. In SPA applications, such as Kendo UI Mobile application, client-server communication should be performed via Ajax request. This means that you should submit the form using jQuery ajax.

I hope this information will help.

Kind regards,
Alexander Valchev
the Telerik team

[André]

Thanks for your explanation Alexander!

Now I'm able to submit the form via AJAX (using Ajax.BeginForm(...)), and when I receive the response, I'm navigating back to the earlier view (the one with the list of objects). I'm doing that like: 

function OnSuccess(data) {
        //...
        document.getElementById("createForm").reset();
        app.navigate("#:back");
    }

But the new object created is not in the list, which make sense because I'm not refreshing the listview...

My listview is generated like this:

@model IEnumerable<MiniSIGEMobile.Models.Student>

@{
    ViewBag.Title = "Students";
}

<div align="center" style="margin: 20px"><a id="btnAdd" data-role="button" data-icon="add" href="@Url.Action("Create")">Add Student</a></div>
    <ul data-role="listview" data-style="inset">
        @foreach (var item in Model)
        {
            <li>
                @item.Person.FirstName @item.Person.LastName, @item.Person.Age
                <h5>@item.Course</h5>
                <a data-role="button" href="@Url.Action("Edit", new { Id = @item.id })">Edit</a>
                <a data-role="button" href="@Url.Action("Delete", new { Id = @item.id })" style="background-color: red">Delete</a>
            </li>
    }
    </ul>

Which one could be the best approach to refresh the list?

• Inside a event that fires when the list become visible, do an ajax request to the "Index" action? (If yes, which event should be?)
• I need to use datasource?
• Other option?

[Alexander Valchev]

Hello André,

I am not sure how (and where) you create the new object. Do you expect the ListView to refresh from the server, e.g. your MVC View to be re-rendered by the .NET framework? In such case you should set its reload option to true (default is false).

The other option is to use the ListView's DataSource features. The DataSource has a transport configuration which issues Ajax requests to the server. New records can be added through the add method and submitted to the server via create transport. If you would like to use the DataSource approach I recommend you to review the configuration options, methods and events. They are common for the whole framework and will help you in many scenarios.

Kind regards,
Alexander Valchev
the Telerik team