Question

我有这个视图，我在那里创建了一个新的公司，并将其添加到数据库中。该视图分为两部分，左侧和右侧。在右边我想输入该公司的交易。公司可以有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>
}

Answer 1

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

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

所以你的jQuery会是这样的：

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

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

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

OR（不是首选方式，但可能需要执行保存所需的操作）

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

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

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

MVC：如何在不刷新整个页面的情况下在网格中插入项目

1 个答案: