使用jquery和ASP.NET动态构建HTML代码

Question

我需要在ASP.NET中使用jquery动态构建HTML代码。生成HTML后，我应该得到这样的页面：

每个字段都可以点击，而不是像图片中那样有额外的选项。我已经设法使用ASP.NET代码隐藏，但我知道在服务器端构建HTML是一种不好的做法。现在我正在尝试在客户端构建它，但是我遇到了一些我无法检测到的问题。

这是我使用ajax生成HTML并调用方法后面的代码：

<script type="text/javascript">
    function GetTeamMembers() {
        $.ajax({
            type: "POST",
            url: "team-members.aspx/LoadTeamMembers",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }
    function OnSuccess(data) {
        var htmlCode;
        for (var i = 0; i < data.d.lenght; i++) {
        htmlCode += "<div class=\"heading\" id=\"" + data.d[i].TeamMemberID + "\"><span>" + data.d[i].Name + "</span><i>+</i></div><div class=\"details\"><ul class=\"form\"><li>" +
                           "<label>Name:</label><input type=\"text\" id=\"tmname\" class=\"in-text\" /></li><li><label>Hours per week:</label><input type=\"text\" class=\"in-text\" />" +
                           "</li></ul><ul class=\"form\"><li><label>Username:</label><input type=\"text\" class=\"in-text\" /></li><li><label>Email:</label>" +
                           "<input type=\"text\" class=\"in-text\" /></li></ul><ul class=\"form last\"><li><label>Status:</label><span class=\"radio\">" +
                           "<label for=\"inactive\">Inactive:</label><input type=\"radio\" value=\"1\" name=\"status\" id=\"Radio5\" /></span>" +
                           "<span class=\"radio\"><label for=\"active\">Active:</label><input type=\"radio\" value=\"2\" name=\"status\" id=\"Radio6\" /></span>" +
                           "</li><li><label>Role:</label><span class=\"radio\"><label for=\"admin\">Admin:</label><input type=\"radio\" value=\"1\" name=\"status\" id=\"Radio7\" />" +
                           "</span><span class=\"radio\"><label for=\"worker\">Worker:</label><input type=\"radio\" value=\"2\" name=\"status\" id=\"Radio8\" />" +
                           "</span></li></ul><div class=\"buttons\"><div class=\"inner\"><a href=\"javascript:;\" id=\"updateMember\" class=\"btn green\">Save</a>" +
                           " <a href=\"javascript:;\" id=\"deleteMember\" class=\"btn red\">Delete</a> <a href=\"javascript:;\" class=\"btn orange\">Reset Password</a>" +
                           "</div></div></div> ";
        }
        $('#listMembersDiv').html(htmlCode);
        console.log(htmlCode);
    }
    function OnError(data) {
        console.log(Error);
    }
</script>

这是代码隐藏页面上的方法：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<SmallTeamMember> LoadTeamMembers()
{
    List<SmallTeamMember> allTeamMembers = new List<SmallTeamMember>();
    SqlConnection Conn = new SqlConnection("Data Source=PRACTICE-001;Initial Catalog=n.mosorinski;User ID=n.mosorinski;Password=n.mosorinski;MultipleActiveResultSets=True;Application Name=EntityFramework");
    SqlDataAdapter sqla = new SqlDataAdapter();
    string getTeamMembers = "select TeamMemberID, Name from TeamMember";
    sqla.SelectCommand = new SqlCommand(getTeamMembers, Conn);
    SqlCommandBuilder cb = new SqlCommandBuilder(sqla);
    Conn.Open();
    DataTable teamMembersData = new DataTable();
    sqla.Fill(teamMembersData);
    allTeamMembers = (from DataRow row in teamMembersData.Rows select new SmallTeamMember { TeamMemberID = Convert.ToInt32(row["TeamMemberID"]), Name = row["Name"].ToString() }).ToList();
    Conn.Close();
    return allTeamMembers;
}

这是一个简单的模型SmallTeamMember，我在列表中返回类型：

public class SmallTeamMember
    {
        public int TeamMemberID { get; set; }
        public string Name {get; set;}
    }

这是我用于生成代码的div元素：

<div id="listMembersDiv" runat="server"></div>

我在页面加载时调用我的JS函数，在调试过程中以这种格式获取数据变量中的所有信息：

{"d":[{"__type":"VegaTimeSheetProject.SmallTeamMember","TeamMemberID":23,"Name":"Sanja Bajic"},{"__type":"VegaTimeSheetProject.SmallTeamMember","TeamMemberID":24,"Name":"Marija Aleksic"},{"__type":"VegaTimeSheetProject.SmallTeamMember","TeamMemberID":25,"Name":"Srdjan Milenkovic"},{"__type":"VegaTimeSheetProject.SmallTeamMember","TeamMemberID":26,"Name":"Nemanja Mosorinski"}]}

但是在完成所有操作后，我得到了htmlCode变量的未定义值和空HTML页面。有人看到我在jquery部分做错了吗？这是我学习jquery和JS的第五天，所以我还没有那么好用，而且我没有足够的知识来解决这个潜在的错误。