使用 Ajax 将值传递给 ASP.NET 中的代码

本文关键字:NET 代码 ASP Ajax 值传 使用 | 更新日期: 2023-09-27 18:30:55

我正在尝试使用 Ajax 将一组值传递给代码隐藏方法并将传递的数据插入数据库表中。但我得到的只是字符串变量的空字符串和 int 变量的 0。

我猜我的 Ajax 代码无法正常工作,但由于我对此完全陌生,所以有人看到我做错了什么以及为什么我不能将值从文本框传递到我的 C# 方法。

这是一个 HTML 代码:

<div class="new-member-wrap">
    <div id="new-member" class="new-member-inner">
        <h2>Create new team member</h2>
        <ul class="form">
            <li>
               <label>Name:</label>
               <input type="text" class="in-text" />
            </li>
             <li>
                <label>Hours per week:</label>
                <input type="text" class="in-text" />
             </li>
              <li>
                 <label>Username:</label>
                 <input type="text" class="in-text" />
              </li>
               <li>
                  <label>Email:</label>
                  <input type="text" class="in-text" />
               </li>
                <li class="inline">
                   <label>Status:</label>
                   <span class="radio">
                     <label for="inactive">Inactive:</label>
                     <input type="radio" value="1" name="status" id="inactive" />
                   </span>
                   <span class="radio">
                       <label for="active">Active:</label>
                       <input type="radio" value="2" name="status" id="active" />
                   </span>
                </li>
                <li class="inline">
                   <label>Role:</label>
                      <span class="radio">
                          <label for="admin">Admin:</label>
                           <input type="radio" value="1" name="status" id="admin" />
                                </span>
                                <span class="radio">
                                    <label for="worker">Worker:</label>
                                    <input type="radio" value="2" name="status" id="worker" />
                                </span>
                            </li>
                        </ul>
                        <div class="buttons">
                            <div class="inner">
                                <a href="javascript:;" class="btn green" id="saveMember">Invite team member</a>
                            </div>
                        </div>
                    </div>
                </div>

这是我的JS代码:

<script type="text/javascript">
        $(function () {
            $('#saveMember').click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "team-members.aspx/InsertMember",
                    dataType: "json",
                    data: "{'Name':'" + $('#name').val() + "','UserName':'" + $('#username').val() + "','HoursPerWeek':'" + $('#hours').val() + "','Email':'" + $('#email').val() + "'}",
                    success: OnSuccess,
                    error: ErrorFound
                });
            });
            function OnSuccess(data) {
                var obj = data.d;
                if (obj == 'true') {
                    $('#name').val('');
                    $('#username').val('');
                    $('#hours').val('');
                    $('#email').val('');
                };
            }
            function ErrorFound(result) {
                alert(result);
            }
        });
    </script>

这是代码隐藏:

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string InsertMember(string Name, string UserName, string HoursPerWeek, string Email)
        {
            string retMessage = string.Empty;
            string ConnectionString = "Data Source=PRACTICE-001;Initial Catalog=n.mosorinski;User ID=n.mosorinski;Password=n.mosorinski;MultipleActiveResultSets=True;Application Name=EntityFramework";
            using (SqlConnection con = new SqlConnection(ConnectionString))
            {
                string Query = "insert into TeamMember(Name, UserName, HoursPerWeek, Email) values(@Name,@UserName,@HoursPerWeek,@Email)";
                using (SqlCommand cmd = new SqlCommand(Query, con))
                {
                    con.Open();
                    cmd.Parameters.Add("@Name", Name);
                    cmd.Parameters.Add("@UserName", UserName);
                    cmd.Parameters.Add("@HoursPerWeek", HoursPerWeek);
                    cmd.Parameters.Add("@Email", Email);
                    int AffectedRow = cmd.ExecuteNonQuery();
                    if (AffectedRow == 1)
                    {
                        retMessage = "true";
                    }
                    else
                    {
                        retMessage = "false";
                    }
                }
                return retMessage;
            }
        }

所以问题是我得到了空字符串和 0(对于每周小时数)而不是文本框中的值。

使用 Ajax 将值传递给 ASP.NET 中的代码

将 ID 添加到您的 HTML 代码中:

<li>
    <label>Name:</label>
    <input id="name" type="text" class="in-text" />
</li>
<li>
     <label>Hours per week:</label>
     <input id="hours" type="text" class="in-text" />
</li>
<li>
      <label>Username:</label>
      <input id="username" type="text" class="in-text" />
</li>
<li>
    <label>Email:</label>
    <input id="email" type="text" class="in-text" />
 </li>

这些元素在哪里?

  • 名字
  • 用户名
  • 小时
  • 电子邮件