关于 javascript:如何将值从文本框和下拉列表插入数据库

How to insert values into database from textbox and dropdownlist

.net 或 sql 我都不太擅长。

问题是我有一个网络表单和一个数据库。该表单将允许用户在文本框和下拉列表中输入信息。
下拉列表中的数据保存在表格中。

所以,我正在从表中读取值,当用户填写表格并从下拉列表中选择他们想要的选项时,文本框和选定的下拉列表中的数据应该被发送回以保存在数据库中。

我已经成功地从数据库中读取了值并将它们显示在下拉列表中,如下代码所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 public class state
        {
            public string stateID { get; set; }
            public string stateName { get; set; }
        }

        [WebMethod]
        public static List<state> PopulateDropDownList()
        {
            DataTable dt = new DataTable();
            List<state> objDept = new List<state>();

            SqlConnection con = new SqlConnection("Data Source = ****; Initial Catalog = LCF2016; Integrated Security = true");

            {
                using (SqlCommand cmd = new SqlCommand("SELECT STATE_ID, STATE_Name FROM state", con))
                 {
                     con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                if (dt.Rows.Count > 0)
                {
                    for (int i = 0; i < dt.Rows.Count; i++)
                    {
                        objDept.Add(new state
                        {
                            stateID = dt.Rows[i]["STATE_ID"].ToString(),
                            stateName = dt.Rows[i]["STATE_Name"].ToString()
                        });
                    }
                }
                return objDept;
            }
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
>
     <script type="text/javascript">
          $(document).ready(function () {
               $.ajax({
                    type:"POST",
                    contentType:"application/json; charset=utf-8",
                    //url is the path of our web method (Page name/functionname)
                    url:"Default.aspx/PopulateDropDownList",
                    data:"{}",
                    dataType:"json",
                    //called on jquery ajax call success
                    success: function (result) {
                        $(‘#ddlstate’).empty();
                         $(‘#ddlstate’).append("<option value=’0′>-Select-</option>");
                         $.each(result.d, function (key, value) {

 $("#ddlstate").append($("<option></option>").val(value.stateID).html(value.stateName));
                         });
                    },
                    //called on jquery ajax call failure
                    error: function ajaxError(result) {
                         alert(result.status + ‘ : ‘ + result.statusText);
                    }
               });
          });
     ???

<p>State</p>

但是,即使我成功调用要显示到下拉列表中的数据,我也无法将所选数据与文本框中的数据一起插入回数据库中。换句话说,数据没有保存到数据库中。

这是我插入数据的代码”当点击提交时”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack == true)
            {
                Label1.Text = ("**Thanks for entering your information");
            }

        }

          protected void Button1_Click(object sender, EventArgs e)
          {

            using (SqlConnection vid = new SqlConnection("Data Source = ****; Initial Catalog = LCF2016; Integrated Security = true"))
            {
                vid.Open();
                using (SqlCommand xp = new SqlCommand("insert into LCF2016 (Fname, Lname, Email, Birthdate, Phone, Address, City, STATE_ID, Zip, Country_ID, Days_Per_Month, Primary_Language, Secondary_Language, Occupation_ID, HearAbout_ID, Other_Skills) Values(@Fname, @Lname, @Email, @Birthdate, @Phone, @Address, @City, @STATE_ID,  @Zip, @Country_ID,  @Days_Per_Month, @Primary_Language, @Secondary_Language, @Occupation_ID, @HearAbout_ID @Other_Skills)", vid))

                {
                    xp.Parameters.AddWithValue("@Fname", TextBox1.Text);
                    xp.Parameters.AddWithValue("@Lname", TextBox2.Text);
                    xp.Parameters.AddWithValue("@Email", TextBox3.Text);
                    xp.Parameters.AddWithValue("@Birthdate", TextBox4.Text);
                    xp.Parameters.AddWithValue("@Phone", TextBox5.Text);
                    xp.Parameters.AddWithValue("@Address", TextBox6.Text);
                    xp.Parameters.AddWithValue("@City", TextBox7.Text);
                    xp.Parameters.AddWithValue("@STATE_ID", ddlstate.SelectedValue);
                    xp.Parameters.AddWithValue("@Zip", TextBox8.Text);
                    xp.Parameters.AddWithValue("@country_ID", ddlcountry.SelectedValue);
                    xp.Parameters.AddWithValue("@Days_Per_Month", TextBox10.Text);
                    xp.Parameters.AddWithValue("@Primary_Language", ddllangp.SelectedValue);
                    xp.Parameters.AddWithValue("@Secondary_Language", ddllangs.SelectedValue);
                    xp.Parameters.AddWithValue("@Occupation_ID", ddloccup.SelectedValue);
                    xp.Parameters.AddWithValue("@HearAbout_ID", ddlhearabout.SelectedValue);
                    xp.Parameters.AddWithValue("@Other_Skills", TextBox15.Text);
                    xp.ExecuteNonQuery();

                }

            }

我得到的错误是

回发或回调参数无效。使用配置或页面中的 <%@ Page EnableEventValidation="true" %> 启用事件验证。出于安全目的,此功能验证回发或回调事件的参数是否源自最初呈现它们的服务器控件。如果数据有效且符合预期,请使用 ClientScriptManager.RegisterForEventValidation 方法注册回发或回调数据以进行验证。


试试,
通过 jquery

1
2
3
$("#ddlstate" ).change(function() {
  $(‘[id*=Hiddenfield1]’).attr(‘value’, $("#ddlstate" ).val());
});

身体

1
 

代码

1
xp.Parameters.AddWithValue("@STATE_ID", Hiddenfield1.vlue);

从来没有尝试过你在这里做什么,我最好的近似是当你做 PostBack 时 ViewState 是无效的,因为你正在使用 Ajax 来填充下拉列表。看来您正在使用 Ajax 调用填充下拉列表,然后尝试使用整页帖子将该数据发送回服务器。这里有几件事我不太明白,但我会建议是这个。

我认为你需要做一个服务器端的请求/发布,即在请求上绑定你的下拉列表和文本框控件服务器端,然后使用正常的回发将数据发送回服务器。或者,两种方式都使用 AJAX – 接收和发送您的数据,但不要尝试按原样混合它们。


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/269214.html

(0)
上一篇 2022年6月20日 18:08
下一篇 2022年6月20日 18:08

相关推荐

发表回复

登录后才能评论