Question

我有一个kendo移动表单，我将用它来捕获用户的一些信息。

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

ajax调用发生但我无法弄清楚如何发布数据。如果我使用$（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）只给你一个按钮元素。这样做的简单方法是使用Kendo UI Mobile中内置的MVVM功能。将模型创建为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>

Kendo Mobile - 提交整个表格

2 个答案: