Kendo Mobile - Отправить всю форму

Question

У меня есть мобильная форма кендо, которую я буду использовать для сбора информации от моих пользователей.

Я хотел бы опубликовать данные в веб-сервис или aspx(тестовая страница) с помощью ajax. Кажется чрезмерным использование MVVM для формы, которую заполняет пользователь, и не будет никаких операций чтения / обновления / удаления.

Аякс вызов происходит, но я не могу понять, как разместить данные. Ничего не изменится, если я использую $(this).serialize(). Если я жестко закодирую некоторые данные, то это сработает. На странице будет много элементов управления, и я надеюсь, что мне не нужно вручную создавать данные формы. Я не могу добавить <form> тег, поскольку он нарушает стилизацию страницы.

Если есть более "кендо" способ сделать это, пожалуйста, покажите мне, как. Спасибо

Вот что у меня так далеко.

//Submit Form 
function submit_form(e) {


        $.post('TestPost.aspx', $(this).serialize(), function (data) {
            // This is executed when the call to web service was succesful.
            // 'data' contains the response from the request
            alert(data);

        }).error(function (xhr, ajaxOptions, thrownError, request, error) {
            alert('xrs.status = ' + xhr.status + '\n' +
                     'thrown error = ' + thrownError + '\n' +
                     'xhr.statusText = ' + xhr.statusText + '\n' +
                     'request = ' + request + '\n' +
                     'error = ' + error);
        });


        e.preventDefault();

    }



 //Example of html controls

 <div id="checks" data-role="view" data-title="Foo" data-layout="checklayout">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Floor
        <ul>
            <li>
                <label for="Foo">
                    <input type="radio" name="Foo" id="FooOk" value="Ok" />
                    Ok</label>

            </li>
            <li>
                <label for="Foo2">
                    <input type="radio" name="Foo" id="FooNotOk" value="NotOk" />
                    Not Ok</label>

            </li>
            <li id="Comment1" class="divComment" style="display: none;">
                <label>
                    Comments
                 <input type="text"  name="TextComment" id="TextComment" placeholder="Type Comments" autocomplete="off" tabindex="1" />
                </label>

            </li>
            <li id="C1" class="divComment" style="display: none;">
                <label>
                    Charges
                <select id="Charges" name="Charges" >
                    <option value="nc">test</option>
                </select>
                </label>


            </li>
        </ul>
        </li>
    </ul>

    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Picture
            <ul>
                <li>
                    <label>
                        Select a Photo
                    <input type="file" id="kitFile" style="display: none;" />
                        <a data-role="button" data-click="select" style="float: right;">Select</a>
                    </label>

                </li>
            </ul>
        </li>
    </ul>

</div>


//Submit button
 <a data-align="right" data-role="button" class="nav-button" data-click="submit_form">Save</a>

Answer 1

Здесь $(this) даст вам только элемент button. Самый простой способ сделать это - использовать встроенную функцию MVVM в Kendo UI Mobile. создайте модель как объект JS и задайте атрибут модели данных вашего представления в качестве этого объекта. Теперь, нажав кнопку "Отправить", просто отправьте этот объект на ваш сервер, используя ajax. Таким образом, вы уменьшаете объем данных, отправляемых на сервер.

Документация по интеграции мобильных устройств и mVVM: http://docs.kendoui.com/getting-started/mobile/mvvm.

Answer 2

Я использовал PageMethod ранее. http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Поможет ли что-то подобное вашему делу?

Давайте рассмотрим пример такого метода в коде:

[WebMethod]
public static string MyMethod(string Id)
{
    return string.Format("Thanks for calling me with id: " + Id);
}

На что следует обратить внимание: метод должен быть статическим и иметь атрибут [WebMethod].

А на стороне клиента вы можете вызвать этот метод, используя функцию jQuery.ajax(), например:

$.ajax({ 
    url: 'default.aspx/MyMethod',
    type: 'POST', 
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ ID : ID }),
    success: function (result) { 
        alert(result.d);
    } 
});

Убедитесь, что в вашей WebForm вы действительно добавили ссылку на библиотеку jQuery, прежде чем использовать ее. Например:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>