使用带有Razor的jquery动态添加元素

时间:2016-11-21 10:30:15

标签: jquery html asp.net-mvc razor

我是jobery,razor,Bootstrap等的noob。我正在努力学习。

我正在使用mvc,我有一个列表,我想添加一些新元素。

我该怎么做?

这是我的代码:

@{var otherTechsList = Model.Technologies.Where(r =>
    r.CategoryId == null).ToList();}
@for (int x = 0; x < otherTechsList.Count; x++) {
    var technTrId = "techTr" + otherTechsList[x].TechnologyId.ToString();
    <div id="@technTrId" class="panel-body">
       */ My Elements here /*
    </div>
 }

谢谢。

1 个答案:

答案 0 :(得分:0)

如果您的div错误,您可以使用@ Html.Raw()或代码

@{ var otherTechsList = Model.Technologies.Where(r =>
                            r.CategoryId == null).ToList();
                    @for (int x = 0; x < otherTechsList.Count; x++)
                    {
                        var technTrId = "techTr" + otherTechsList[x].TechnologyId.ToString();
                        <div id="@technTrId" class="panel-body">
                                                                   <div class="col-lg-1"></div>
                                    <div class="col-lg-4" style="align-items:baseline">
                                        @Html.TextBox("TechnologyName", otherTechsList[x].TechnologyName)
                                    </div>
                                    <div class="col-lg-3">
                                        @Html.DropDownListFor(m => m.Technologies[x].TTmLevelId, Model.Technologies[x].TtmLevel,
                                                    new
                                                    {
                                                        @class = "form-control",
                                                        @onchange = "ValidateAr(selectedIndex,'" + otherTechsList[x].TechnologyId + "', 'tech', 'techLvlName', id)",
                                                        id = "tecnologiesId" + otherTechsList[x].TechnologyId
                                                    })
                                    </div>
                                    <div class="col-lg-2">
                                        @Html.DropDownListFor(m => m.Technologies[x].TtmlevelValue,
                                                              new SelectList(Enumerable.Range(1, 100)),
                                                    new
                                                    {
                                                        @class = "form-control",
                                                        @onchange = "ValidateAr(selectedIndex,'" + otherTechsList[x].TechnologyId + "', 'tech', 'techLvlName', id)",
                                                        id = "tecnologiesId" + otherTechsList[x].TechnologyId
                                                    })
                                    </div>
                                    <div class="col-lg-1">
                                        <button type="button" class="btn btn-xs btn-danger" style="padding:5px; margin:2px;">
                                            <span class="glyphicon glyphicon-remove" style="top:3px;"></span>
                                        </button>
                                    </div>
                                    <div class="col-md-1"></div>
                        </div>

                     }}
编辑:对不起,我忘记了。我有一个按钮可以在我的列表中添加新元素。

                                        <button href="#" id="addNewTech" type="button" class="btn btn-xs btn-success" style="margin-left:4px">

我的脚本我需要构建一个函数来添加元素,就像我想的那样:     $(&#34; #addNewTech&#34;)。click(function(e){               / code我在这里不知道/ }