0

この質問が繰り返される可能性があることはわかっていますが、クエリが異なることを説明させてください。ページにドロップダウンがあり、ドロップダウンリストで値を選択して、送信ボタンをクリックします..送信ボタンをクリックする必要があります選択したドロップダウン リスト値のレコードのリストであるタグの部分ビューを読み込みます。

私はこれを試しました：

$("#btnclick").click(function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Content("~/Search/MDLNoDataList")',
                data: mdlno,
                success: function (data) { $("#viewlist").innerHtml = data; }
            });
        });

しかし、結果が得られませんそして、私はこれらの多くのjqueryプラグインを使用しています

<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
4

3 に答える 3

3

私が正しく理解している場合、以下はあなたがする必要があることです。

HTMLの例：

<div id="records">
</div>
<select id="ddlRecordType">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<input type="submit" value="Load Records" id="btn-submit" />

jQueryコード

$(document).ready(function(){
 $('#btn-submit').click(function(){
  var selectedRecVal=$('#ddlRecordType').val();
   $('#records').load('/LoadRecords?Id='+selectedRecVal);
   return false; // to prevent default form submit
 });
});

ここで、 ？Id =は、ドロップダウンで選択されたアイテムを取得するためにサーバーに渡されるクエリ文字列パラメーターです。

編集：質問の内容が最初の投稿から変更されたため、以下の回答が追加されました

   $("#btnclick").click(function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("MDLNoDataList","Search")',
            data: mdlno,
            success: function (data) { 
              // $("#viewlist")[0].innerHtml = data; 
               //or 
               $("#viewlist").html(data);
             }
        });
      return false; //prevent default action(submit) for a button
    });
于 2013-02-09T11:24:48.510 に答える
3

クリック ハンドラから false を返して、フォーム送信のデフォルト アクションをキャンセルしてください。

$("#btnclick").click(function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("MDLNoDataList", "Search")',
        data: mdlno,
        success: function (data) { 
            $("#viewlist").html(data); 
        }
    });

    return false; // <!-- This is the important part
});

また、Razor ではなく WebForms ビュー エンジンを使用している場合は、正しい構文を使用して URL を指定してください。

$("#btnclick").click(function () {
    $.ajax({
        type: 'POST',
        url: '<%= Url.Action("MDLNoDataList", "Search") %>',
        data: mdlno,
        success: function (data) { 
            $("#viewlist").html(data); 
        }
    });

    return false; // <!-- This is the important part
});

false を返さない場合、送信ボタンをクリックするとフォームがサーバーに送信されるだけで、ブラウザーはページからリダイレクトされ、明らかに AJAX 呼び出しを実行する時間がありません。

また、元のコードにいくつかの改善を加えたことにも気付くでしょう。

  • アプリケーションで定義されたルートを考慮するために、サーバー側コントローラー アクションを指すときに Url.Action ヘルパーを使用します。
  • 特定の要素のコンテンツを設定する.html()代わりに、jQuery のメソッドを使用します。innerHTML
于 2013-02-09T12:51:08.943 に答える
0

この目的には AJAX が必要です。

$.get(url, data, function(data) { $(element).append(data) });

漠然とした部分図。

element {
    overflow:hidden;
}
于 2013-02-09T11:06:32.933 に答える