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

时间:2014-11-18 15:09:54

标签: javascript c# jquery asp.net ajax

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

我想我的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)而不是文本框中的值。

2 个答案:

答案 0 :(得分:1)

这些元素在哪里?

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

答案 1 :(得分: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>