將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

這些元素在哪里？

• 名稱
• 用戶名
• 小時
• 電子郵件

Answer 2

在您的HTML代碼中添加ID：

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