1

我有这个视图，我在其中创建了一个添加到数据库中的新公司。该视图分为 2 个部分，左侧和右侧。在右侧，我想输入该公司的交易。一家公司可以有 1 笔或多笔交易，这包括 1 笔主要交易，以及 0 到许多其他交易。当用户添加其他交易时，每笔交易将被添加到下面的列表中。我还没有为此输入代码。对于列表中的每笔交易，他可以选择将其删除。当他输入了所有细节后，他点击提交，所有数据都保存在数据库中。现在我正在考虑为其他交易添加部分视图，但我想知道如何做到这一点，并且每次从自动完成中选择交易时，数据都会发布到控制器方法并返回部分视图。但这将清除左侧部分中的数据。那么我该怎么做呢？我的观点看起来像

@model SCD.ViewModels.SubcontractorViewModel

@{
    ViewBag.Title = "Create";
}

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Create Subcontractor</legend>
        <section class="wrapper">
            <section class="leftside">
                <table class="formTable">
                    <tr>
                        <td class="leftCell">@Html.LabelFor(model => model.Subcontractor.CompanyName)</td>
                        <td class="rightCell">@Html.TextBoxFor(model => model.Subcontractor.CompanyName, new { @style = "width: 300px;" })</td>
                    </tr>
                    <tr>
                        <td class="leftCell">@Html.LabelFor(model => model.AddressViewModel.Address1)</td>
                        <td class="rightCell">@Html.TextBoxFor(model => model.AddressViewModel.Address1, new { @style = "width: 300px;" })</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;" class="rightCell"><input type="submit" value="Save"/></td>
                    </tr>
                </table>
                <div style="float: left">@Html.ActionLink(" ", "List", null, new { @class = "buttonBackToList" })</div>
            </section>
            <section class="rightside">
                <table class="formTable">
                    <tr>
                        <td class="leftCell">@Html.LabelFor(model => model.PrimaryTrade)</td>
                        <td class="rightCell"><input type="search" name="searchPrimaryTrade" id="searchPrimaryTrade" data-scd-autocomplete="@Url.Action("AutocompletePrimaryTrade", "DataService")" style = "width: 300px;"/>
                            <input type="button" id="ResetPrimaryTrade" value="Reset"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="leftCell">@Html.LabelFor(model => model.OtherTrades)</td>
                        <td class="rightCell"><input type="search" name="searchOtherTrade" id="searchOtherTrade" data-scd-autocomplete="@Url.Action("AutocompleteOtherTrade", "DataService")" style = "width: 300px;"/>
                            <input type="button" id="ResetOtherTrade" value="Reset"/>
                        </td>
                    </tr>
                </table>
            </section>
        </section>

    </fieldset>
}
4

1 回答 1

2

Ajax是您的答案，当您不想重新加载页面时，使用客户端 ajax 与服务器通信是唯一的选择。

我会使用 jQuery 或通过 ajax 添加行，这会将它们插入到您的数据库中并再次返回填充的模型并将其作为PartialView(). 然后，您的 ajax 将onSuccess：用返回的结果替换您的 tableID。

所以你的 jQuery 会是这样的：

$('.rightside').children('.formTable').replaceWith(theReturnedPartialFromAjaxCall);

如果要添加动态行，有两个选项：

在添加一行时，您可以调用 ajax 请求，该请求还将向数据库添加一个空白行，然后重新填充您的模型并返回部分视图。这将在新的空白行上设置模型绑定，删除空白行或任何行也可以通过 ajax 完成，因为该行现在有一个 ID。但是，请确保在遍历每一行时将 ID 作为隐藏字段放入。

或（不是首选方式，但可能是您必须执行保存时需要执行的操作）

您可以在保存中捕获表单集合，如果有多行则将其存储在数组中

public ActionResult Save(MyModel model, FormCollection frm) {
    String[] name = frm["name"].Split(',');
}

我不喜欢这种方式，因为它容易出错，第一种方法将允许您绑定 MVC 的模型验证

于 2013-01-07T11:50:20.793 回答