Как я могу показать свои данные редактирования в модальном js
Поэтому я пытаюсь реализовать операции crud только с кодом, и у меня возникает проблема, когда я нажимаю кнопку Edit [linkButton] ничего не происходит, страница просто обновляется. Кнопка Добавить нового пользователя работает отлично
Вот мой html код
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>ASP CRUD</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAddUsers" runat="server" Text="Add New Users" />
<br /><br />
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Add Edit Records</p><hr />
<table>
<tr>
<td>
<asp:HiddenField ID="hfUserId" runat="server" />
</td>
<td colspan="2">
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Level"></asp:Label>
</td>
<td colspan="2">
<asp:DropDownList ID="ddlLevel" runat="server">
<asp:ListItem>Level 2</asp:ListItem>
<asp:ListItem>Level 3</asp:ListItem>
<asp:ListItem>Level 4</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
<asp:Button ID="btnClear" runat="server" Text="Clear" onclick="btnClear_Click" />
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<asp:Label ID="lblSuccessMessage" runat="server" Text="" ForeColor="Green"></asp:Label>
</td>
</tr>
</table>
</div>
</div>
<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" EmptyDataText="No Recodrs have been Inserted...">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkView" CommandArgument='<%# Bind("userId") %>' OnClick="lnkView_Click" OnClientClick="return modal('modal','close','lnkView')" runat="server">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" CommandArgument='<%# Bind("userId") %>' OnClick="lnkDelete_Click" runat="server">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="userName" HeaderText="userName" />
<asp:BoundField DataField="userEmail" HeaderText="userEmail" />
<asp:BoundField DataField="userLevel" HeaderText="userLevel" />
</Columns>
</asp:GridView>
</div>
<script type="text/javascript" src="main.js"></script>
</form>
</body>
</html>
Вот мой Javascript код
function modal(_modal,_span,_btnModal) {
var modal = document.getElementsByClassName(_modal)[0];
var span = document.getElementsByClassName(_span)[0];
var btnModal = document.getElementById(_btnModal);
btnModal.onclick = function () {
modal.style.display = "block";
return false;
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
}
}
modal("modal","close","btnAddUsers");
Вот мой код c#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
display();
}
}
SqlConnection con = new SqlConnection(@connection_string);
//Display All Records on the GridView
void display() {
if (con.State == ConnectionState.Closed) {
con.Open();
SqlDataAdapter da = new SqlDataAdapter("ViewAllRecords",con);
da.SelectCommand.CommandType = CommandType.StoredProcedure;
DataTable dt = new DataTable();
try
{
da.Fill(dt);
gvUsers.DataSource = dt;
gvUsers.DataBind();
con.Close();
}
catch (Exception ex) {
Response.Write(ex.Message);
}
}
}
//Clear All Input fields
void clear() {
lblSuccessMessage.Text = txtEmail.Text = txtName.Text = "";
ddlLevel.Text = "Level 2";
hfUserId.Value = "";
txtName.Focus();
btnSave.Text = "Save";
}
protected void btnClear_Click(object sender, EventArgs e)
{
clear();
}
protected void lnkView_Click(object sender, EventArgs e) {
int conId = Convert.ToInt32((sender as LinkButton).CommandArgument);
if (con.State == ConnectionState.Closed) {
con.Open();
SqlDataAdapter da = new SqlDataAdapter("ViewById",con);
da.SelectCommand.CommandType = CommandType.StoredProcedure;
hfUserId.Value = conId.ToString();
da.SelectCommand.Parameters.AddWithValue("@userId",conId);
DataTable dt = new DataTable();
try
{
da.Fill(dt);
txtName.Text = dt.Rows[0]["userName"].ToString();
txtEmail.Text = dt.Rows[0]["userEmail"].ToString();
ddlLevel.Text = dt.Rows[0]["userLevel"].ToString();
btnSave.Text = "Update";
}
catch (Exception ex) {
Response.Write(ex.Message);
}
}
}
protected void lnkDelete_Click(object sender, EventArgs e)
{
int conId = Convert.ToInt32((sender as LinkButton).CommandArgument);
if (con.State == ConnectionState.Closed) {
con.Open();
SqlCommand command = new SqlCommand("DelRecords",con);
command.CommandType = CommandType.StoredProcedure;
hfUserId.Value = conId.ToString();
command.Parameters.AddWithValue("@userId",Convert.ToInt32(hfUserId.Value));
try
{
command.ExecuteNonQuery();
lblSuccessMessage.Text = "Records Deleted";
con.Close();
clear();
display();
}
catch (Exception ex) {
Response.Write(ex.Message);
}
}
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (con.State == ConnectionState.Closed) {
con.Open();
SqlCommand command = new SqlCommand("InsUpdRecords",con);
command.CommandType = CommandType.StoredProcedure;
command.Parameters.AddWithValue("@userId",hfUserId.Value==""?0:Convert.ToInt32(hfUserId.Value));
command.Parameters.AddWithValue("@userName",txtName.Text.Trim());
command.Parameters.AddWithValue("@userEmail",txtEmail.Text.Trim());
command.Parameters.AddWithValue("@userLevel",ddlLevel.SelectedItem.ToString());
try
{
command.ExecuteNonQuery();
con.Close();
if (hfUserId.Value == "0")
{
lblSuccessMessage.Text = txtName.Text + ",your Records have been successfully saved...";
display();
}
else {
lblSuccessMessage.Text = txtName.Text + ",your Records have been succesfully Updated...";
display();
}
}
catch (Exception ex) {
Response.Write(ex.Message);
}
}
}
}
Что я уже пробовал:
Я пытался вызвать модальную функцию show в своем бэкэнде, но она все еще не давала никаких результатов, я пытался вызвать ее нормально в тегах скрипта, и она все еще не работала
PRAKASH9
Вы закончили с отладкой или нет? Просто нажмите F12 и поместите свою точку отладки во вкладку debbuger внутри модальной функции, чтобы вы могли легко определить, где ваш код разбился.
Judah.zama
Я пытался, но это ничего мне не дает.
PRAKASH9
вы должны отлаживать вот так
https://prnt.sc/lww7jw
Я просто думаю, что ваш код будет разбит отсюда
ВАР btnModal = документ.метода getElementById(_btnModal);
Вы передали аргумент 'lnkView', как показано ниже
&ЛТ;как ASP:LinkButton элемент ID="lnkView" CommandArgument='&л;%# Персонализация("идентификатор пользователя") %&ГТ;' функция onclick="lnkView_Click" OnClientClick="возвращение модальные('модальный','закрыть','lnkView')" атрибут runat="сервер"и GT;редактировать
но ваша LinkButton находится внутри gridview, поэтому идентификатор этой кнопки изменился, и вы не можете войти в модальную функцию. поэтому я думаю, что ваш код будет разбит с
_btnModal