2014-12-11 14 views
5

Tôi có thẻ neo để cập nhật hàng trong chế độ xem lưới. Tôi đã đặt hộp kiểm trong GridView. Khi người dùng chọn hộp kiểm và nhấp vào nút cập nhật, hàng hiện tại sẽ mở trong cửa sổ bật lên ..Nhận hàng đã chọn trong cửa sổ bật lên để Chỉnh sửa và cập nhật

Ngay bây giờ cửa sổ bật lên đang mở nhưng không phải với các hàng đã chọn có dữ liệu hiện có. Xin vui lòng xem mã để bạn tham khảo: -

<a id="popup" onclick="div_show()" class="btn btn-success"><i class="fa fa-plus-circle"></i>Add new</a> 

<a href="javascript:;" class="btn btn-primary" runat="server" onclick="div_show()" ><i class="fa fa-refresh"></i>Update</a> 

Cũng xem mã GridView để bạn tham khảo: -

<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" 
      AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found" 
      OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting" 
      PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating" 
      OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit"> 
      <AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" /> 
      <Columns> 
       <asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td"> 
        <ItemTemplate> 
         <asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td"> 
        <ItemTemplate> 
         <asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png"> 
        <ControlStyle Height="20px" Width="20px"></ControlStyle> 
       </asp:CommandField> 
      </Columns> 
     </asp:GridView> 

xin vui lòng giúp đỡ, nó được kể từ hai ngày tôi stucked nhưng không thể nứt nó .

Mã cho ràng buộc GridView: -

private void BindGrid() 
    { 
     string strQuery = "select Id,page_title,page_description,meta_title,meta_keywords,meta_description,Active from tbl_Pages ORDER By Id DESC"; 
     SqlCommand cmd = new SqlCommand(strQuery); 
     DataTable dt = GetData(cmd); 
     grdCSRPageData.DataSource = dt; 
     grdCSRPageData.DataBind(); 
    } 

Xem thêm các phương pháp Page_load; -

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!IsPostBack) 
     { 
      BindGrid(); 
     } 
    } 
+0

nơi bạn ràng buộc dữ liệu vào GridView –

+0

@POHH: Tôi ràng buộc mục 'page_load' –

+0

bài bạn ràng buộc phương pháp ở đây vì vậy chúng tôi sẽ phải mất một nhìn vào nó –

Trả lời

2

Đây là giải pháp sử dụng ajax. Khi bạn kiểm tra một hộp kiểm và bấm vào nút cập nhật, mã jquery sẽ tìm kiếm hộp kiểm đã chọn trong GridView và khi nó tìm thấy điều này sẽ gán giá trị cho các hộp văn bản sẽ xuất hiện trong cửa sổ bật lên.

Ngoài ra, bạn phải lưu trữ id trong trường ẩn trên cơ sở truy vấn cập nhật nào sẽ chạy hoặc bạn có thể sử dụng bất kỳ trường nào cập nhật sẽ xảy ra.

Bây giờ, khi bạn nhấp vào nút cập nhật trong cửa sổ bật lên, cuộc gọi ajax sẽ được gửi sẽ nhận giá trị cập nhật từ hộp văn bản và gửi tới webmethod.

Trong webmethod, bạn sẽ chạy truy vấn cập nhật của mình.Và khi ajax thực hiện thành công, bạn sẽ làm trống các giá trị của hộp văn bản trong cửa sổ bật lên và tải lại trang để xem các thay đổi trong chế độ xem lưới.

Html popup

<div id="Popup"> 
    <table> 
     <tr> 
      <td> 
       Category 
      </td> 
      <td> 
       <input type="text" id="Category" /> 
      </td> 

     </tr> 
     <tr> 
      <td> 
       Items 
      </td> 
      <td> 
       <input type="text" id="items" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" value="Update" onclick="Openselected()" /> 
      </td> 
      <td><input type="hidden" id="hdnID" /></td> 
     </tr> 

    </table> 
</div> 

này không được hiển thị dưới dạng bật lên nhưng bạn có thể sử dụng bất kỳ plugin để hiển thị nó trong cửa sổ bật lên như blockui, thoại Fancybox jQueryUI hoặc bất kỳ một trong có sẵn.

Jquery Mã

Chức năng này sẽ gán giá trị của hàng đã chọn trong các hộp thoại mở popup.

function Openselected() 
    { 
     $('table[id$=grdTest] tr').each(function() { 

      if ($(this).find('input[type=checkbox]').is(':checked')) { 
       $('#Category').val($(this).children('td').eq('02').text()); 
       $('#items').val($(this).children('td').eq('03').text()); 
       $('#hdnID').val($(this).children('td').eq('01').text()); 
      } 


     }); 
    } 

Chức năng này sẽ gửi cuộc gọi ajax với các giá trị cập nhật để WebMethod và thành công textbox trống của cửa sổ bật lên và tải lại trang để xem những thay đổi

function UpdateGrid() 
    { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "Default.aspx/UpdateDB", 
      data: JSON.stringify({ category:$('#Category').val() , items: $('#items').val(),id:$('#hdnID').val() }), 
      dataType: "json", 
      async: false, 
      success: function (data) { 
       $('#Category').val(""); 
       $('#items').val(""); 
       $('#hdnID').val(""); 
       window.location.reload(true); 

      }, 
      error: function (err) { 
       alert(err.responseText); 
      } 

     }); 
    } 

Đây là WebMethod

[WebMethod] 
public static string UpdateDB(string category, string items,int id) 
{ 
    //Your logic of updating db.Here i am updating on basis of id you can use any feild of your choice   
    return "success"; 

} 

Đây chỉ là một hàng theo yêu cầu của bạn.

+0

Hãy để chúng tôi [tiếp tục thảo luận này trong trò chuyện] (http://chat.stackoverflow.com/rooms/67305/discussion-between-rahul-sutar-and-mairaj-ahmad). –

+0

@RahulSutar there? – Mairaj

+0

Vâng Tôi chỉ ở đây –

0

Kiểm tra cho các hàng đã được lựa chọn từ GridView trong phương pháp RowDataBound. Các hàng đã chọn hoặc trong trường hợp của bạn, hãy kiểm tra các hàng đã đánh dấu có thể được lấy trong phương thức này.

của họ rất nhiều tài liệu tham khảo có sẵn ở đây .. bạn có thể sử dụng một trong How to check if any row is selected from GridView?

0

bạn có thể có một cái nhìn tại đây có thể là bạn có thể sử dụng được cung cấp bởi modelpopupextenderajaxcontroltoolkit

đi qua ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

+0

Tôi đã đi qua tài liệu tham khảo này, nhưng wasnt succeded. Bạn có thể giúp nó? –

4

Bạn có thể thử điều này bằng cách sử dụng AjaxControlToolKit.

Thay GridView bạn sự kiện này handler:

OnRowCommand="grdCSRPageData_RowCommand" 

Nơi này sau khi bạn GridView:

<asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <asp:Panel ID="pnlModal" runat="server" BorderWidth="1" Style="display:none;"> 
      <table> 
       <tr> 
        <td>page_title</td> 
        <td><asp:TextBox ID="txtPageTitle" runat="server" /></td> 
       </tr> 
       <tr> 
        <td>page_description</td> 
        <td><asp:TextBox ID="txtPageDescription" runat="server" /></td> 
       </tr> 
      </table> 
      <asp:Button ID="btnOK" runat="server" Text="OK" /> 
      <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> 
     </asp:Panel> 
    </ContentTemplate> 
</asp:UpdatePanel> 
<asp:Button ID="btnModal" runat="server" Style="display:none;"/> 
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlModal" TargetControlID="btnModal" OkControlID="btnOK" CancelControlID="btnCancel" /> 

Trong mã sau:

protected void grdCSRPageData_RowCommand(object sender, GridViewCommandEventArgs e) 
{ 
    if (e.CommandName == "Edit") 
    { 
     GridViewRow gvRow = grdCSRPageData.Rows[Convert.ToInt32(e.CommandArgument)]; 
     txtPageTitle.Text = gvRow.Cells[0].Text; 
     txtPageDescription.Text = gvRow.Cells[1].Text; 

     upModal.Update(); 
     mpe.Show(); 
    } 
} 

protected void grdCSRPageData_RowEditing(object sender, GridViewEditEventArgs e) 
{ 
    grdCSRPageData.EditIndex = -1; 
    BindGrid(); 
} 

Tôi nghĩ rằng bạn không cần để kiểm tra hàng nào bạn muốn chỉnh sửa, bạn đã có CommandField trong của bạn GridView. Bạn chỉ cần nhấp vào hình ảnh chỉnh sửa và cửa sổ bật lên phương thức được điền dữ liệu từ GridView (từ hàng bạn đang chỉnh sửa).

+0

Nhận xét không dành cho thảo luận mở rộng; cuộc hội thoại này đã được [chuyển sang trò chuyện] (http://chat.stackoverflow.com/rooms/67125/discussion-on-answer-by-king-code-get-selected-row-in-a-pop-up- cho-edit-và-upda). – Taryn

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