How do I show my edit data in a js modal

Question

0.00/5 (No votes)

See more:

So I am trying to implement crud operations with code only and I am experiencing a problem, when I click my Edit [linkButton] nothing happens the page just refreshes. The Add New user button works perfectly

Here is my html code

<%@ 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>

Here is my Javascript code

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");

Here is my c# code

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);
            }
        }
    }
}

What I have tried:

I have tried calling the modal show function in my back-end but it still yielded no results, I tried calling it the function normally in script tags and it still didn't work

Posted 18-Dec-18 15:27pm

Judah.zama

Updated 20-Dec-18 15:18pm

ChauhanAjay

v3

Add a Solution

Comments

PRAKASH9 19-Dec-18 2:08am

Have you done with debug or not? Just hit F12 and put your debug point in debbuger tab inside modal function so you can easily identify where is your code crashed.

Judah.zama 19-Dec-18 2:51am

I have tried but it gives me nothing

PRAKASH9 19-Dec-18 4:48am

you have to debug like this
https://prnt.sc/lww7jw

I just think your code will be crashed from here

var btnModal = document.getElementById(_btnModal);

You have passed 'lnkView' argument like below

<asp:LinkButton ID="lnkView" CommandArgument='<%# Bind("userId") %>' OnClick="lnkView_Click" OnClientClick="return modal('modal','close','lnkView')" runat="server">Edit

but your LinkButton is inside gridview so id of that button changed and you cann't get in modal function. so i think your code will be crashed from
_btnModal

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2018-12-20T15:18:00

A LinkButton causes a page to postback that's why your modal created from a JavaScript function will be lost. Try to do something like this instead: