2016-07-09 4 views
1

こんにちは私はaspxファイルにデータを送信するためにjQuery AJAXを使用しています。メソッドのjsonデータをポストし、aspxファイルで受信

$(document).ready(function() { 
    $('#openfuckingmodal').click(function() { 
     var id = $(this).attr('data-id'); 
     $.ajax({ 
      type: "POST", 
      url: "Video.aspx", 
      contentType: "application/x-www-form-urlencoded; charset=utf-8", 
      data: { 
       "videoid": "id" 
      }, 
      dataType: "json", 
      success: function(resultData) { 
       console.log(resultData); 
      }, 
      error: function(errordata) { 
       console.log(errordata); 
      } 
     }); 
    }); 
}); 

マイaspx.cs

protected void Page_Load(object sender, EventArgs e) { 
    string query = Request.QueryString[0]; 
    if (query != null) { 
     if (!IsPostBack) { 
      gvShow.DataSource = VideoBL.GetVideo(query); 
      gvShow.DataBind(); 
     } 
    } 
} 

しかし、私はこのエラーを取得しておく:ここに私のAJAXはある

System.ArgumentOutOfRangeException

An exception of type 'System.ArgumentOutOfRangeException' occurred in mscorlib.dll but was not handled in user code

Additional information: Index was out of range. Must be non-negative and less than the size of the collection.

答えて

2

を使用して投稿フォームからデータを取得することができます:

string query = Request.QueryString[0];

使用

あなたはロジック 。あなたは、AJAX呼び出しを行うことにより、 GridViewコントロールのデータソースを設定することはできません動作しませんバインディングあなたのデータを上記の二つの変更を行った後も

string query = Request.Form["videoid"];

3.Unfortunately。

サーバーサイドのクリックイベントを使用するようにコードを変更するか、サーバーロジックを変更してデータをAJAX関数に戻してループし、GridViewに追加します。例はBinding GridView using AJAXです。背後

コード:

public class MyVideo 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
} 

public partial class Video : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     if(!Page.IsPostBack) 
     { 
      gvShow.DataSource = new List<MyVideo> { new MyVideo { ID = 0, Name = "Initial..." } }; 
      gvShow.DataBind(); 
     } 
    } 

    [System.Web.Services.WebMethod] 
    public static List<MyVideo> GetVideos(string videoid) 
    { 
     MyVideo v1 = new MyVideo { ID = 1, Name = "Video 1" }; 
     MyVideo v2 = new MyVideo { ID = 1, Name = "Video 2" }; 
     MyVideo v3 = new MyVideo { ID = 3, Name = "Video 3" }; 

     var videos = new List<MyVideo> { v1, v2, v3 }; 
     return videos.Where(v => v.ID == 1).ToList();//Hardcoding for simplicity 
    } 
} 

.ASPX:

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script type="text/javascript"> 
     $(function() { 
      $('#modal').click(function() { 
       var id = $(this).attr('data-id'); 

       $.ajax({ 
        type: "POST", 
        url: "Video.aspx/GetVideos", 
        contentType: "application/json;charset=utf-8", 
        data: '{videoid:"' + id + '"}', 
        dataType: "json", 
        success: function (data) { 
         var videos = data.d; 
         $("#gvShow").empty(); 

         for (var i = 0; i < videos.length; i++) { 
          var id = videos[i].ID; 
          var name = videos[i].Name; 
          var tr = "<tr><td>" + id + "</td><td>" + name + "</td></tr>" 
          $("#gvShow").append(tr); 
         } 
         $('#myModal').modal('show'); 
        }, 
        error: function (errordata) { 
         console.log(errordata); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <a href="#" id="modal" data-id="2">Click me</a> 
     <div id="myModal" class="modal fade"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
         <h4 class="modal-title">Videos</h4> 
        </div> 
        <div class="modal-body"> 
         <asp:GridView ID="gvShow" runat="server"> 
         </asp:GridView> 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</body> 

出力:

Bind GridView using AJAX

0
このJavaScriptラインで

data: { "videoid": "id" }, 

あなたが送ります文字列"id"ではなくidを含む数字。したがって、このライン

gvShow.DataSource = VideoBL.GetVideo(query); 

あなたはおそらく

gvShow.DataSource = VideoBL.GetVideo("id"); 

を呼び出すか、空の文字列でそれを呼び出す

gvShow.DataSource = VideoBL.GetVideo(""); 

または私はあなたが実際にそこに送るかわかりません、そこにエラーメッセージが表示されます。

アドバイス、ラインによって、デバッグ、コードの行を...と私は、問題は、あなたのデータがリクエストクエリ文字列からデータを取得しようとしているということだと思うそのエラーとどのようにそれらを

0

を修正するために、すべてを見つけますフォームとしてサーバーにポスト、あなたはこれがクッキー、フォーム、クエリ文字列またはサーバー変数からデータを取得します

string query = Request["videoid"]; 

を使用して、あなたの投稿データを取得しようとすることができます。代わりに使用するのでは、

data: {"videoid": id} 

2.Secondly:またはあなたが1.Firstlyあなたがid変数を指すようにdataパラメータを変更する必要があるだけ

string query = Request.Form["videoid"]; 
関連する問題