SujataJK Ответов: 1

Как открыть всплывающее окно на ячейке gridview нажмите кнопку in ASP.NET с#


привет,
Здесь я gridview со столбцами ENTRYNO,ENTRYDT,DESCR,AMT,замечаниями и одним флажком.Изначально замечания пусты.Всякий раз, когда я нажимаю ячейку столбца замечаний, я должен открыть новое всплывающее окно и ввести замечания в элемент управления текстовым полем всплывающего окна и назначить обратно столбцу замечаний .Это требование я не получаю точного решения.
Пожалуйста, помогите мне.

Что я уже пробовал:

Именно это я и пытался сделать.

<asp:GridView runat="server" ID="gridView1" DataKeyNames="ENTRYNO" 
        AutoGenerateColumns="false" >
	<Columns>
	<asp:BoundField  DataField="ENTRYNO" HeaderText="ENTRYNO" />
	<asp:BoundField DataField="ENTRYDT" HeaderText="ENTRYDT" />
	<asp:BoundField DataField="DESCR" HeaderText="DESCR" />
	<asp:BoundField DataField="AMT" HeaderText="AMT" />
      <asp:TemplateField HeaderText="A">
           <ItemTemplate>
          <asp:CheckBox ID="ChkApproved" runat="server"   OnCheckedChanged="ChkApproved_CheckedChanged" AutoPostBack="true">
              </asp:CheckBox>
          </ItemTemplate>
          </asp:TemplateField>
	<asp:TemplateField HeaderText="Remarks">
	<ItemTemplate>
        <asp:Label ID="lblRemarksGrid" runat="server" Text="" Width="200Px"></asp:Label>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField HeaderText="">
	<ItemTemplate>
		<asp:LinkButton ID="lnkRemark" Text="Add Remark"  OnClick="lnkRemark_Click" runat="server"></asp:LinkButton>
	</ItemTemplate>
	</asp:TemplateField>
	</Columns>
</asp:GridView>

<asp:Label ID="lblmsg" runat="server"/>
<asp:Button ID="modelPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="modelPopup" PopupControlID="updatePanel"
CancelControlID="btnCancel" BackgroundCssClass="tableBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="updatePanel" runat="server" BackColor="White" Height="230px" Width="300px" style="display:none">
<table width="100%" cellspacing="4">
	<tr style="background-color:#33CC66">
	<td colspan="2"  align="center">Document Details</td>
	</tr>
	
	<tr>
		<td align="right">
		ENTER REMARKS:
		</td>
		<td>
		<asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine"/>
		</td>
	</tr>

	<tr>
		<td align="right" >
		<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update Data" onclick="btnModity_Click"/>
		</td>
		<td>
		<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
		</td>
	</tr>
</table>
</asp:Panel>

This is lnkRemark_Click event
 protected void lnkRemark_Click(object sender, EventArgs e)
	{
		this.ModalPopupExtender1.Show();
	}

and ChkApproved_CheckedChanged event 
 protected void ChkApproved_CheckedChanged(object sender, EventArgs e)
    {


        if (txtRemarks.Text == "")
        {
        }
        else
        {
            CheckBox chkStatus = sender as CheckBox;
            GridViewRow selectedrow = (GridViewRow)chkStatus.NamingContainer;
            foreach (GridViewRow row in gridView1.Rows)
            {
                Label lblRemarksGrid = (Label)selectedrow.FindControl("lblRemarksGrid");
                if (chkStatus.Checked == true)
                {
                    //  row.Cells[5].Text = txtRemarks.Text;
                    lblRemarksGrid.Text = txtRemarks.Text;
                }
                else
                {

                    lblRemarksGrid.Text = "";
                }
            }
        }
     
    }

Karthik_Mahalingam

использование javascript/jquery упростит вашу задачу.

SujataJK

Спасибо.
Пожалуйста, поделитесь реальной ссылкой или кодом

1 Ответов

Рейтинг:
2

Karthik_Mahalingam

Aspx-файл

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     
    <script>
        var selectedRow = undefined;
        function showpopup(obj) {
            var modal = document.getElementById('myModal');
            modal.style.display = "block"; 
            selectedRow = obj.parentElement.parentElement;
           
            var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
            var value = lbl.textContent;
            document.getElementById('txtRemarks').value = value;
        }
        function closepopup() {
            var modal = document.getElementById('myModal');
            modal.style.display = "none";
        }
        function okpopup() {
            debugger
            var modal = document.getElementById('myModal');
            modal.style.display = "none";
            if(selectedRow ){
                var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
                var value = document.getElementById('txtRemarks').value;
                lbl.textContent = value;
            }
        }
    </script>

    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 400px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s;
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0;
            }

            to {
                top: 0;
                opacity: 1;
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0;
            }

            to {
                top: 0;
                opacity: 1;
            }
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

        .modal-header {
            padding: 5px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 5px;
            height: 100px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">


        <asp:GridView runat="server" ID="gridView1" DataKeyNames="ENTRYNO"
            AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="ENTRYNO" HeaderText="ENTRYNO" />
                <asp:TemplateField HeaderText="A">
                    <ItemTemplate>
                        <asp:CheckBox ID="ChkApproved" runat="server"></asp:CheckBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Remarks">
                    <ItemTemplate>
                        <asp:Label ID="lblRemarksGrid" CssClass="clsRemarksGrid" runat="server" Text="" Width="200Px"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkRemark" Text="Add Remark" OnClientClick="showpopup(this); return false" runat="server"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <div class="modal-header">
                    <span onclick="closepopup()" class="close">×</span>
                    <h2 style="margin: 3px;">Modal Header</h2>
                </div>
                <div class="modal-body">
                    Remarks:
                    <asp:TextBox ID="txtRemarks" runat="server"></asp:TextBox>
                    <br />
                    <button onclick="okpopup(); return false;">Ok</button>
                </div>

            </div>
    </form>
</body>
</html>


protected void Page_Load(object sender, EventArgs e)
      {

          if (!Page.IsPostBack)
          {

              DataTable dt = new DataTable();
              dt.Columns.Add("ENTRYNO");
              for (int i = 0; i < 5; i++)
                  dt.Rows.Add(i);
              gridView1.DataSource = dt;
              gridView1.DataBind();



          }
      }


SujataJK

@Картик
Я пробовал ваше решение, но показывает мне эту ошибку
JavaScript runtime error: объект не поддерживает свойство или метод 'getElementsByClassName' at
var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]

Karthik_Mahalingam

Вы уже заявили об этом

var selectedRow = undefined;

SujataJK

да.когда я набираю selectedRow. тогда он не показывает такой метод ;то есть getElementByclassName()

Karthik_Mahalingam

добавить это

if(selectedRow) {
var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
ВАР значение = ЛБЛ.текстового содержимого;
document.getElementById('txtRemarks').value = значение;
}

SujataJK

Опять же это дает то же самое исключение - JavaScript runtime error: Object не поддерживает свойство или метод 'getElementsByClassName' AT

var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]

Karthik_Mahalingam

опубликуйте свой код.
вы добавили это

                        <asp:Label ID="lblRemarksGrid" CssClass="clsRemarksGrid" runat="server" Text="" Width="200Px">

SujataJK

Проверить это,
var selectedRow = undefined;
функция showpopup(obj) {
var modal = document.getElementById('myModal');
modal.style.display = "блок";
selectedRow = obj-файлы.parentElement.parentElement;
if (selectedRow) {
var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
ВАР значение = ЛБЛ.метод toString;

document.getElementById('txtRemarks').value = значение;
}
}
функция closepopup() {
var modal = document.getElementById('myModal');
modal.style.display = "нет";
}
функция okpopup() {
отладчик
var modal = document.getElementById('myModal');
modal.style.display = "нет";
if (selectedRow) {
var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
документ ВАР значение=.метода getElementById('txtRemarks').значение;
ЛБЛ.текстового содержимого = значение;
}
}



/* Модальный (фон) */
.модальный {
дисплей: нет; /* скрыт по умолчанию */
положение: фиксированное; /* оставайтесь на месте */
z-индекс: 1; /* сидеть сверху */
padding-top: 100px; /* расположение коробки */
слева: 0;
топ: 0;
ширина: 100%; /* полная ширина */
высота: 100%; /* полная высота */
переполнение: авто; /* включить прокрутку при необходимости */
background-color: rgb(0,0,0); /* резервный цвет */
цвет фона: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
}

/* Модальный Контент */
.модально-содержание {
положение: относительное;
цвет фона: #fefefe;
маржа: авто;
прокладка: 0;
граница: 1px solid #888;
ширина: 400px;
коробка-тени: 0 в 4px 0 8 Пикс. формата RGBA(0,0,0,0.2),0 6px в 20px 0 формате RGBA(0,0,0,0.19);
-webkit-анимация-название: animatetop;
-webkit-анимация-продолжительность: 0.4 с;
анимация-название: animatetop;
анимация-продолжительность: 0,4 с;
}

/* Добавить Анимацию */
@-webkit-keyframes animatetop {
от {
топ: -300px;
непрозрачность: 0;
}

к {
топ: 0;
непрозрачность: 1;
}
}

animatetop @ключевых кадров {
от {
топ: -300px;
непрозрачность: 0;
}

к {
топ: 0;
непрозрачность: 1;
}
}

/* Кнопка Закрытия */
.закрывать {
белый цвет;
поплавок: правый;
размер шрифта: 28px;
шрифт-вес: жирный;
}

.закрыть:наведите курсор мыши,
.закрыть:фокус {
цвет: #000;
текстовое оформление: отсутствует;
курсор: указатель;
}

.модально-заголовок {
прокладка: 5px;
цвет фона: #5cb85c;
белый цвет;
}

.модально-тело {
прокладка: 5px;
высота: 100px;
}

.модальный нижний колонтитул {
прокладка: 2px 16px;
цвет фона: #5cb85c;
белый цвет;
}
<asp:GridView runat="server" ID="gridView1" DataKeyNames="ENTRYNO"
AutoGenerateColumns="false">
<колонки>
<asp:BoundField DataField="ENTRYNO" HeaderText="ENTRYNO" />
<asp:TemplateField HeaderText="A">
<itemtemplate>
&ЛТ;АСП:чекбокс с ID="ChkApproved" атрибут runat="сервер"и GT;


<asp:TemplateField HeaderText="Примечания">
<itemtemplate>
<itemt

Karthik_Mahalingam

опубликуйте код gridview. и код за кодом.

SujataJK

если (!страница.IsPostBack)
{

DataTable dt = новый DataTable();
ДТ.колонны.Добавить("ENTRYNO");
for (int i = 0; i < 5; i++)
ДТ.Строк.Добавить(я);
управления gridview1.Источник данных = ДТ;
управления gridview1.Привязку();

}

Karthik_Mahalingam

код aspx разметки gridview.

SujataJK

<asp:GridView runat="server" ID="gridView1" DataKeyNames="ENTRYNO"
AutoGenerateColumns="false">
<колонки>
<asp:BoundField DataField="ENTRYNO" HeaderText="ENTRYNO" />
<asp:TemplateField HeaderText="A">
<itemtemplate>
&ЛТ;АСП:чекбокс с ID="ChkApproved" атрибут runat="сервер"и GT;
<asp:TemplateField HeaderText="Примечания">
<itemtemplate>
&ЛТ;АСП:метка идентификатор="lblRemarksGrid" CssClass="clsRemarksGrid" атрибут runat="сервер" текст="" ширина="200 пикселей"&ГТ;
<asp:TemplateField HeaderText="">
<itemtemplate>
&ЛТ;как ASP:LinkButton элемент ID="lnkRemark" текст="добавить замечание" OnClientClick="значение showpopup(этот); возвратить false" атрибут runat="сервер"и GT;




Karthik_Mahalingam

просто создайте новую страницу , добавьте мой код и проверьте.

SujataJK

есть ли какие-либо проблемы из-за версии internet explorer?

Karthik_Mahalingam

работает ли он в chrome?

SujataJK

в google chrome всплывающее окно исчезает в течение секунды, так что я не могу проверить

Karthik_Mahalingam

Значит, обратная связь происходит..

Karthik_Mahalingam

проверьте эту строку

  <asp:LinkButton ID="lnkRemark" Text="Add Remark" OnClientClick="showpopup(this); return false" runat="server">

SujataJK

Это мой код для этого

<asp:TemplateField HeaderText="">
<itemtemplate>
&ЛТ;как ASP:LinkButton элемент ID="lnkRemark" текст="добавить замечание" OnClientClick="значение showpopup(этот); возвратить false" атрибут runat="сервер"и GT;

Karthik_Mahalingam

заменить кнопки связь с

<a href="#">Add Remark</a>


добавлять onclick="showpopup(this)" к вышесказанному

не в состоянии объединить оба, текст становится обрубленным

SujataJK

когда я заменяю приведенный выше код, то также он дает ту же ошибку - JavaScript runtime error: Object не поддерживает свойство или метод 'getElementsByClassName' AT
var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]

Karthik_Mahalingam

добавьте свой полный aspx и aspx-файл.код для CS здесь и поделиться ссылкой
https://plnkr.co/edit/?p=catalogue

SujataJK

какая от этого польза https://plnkr.co/edit/?p=catalogue линк?

Karthik_Mahalingam

вы публикуете код по частям и частям,
в ссылке вы должны разместить полный код. чтобы я мог увидеть, где ты допустил ошибку

Member 12953654

Не могли бы вы, пожалуйста, дать мне знать, как я могу достичь той же функциональности для 2 coloumns?
т. е. на каждом текстовом поле 2column всплывающее окно должно быть видимым

Karthik_Mahalingam

добавьте это для другой кнопки/ столбца

OnClientClick="showpopup(this); return false"