Question

我在局部视图中有一个表，其中包含一个客户列表，其中表的每一行代表一个客户。现在我的目标是围绕每一行包裹一个表单，点击该行后，它将填充一个带有客户详细信息的div。但是，由于我使用razor语法相当新，我不确定如何处理它。到目前为止，我有以下代码：

<table class="customerResultsTable" border="1">
<thead class="customerResultsTableHead">
    <tr class="customerResultsTableRowHead">
        <td class="customerResultsTableCellHead">Company Name</td>
    </tr>
</thead>
<tbody class="customerResultsTableBody">
    @{
        foreach (EntityDTO customer in Model.entities)
        {
            using (Ajax.BeginForm("showCustomer", "VF", new AjaxOptions { UpdateTargetId = "customerView" }))
            {
                <tr id="@customer.InternalCode" class="customerResultsTableRow" onclick="submit">
                    <td class="customerResultsTableCell">@customer.Name</td>
                    <td>@Html.TextBoxFor(x => x.customerID, new { Value = customer.InternalCode })</td>
                </tr>
            }
        }
    }
</tbody>
</table>
<div id="customerView">

</div>

显然这不起作用所以我正在寻找指导。

提前致谢

修改

这是我提交表单的最新尝试，但是我的控制器返回的partialView没有将它返回到customerView div。我只能假设这是因为document.forms.submit没有意识到它应该和ajax调用？

@using (Ajax.BeginForm("showCustomer", "VF", new { id="customerForm" }, new AjaxOptions { UpdateTargetId = "customerView" }))
{
    <table class="customerResultsTable" border="1">
        <thead class="customerResultsTableHead">
            <tr class="customerResultsTableRowHead">
                <td class="customerResultsTableCellHead">Company Name</td>
            </tr>
        </thead>
        <tbody class="customerResultsTableBody">
            @foreach (EntityDTO customer in Model.entities)
            {
                <tr class="customerResultsTableRow">
                    <td class="customerResultsTableCell"><div id="@customer.InternalCode" onclick="document.forms['customerForm'].submit(this.id)">@customer.Name</div></td>
                </tr>
            }
        </tbody>
    </table>
}
<div id="customerView">

</div>

Answer 1

你安装了Microsoft.jQuery.Unobtrusive.Ajax吗？你还应该添加以下内容：

在BudleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
        "~/Scripts/jquery.unobtrusive-ajax*"));

在_Layout.cshtml中

@Scripts.Render("~/bundles/jqueryajax")

Answer 2

这是我提交表单的最新尝试，但是我的控制器返回的partialView没有将它返回到customerView div。

首先重要的是https://stackoverflow.com/a/40839763/8092612 在我想通过添加InsertionMode之后，它可以运行AjaxOptions：

@using (Ajax.BeginForm("showCustomer", "VF", new { id="customerForm" }, new AjaxOptions {InsertionMode = InsertionMode.Replace, UpdateTargetId = "customerView" }))
{
    <table class="customerResultsTable" border="1">
        <thead class="customerResultsTableHead">
            <tr class="customerResultsTableRowHead">
                <td class="customerResultsTableCellHead">Company Name</td>
            </tr>
        </thead>
        <tbody class="customerResultsTableBody">
            @foreach (EntityDTO customer in Model.entities)
            {
                <tr class="customerResultsTableRow">
                    <td class="customerResultsTableCell"><div id="@customer.InternalCode" onclick="document.forms['customerForm'].submit(this.id)">@customer.Name</div></td>
                </tr>
            }
        </tbody>
    </table>
}
<div id="customerView">
</div>

表行

2 个答案: