如何将文本框上键入的数据从模态插入数据库

Posted 2023-03-31

【中文标题】如何将文本框上键入的数据从模态插入数据库

【英文标题】：How to insert data typed on a TextBox from modal into database

【发布时间】：2021-10-29 11:43:38

【问题描述】：

我有一个 javascript 模式，它在单击按钮时打开，并且有两个文本框和一个按钮。该按钮的任务是将已键入文本框中的数据插入数据库。但是，我不知道为什么，当我单击按钮时，它只是刷新了我的页面并且数据没有插入到数据库中。我还在 try/catch 块中包装了两个警报，因此如果操作成功，则会出现一个，如果不成功，则会出现另一个，但由于某种原因，单击按钮后它们都没有出现（操作不成功后的警报需要弹出向上）。我已经搜索了整个互联网，但我不知道为什么在我的某些情况下我找不到任何东西（大多数解决方案都是针对 php 的）。

如何使模态框上的按钮起作用，并从文本框中收集数据并插入到数据库中？

这里是模态的 HTML 代码：

<i class="fas fa-info-circle" id="info"></i>
<div class="popup" id="popup">
  <div class="modal-container" id="modal_container">
    <div class="popup_left">
      <div class="popup-img_container">
        <img
          src="img/database_system.jpg"
          
          class="popup_img"
        />
      </div>
    </div>
    <div class="popup_right">
      <div class="right_content">
        <h1>Can't reach me online?</h1>
        <p>
          Please type your e-mail and provide a brief explanation of your
          intention/purpose of contacting.
        </p>
        <form method="post" enctype="multipart/form-data">
          <asp:TextBox
            ID="email_textbox"
            CssClass="popup_form"
            placeholder="Please enter your e-mail"
            runat="server"
            Required="required"
          ></asp:TextBox>
          <asp:RegularExpressionValidator
            ID="validator1"
            runat="server"
            ErrorMessage="Invalid character, your e-mail address must contain @"
            ControlToValidate="email_textbox"
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
          ></asp:RegularExpressionValidator>
          <asp:TextBox
            ID="email_message"
            CssClass="popup_form"
            placeholder="Message"
            runat="server"
            Required="required"
          ></asp:TextBox>
          <asp:Button
            ID="Message_button"
            runat="server"
            Text="Send"
            type="button"
            OnClick="Message_button_Click"
          />
        </form>
      </div>
    </div>
    <button id="close" type="button">
      <div class="popup_close">
        <svg>
          <use xlink:href="img/sprite.svg#icon-cross"></use>
        </svg>
      </div>
    </button>
  </div>
</div>

这是 C# 代码：

SqlConnection con = new SqlConnection(@"Data Source=;Initial Catalog=Contacts;Persist Security Info=True;User ID=;Password=");
    protected void Message_button_Click(object sender, EventArgs e)
    
        con.Open();
        SqlCommand cmd = con.CreateCommand();
        cmd.CommandType = System.Data.CommandType.Text;
        cmd.CommandText = "INSERT INTO ContactsTable VALUES ('"+email_textbox.Text+"','"+email_message.Text+"')";
        cmd.ExecuteNonQuery();

        try
        
            script += successMessage;
            script += "');";
            ClientScript.RegisterStartupScript(this.GetType(), "SuccessMessage", script, true);
        
        catch (Exception)
        

            script += dbFailMessage;
            script += "');";
            ClientScript.RegisterStartupScript(this.GetType(), "dbFailMessage", script, true);
        
        email_textbox.Text = "";
        email_message.Text = "";
    

这是 JavaScript 代码：

const info = document.getElementById('info');
const popup = document.getElementById('popup');
const close = document.getElementById('close');

info.addEventListener('click', () => 
   popup.classList.add('show');
);

close.addEventListener('click', () => 
   popup.classList.remove('show');
);

感谢您的帮助。

【参考方案1】：

好的，这里有一些问题。

首先，不太清楚您使用什么 JavaScirpt 库来弹出该对话框 - 它们有很多。它有点像引导程序，但肯定还有更多。

但是，让我们保持简洁。我将使用 jQuery.UI（因为 99% 的网站已经有 jQuery，添加 jQuery.UI 库似乎是合理的）。

那么，这将如何运作？

好的，我们将弹出对话框。如果用户点击取消，那么我们只是关闭（关闭）对话框。如果用户点击添加，那么我们的普通 jane 按钮（在该弹出对话框中）将执行回发并像任何其他简单按钮一样运行代码。

因为那个普通的简按钮会回发，所以对话框会折叠并为我们关闭。

所以，假设我们有这个标记：

        <asp:Button ID="cmdAddHotel" runat="server" Text="Add a Hotel" OnClientClick="popaddhotel();return false"/>

        <div id="AddHotelPop" style="text-align:right;display:none">

            <p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
            <p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
            <p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
            <p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
            <p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
            <p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>

            <p>
                <asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
                <asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
                    OnClientClick="MyClose();return false"/>
            </p>
        </div>

        <script>

            function popaddhotel() 
                var mydiv = $("#AddHotelPop")
                mydiv.dialog(
                    modal: true, appendTo: "form",
                    title: "Add Hotel", closeText: "",
                    width: "400px"
                );

            

            function MyClose() 
                popdiv = $('#AddHotelPop')
                popdiv.dialog('close')
            

        </script>

好的，我们现在得到这个：

我们后面添加到数据库的简单按钮代码是这样的：

    protected void cmdAddOk_Click(object sender, EventArgs e)
    
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
            new SqlConnection(Properties.Settings.Default.TEST3)))
        
            cmdSQL.Connection.Open();
            DataTable rst = new DataTable();
            rst.Load(cmdSQL.ExecuteReader());
            SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
            SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
            DataRow OneRow = rst.NewRow();

            OneRow["FirstName"] = txtFirst.Text;
            OneRow["LastName"] = txtLast.Text;
            OneRow["HotelName"] = txtHotel.Text;
            OneRow["City"] = txtCity.Text;
            OneRow["Province"] = txtProvince.Text;
            OneRow["Active"] = chkActive.Checked;
            rst.Rows.Add(OneRow);
            dUpdate.Update(rst);

        
    

所以上面很简单——干净，我们可以跟随按钮点击等。

上面当然为此使用了 jquery.ui（所以你必须添加它）。

编辑：问题被问到我使用的是哪些 js 库。

嗯，开箱即用，所有基于默认模板的asp.net网站都有jQuery，所以只需要添加jQuery.UI。

但是，为了让这一切合二为一 - 为了这篇文章？

我包括了 jquery。 jqquery.UI，以及 jQuery.UI 的漂亮主题。

您会注意到，我们甚至不需要引导库。

当然，这行得通：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

【讨论】：

我没有使用任何库，它只是 Vanilla JavaScript，您还需要 CSS 代码吗？

不，但我的简单 jquery.UI 示例本身就很好，结果是一个非常好的对话框弹出。正如您所看到的，将确定按钮点击发送到数据库的代码也非常好且易于使用。如果您的弹出窗口现在可以正常工作，那么采用我为按钮单击发布的代码（使用 asp.net 按钮）应该适合您。所以你真的不需要我使用的 jQuery.UI。如果您的对话框弹出就好了？然后后面的按钮单击代码应该将一个新行添加到给定的数据库中，而不是很好。

你用过哪一代jquery.UI？我尝试将其与 CDN 和下载的 jquery.ui 文件夹链接，但单击“添加酒店”按钮后没有任何反应。如果不是问题，请同时提供该部分代码，谢谢。跨度>

你只需要上面的标记。我做了一个编辑——看到我的答案的最后——我包含并显示了 jquery、jquery.UI 甚至 jquery.UI 主题，以使其正常工作。我不使用 CDN，但对于这篇文章 - 以上工作正常。请注意，您甚至不需要引导带即可工作。如前所述，我不使用引导对话框，因为它们非常混乱且很难使用。您可以在上面粘贴标记进行测试（甚至不需要添加存根后面的代码 - 但只需将其留空，这样您就可以剪切 + 粘贴并在空白的新测试页面中运行示例。

是的，它们是空白的，没有其他任何事情发生，也没有显示我对成功或不成功操作的警报.. 很奇怪。几个月前我遇到了同样的问题，但我不知道为什么页面运行时会在 2 秒后加载弹出窗口被打开没有工作..可能是CSS中的一些问题，因为模式是隐藏的并且没有指针事件，直到点击那一刻然后他们切换到自动..我真的不知道。无论如何，再次感谢您，祝您有愉快的一天。