在asp.net mvc中的webgrid中添加类似于前一行的行

Question

我在向Webgrid添加新行时遇到问题。我的Webgrid数据在每列中都有一个下拉列表。当我单击按钮添加新行时，它必须重复相同的行格式。 在这里粘贴我的webgrid代码。请帮我把它作为asp.net mvc的新手

 <div id="grid1">
            @wg1.GetHtml(
    tableStyle: "gridTable",
    headerStyle: "gridHead",
            rowStyle: "gridRow",
    footerStyle: "gridFooter",
            alternatingRowStyle: "gridAltRow",
            htmlAttributes: new { id = "TableGrid" },
    columns: wg1.Columns(
    wg1.Column("Condition", format: @item => Html.DropDownList("Condition", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Condition, "Select Condition", new { style = "width:100px", @class = "Condition" })),
    wg1.Column("SourceTable1", format: @item => Html.DropDownList("SourceTable1", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].SourceTableName, "Select Source 1", new { style = "width:100px", @class = "SourceTablea" })),
    wg1.Column("ColumnNames", format: @item => Html.DropDownList("ColumnNames", new SelectList(string.Empty, "Value", "Text"), "Select Column", new { id = string.Empty, style = "width:100px", @class = "field1" })),
    wg1.Column("Operator", format: @item => Html.DropDownList("Operator", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Operator, "Select Operator", new { style = "width:100px", @class = "Operator" })),
    wg1.Column("SourceTable1", format: @item => Html.DropDownList("SourceTable1", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].SourceTableName, "Select Source 2", new { style = "width:100px", @class = "SourceTablea" })),
    wg1.Column("ColumnNames", format: @item => Html.DropDownList("ColumnName", new SelectList(string.Empty, "Value", "Text"), "Select Column", new { id = string.Empty, style = "width:100px", @class = "field1" })),
    wg1.Column("Condition", format: @item => Html.DropDownList("Condition", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Condition, "Select Condition", new { style = "width:100px", @class = "Condition" }))
    )
    )
        </div>
<td>
        <input type="submit" value="Add Contact" id="ClickToAdd" /> 

我的Javascript如下：

<script type="text/javascript">
$('#ClickToAdd').click(function () {
    var newrow = "<tr><td> @wg1.GetHtml(htmlAttributes: new { id = "TableGrid" },columns: wg1.Columns(wg1.Column("Condition", format: @item => Html.DropDownList("Condition", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Condition, "Select Condition", new { style = "width:100px", @class = "Condition" })), wg1.Column("SourceTable1", format: @item => Html.DropDownList("SourceTable1", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].SourceTableName, "Select Source 1", new { style = "width:100px", @class = "SourceTablea" })), wg1.Column("ColumnNames", format: @item => Html.DropDownList("ColumnNames", new SelectList(string.Empty, "Value", "Text"), "Select Column", new { id = string.Empty, style = "width:100px", @class = "field1" })), wg1.Column("Operator", format: @item => Html.DropDownList("Operator", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Operator, "Select Operator", new { style = "width:100px", @class = "Operator" })), wg1.Column("SourceTable1", format: @item => Html.DropDownList("SourceTable1", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].SourceTableName, "Select Source 2", new { style = "width:100px", @class = "SourceTablea" })), wg1.Column("ColumnNames", format: @item => Html.DropDownList("ColumnName", new SelectList(string.Empty, "Value", "Text"), "Select Column", new { id = string.Empty, style = "width:100px", @class = "field1" })),wg1.Column("Condition", format: @item => Html.DropDownList("Condition", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Condition, "Select Condition", new { style = "width:100px", @class = "Condition" }))))</div></td></tr>";
    $("#webgrid tbody: last").append(newrow);
})
</script>

我编辑的网页格式如下：

@{
WebGrid wg1 = new WebGrid(Model.SourceTableModel);

}

<table>
<tr>
    <td>
        <div id="grid1">
            @wg1.GetHtml(
    tableStyle: "gridTable",
    headerStyle: "gridHead",
            rowStyle: "gridRow",
    footerStyle: "gridFooter",
            alternatingRowStyle: "gridAltRow",
            htmlAttributes: new { id = "TableGrid" },
    columns: wg1.Columns(
    wg1.Column("Condition", format: @item => Html.DropDownList("Condition", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Condition, "Select Condition", new { style = "width:100px", @class = "Condition" })),
    wg1.Column("SourceTable1", format: @item => Html.DropDownList("SourceTable1", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].SourceTableName, "Select Source 1", new { style = "width:100px", @class = "SourceTablea" })),
    wg1.Column("ColumnNames", format: @item => Html.DropDownList("ColumnNames", new SelectList(string.Empty, "Value", "Text"), "Select Column", new { id = string.Empty, style = "width:100px", @class = "field1" })),
    wg1.Column("Operator", format: @item => Html.DropDownList("Operator", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Operator, "Select Operator", new { style = "width:100px", @class = "Operator" })),
    wg1.Column("SourceTable1", format: @item => Html.DropDownList("SourceTable1", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].SourceTableName, "Select Source 2", new { style = "width:100px", @class = "SourceTablea" })),
    wg1.Column("ColumnNames", format: @item => Html.DropDownList("ColumnName", new SelectList(string.Empty, "Value", "Text"), "Select Column", new { id = string.Empty, style = "width:100px", @class = "field1" })),
    wg1.Column("Condition", format: @item => Html.DropDownList("Condition", (IEnumerable<SelectListItem>)Model.SourceTableModel[0].Condition, "Select Condition", new { style = "width:100px", @class = "Condition" }))
    )
    )
        </div>
    </td>
</tr>

<tr>


    </tr>

<tr>
    <td>
        <input type="submit" value="Add Contact" id="ClickToAdd" />
        <input type="submit" id="submitbutton1" value="Save" />
       @using (Html.BeginForm("WhereView", "Home", FormMethod.Post))
       {
        <input type="submit" id="nextbutton" value="Next" />
       }
    </td>
</tr>
</table>

用于动态添加新行的各个javascript：

<script type="text/javascript">
$('#ClickToAdd').click(function () {
    var newrow = $("#webgrid tbody tr:last").clone();
    $("#webgrid tbody").append(newrow);
})
</script>

它没有按预期工作