在表格行内使用AJAX.BeginForm将<divs>放在表格外进行更新

时间:2018-08-02 15:29:03

标签: html ajax asp.net-mvc razor

我正在使用AJAX.BeginForm对表行进行更改(特别是,一行包含已更新的div,而div包含行数据)。但是<div>的插入是在结果HTML中实际表的外面(恰好在上面)。任何想法?谢谢!

表主体由forloop构造,该forloop产生一个新的表行,该行又包含一个AJAX.BeginForm帮助器。辅助程序环绕一个表单,一个要替换的div和表行内容(仅<td> s)。每个表格行都使用自己的模型,每个模型都有一个唯一的resourceID,该ID用于为div赋予一个标识符,以便可以对其进行更新。

更改表行中下拉列表的值时,将调用函数commitExistingSettingForm,然后该函数将为更改后的行提交AJAX.BeginForm帮助程序。

<script>
function SubmitExistingSettingForm(resourceIdentifier) {
    var formName = resourceIdentifier + "Form";
    console.log("SubmitAddSettingTriggered with form id " + formName);
    var form = $('form[name=' + formName + ']');
    $("#" + formName).submit();
    $.validator.unobtrusive.parse("#" + formName);
} 
</script>

        <table class="table table-hover table-fixedlayout table-bordered shadow">
        <colgroup>
            <col width="1" />
            <col width="2" />
        </colgroup>
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2", AJAX_LOADER_SHOW, AJAX_LOADER_HIDE)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (Model subModel in Model.subModels)
            {
            <tr class="result-row break-word">
                @using (Ajax.BeginForm("Report", "ReportController", null, new AjaxOptions
                {
                    HttpMethod = "POST",
                    OnSuccess = "SuccessMessage",
                    OnFailure = "FailMessage",
                    UpdateTargetId = @report.ResourceId,
                    InsertionMode = InsertionMode.Replace
                }, new { id = reportSetting.ResourceId + "Form" }))
                {
                <form>
                    <div id=@report.ResourceId>

                        @Html.Action("SingleReport", report)

                    </div>
                </form>
                }
            </tr>

            }
     </table>

SingleReport页面:

    @{ object areaDropDownAttributes = new { @class = "form-control" };
}

    @Html.HiddenFor(m => m.ResourceId)

    <td>
    <input type="submit" class="btn btn-danger btn" value="X" />
</td>

    <td>
    @Html.DropDownListFor(m => m.ReportSetting1, Model.AvailableReportSettings.ReportSetting1s, new
       {
           @id = "ReportSetting1Id",
           @class = "form-control",
           @onchange = "SubmitExistingSettingForm('" + @Model.ResourceId + "')"
       })
</td>

0 个答案:

没有答案