2013-06-12 41 views
5

Tôi đã cố gắng cố gắng liên kết một GridView ASP.NET với một hộp thoại JQuery Mobile, được sử dụng để chỉnh sửa dữ liệu trong Gridview.ASP.NET Gridview với Hộp thoại Di động JQuery

Mục tiêu của tôi là sử dụng GridView để hiển thị dữ liệu. Người dùng sẽ nhấp vào một hàng và một hộp thoại sẽ mở một hộp thoại có FormView, người dùng có thể chỉnh sửa dữ liệu cho hàng đã chọn. Tôi đã nhận được điều này để làm việc tốt với một hộp thoại JQuery UI, nhưng khi tôi chuyển sang Jquery Mobile, mọi thứ sụp đổ.

Ngay bây giờ, hộp thoại sẽ nhấp nháy trên màn hình trong một giây nếu tôi chạy trên thiết bị iOS hoặc Blackberry. Nó hoạt động tốt nếu tôi chạy nó trong Windows. Tôi không chắc mình đang làm gì sai.

Đây là mã của tôi cho trang aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyTest.aspx.cs" Inherits="MySite.MyTest" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Test</title> 
    <style type="text/css"> 
     .hover 
     { 
      background-color: Gray; 
     } 
    </style> 
    <script type="text/javascript"> 
    function clickRow() { 
     //Had to put in $(document).ready or I got PostBack errors. 
      $(document).ready(function() { 
       $.mobile.changePage("#dialogPage", 'pop', true, true); 
      }); 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <div data-role="page" id="mainpage"> 
     <div data-role="content"> 
     ...GridView goes here... 
     <a href="#dialogPage" id="lnkDialog" data-rel="dialog">Click Me</a> 
    </div> 
    </div>   
    <div data-role="dialog" id="dialogPage"> 
    <div data-role="content"> 
     ... FormView goes here....   
    </div> 

    </form> 

</body> 
</html> 

Và đây là một số các mã sau:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.DataRow) 
     { 
      //Allows user to click/tap anywhere on gridview row to trigger SelectIndexChange 
      e.Row.Attributes["onmouseover"] = "this.oldClass = this.className;this.className='hover';"; 
      e.Row.Attributes["onmouseout"] = "this.className=this.oldClass;"; 
      e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex.ToString()); 
     } 
    } 

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) 
    { 
     //This should open dialog 
     ClientScript.RegisterStartupScript(typeof(Page), "test", "clickRow()",true); 
    } 

Tôi nghĩ rằng vấn đề là với cách tôi quấn $.mobile.changePage() chức năng trong chức năng $(document).ready(). Nếu tôi không làm điều đó, tôi nhận được lỗi postback. Tôi không chắc chắn đúng cách để làm điều này.

Nếu tôi cố mở hộp thoại bằng liên kết <a data-rel="dialog"></a>, nó hoạt động tốt trên tất cả các thiết bị.

Cảm ơn lời khuyên nào.

+0

Chỉ cần thông tin, bạn đang thiếu một khung mở trên (tài liệu) .ready .... Có lẽ không phải vậy, nhưng tôi không thể không thông báo, và tôi biết tôi đã dành quá đủ thời gian tìm kiếm cho các chi tiết nhỏ nhỏ như vậy. – RJB

+0

Cảm ơn. Tôi vừa xóa quá nhiều khi tôi rút ngắn mã một chút trước khi đăng. Bản gốc có khung. – user2480262

Trả lời

0

Tôi nhớ đã gặp phải tình huống tương tự. Điều cần ghi nhớ là khi giao dịch với jQuery mobile, các thẻ script nằm trong đầu không được tải trên các trang tiếp theo. Hãy thử di chuyển khối tập lệnh của bạn vào trong thẻ đóng vai trò là trang.

+0

Dưới đây là một câu trả lời được đăng khác để giải thích rõ hơn: http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files –

Các vấn đề liên quan