javascript - 使用 Ajax 将值传递给 ASP.NET 中的后台代码

Question

我正在尝试使用 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(HoursPerWeek)，而不是文本框中的值。

Answer 1

将 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>