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 に答える