Kendo ui 剑道移动-提交整个表单

我有一个剑道移动表单，我将使用它从我的用户那里获取一些信息

我想使用ajax将数据发布到web服务或aspx（测试页面）。对用户填写的表单使用MVVM似乎有点过火，不会进行读取/更新/删除

ajax调用发生了，但我不知道如何发布数据。如果使用$（this）.serialize（），则不会发生任何问题。如果我硬编码一些数据，那么它就工作了。 页面上会有很多控件，我希望我不必手动构建表单数据。我无法添加

标记，因为它破坏了页面的样式

如果有更“剑道”的方法，请告诉我如何做。谢谢

这是我到目前为止所拥有的

//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>

//提交表单
功能提交表格（e）{
$.post（'TestPost.aspx'，$（this）.serialize（），函数（数据）{
//这是在对web服务的调用成功时执行的。
//“数据”包含来自请求的响应
警报（数据）；
}).error（函数（xhr、ajaxOptions、thrownError、request、error）{
警报（'xrs.status='+xhr.status+'\n'+
'抛出的错误='+thrownError+'\n'+
'xhr.statusText='+xhr.statusText+'\n'+
'请求='+请求+'\n'+
'错误='+错误）；
});
e、 预防默认值（）；
}
//html控件示例

地板


好啊


不好


评论


收费
测试





图画


选择一张照片
挑选




//提交按钮
拯救

这里$（this）将只提供按钮元素。实现这一点的简单方法是在KendoUIMobile中使用内置的MVVM功能。创建一个模型作为JS对象，并将视图的数据模型属性设置为该对象。现在单击submit按钮，只需使用ajax将此对象发送到服务器。这样可以减少发送到服务器的数据量

---

关于移动和mVVM集成的文档：

我以前使用过PageMethod。

这对你的事业有帮助吗

让我们以代码隐藏中的此类方法为例：

[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);
    } 
});

确保在使用jQuery库之前，您已经在Web表单中添加了对它的引用。 例如：

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