1

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

我想使用 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>
4

2 回答 2

1

我以前使用过 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>
于 2014-03-10T18:32:11.037 回答
1

这里 $(this) 只会给你按钮元素。执行此操作的简单方法是使用 Kendo UI Mobile 中内置的 MVVM 功能。创建一个模型作为 JS 对象，并将视图的 data-model 属性设置为此对象。现在单击提交按钮，只需使用 ajax 将此对象发送到您的服务器。这样你就减少了发送到服务器的数据量。

有关移动和 mVVM 集成的文档：http ://docs.kendoui.c​​om/getting-started/mobile/mvvm 。

于 2013-09-25T18:50:52.223 回答