MVC Razor - 从表单外部提交时表单值为空

Question

我构建了一个 MVC (Razor) 项目，我有一个视图 (ViewA)，里面有一个局部视图 (ViewB)。部分视图有一个表单（@BeginForm）

这是表格：

@model MT_Contacts.Models.ContactInfo
<table>
    <tr>
        <td style="width: 35%;" colspan="2">
            @if (!string.IsNullOrEmpty(Model?.Name))
            {
                @(Html.Raw(Model.Name))
                <br />
            }
            @if (!string.IsNullOrEmpty(Model?.Address1))
            {
                @(Html.Raw(Model.Address1))
                <br />
            }
            @if (!string.IsNullOrEmpty(Model?.Address2))
            {
                @(Html.Raw(Model.Address2))
                <br />
            }
            @if (!string.IsNullOrEmpty(Model?.Address3))
            {
                @(Html.Raw(Model.Address3))
                <br />
            }
            @if (!string.IsNullOrEmpty(Model?.ZipAndCity))
            {
                @(Html.Raw(Model.ZipAndCity))
                <br />
            }
            @if (!string.IsNullOrEmpty(Model?.Country))
            {
                @(Html.Raw(Model.Country))
                <br />
            }
        </td>
    </tr>
    @if (!string.IsNullOrEmpty(Model?.Phone))
    {
        <tr><td style="width: 35%;">Telefon</td><td>: @Html.Raw(Model.Phone) </td></tr>
    }

    @using (Html.BeginForm("SaveInfoChanges", "ContactInfoBox", FormMethod.Post, new { id = "EditContactInfoForm" }))
    {
        @Html.HiddenFor(model => model.Name)
        @Html.HiddenFor(model => model.Address1)
        @Html.HiddenFor(model => model.Address2)
        @Html.HiddenFor(model => model.ZipAndCity)
        @Html.HiddenFor(model => model.Country)
        @Html.HiddenFor(model => model.Phone)
        <tr>
            <td colspan="2">
                <table>
                    <tr>
                        <td>Address3</td>
                        <td>
                            @Html.TextBoxFor(model => model.Address3, new { placeholder = "test placeholder", style = "width:300px" })
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right">
                            <input id="submitbtn" type="submit" value="Save" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    }
</table>

作为测试，我只是想编辑 Address3 属性。 在表单中使用提交输入时，一切正常。但我需要它在表单之外，在主视图中。

在我的主视图 (ViewA) 中，我尝试过这个：

<input type="submit" value="abc" form="EditContactInfoForm" />

但这似乎无济于事。

我也试过这个（在 ViewA 中）：

<td class="boxIcons" id="ContactInfoHeaderAcceptButton" onclick="saveInfoChanges();">
    Save
</td>

在 ViewA 中执行：

function saveInfoChanges() {
    $("#EditContactInfoForm").submit();
};

这将我带到控制器：

[HttpPost]
public ActionResult SaveInfoChanges(ContactInfo editedContactInfoResult)
{
    // Do stuff
}

这里的参数（editedContactInfoResult）不为null，而是一个ContactInfo对象，所有属性都为null。

我似乎找不到任何解决方案。希望能帮到你！

编辑：

这是 ContactInfo 对象：

namespace Contacts.Models
{
    public class ContactInfo
    {
        public string Name { get; set; }
        public string Address1 { get; set; }
        public string Address2 { get; set; }
        public string Address3 { get; set; }
        public string ZipAndCity { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
    }
}

编辑 2：

我尝试将提交按钮从 ViewA 移动到局部视图 (ViewB)。在那里，<input type="submit" value="abc" form="EditContactInfoForm"/> 仍然什么都不做。但是 saveInfoChanges() 可以完美运行。

有没有办法可以将提交按钮移到 ViewA？

编辑 3：

主视图（ViewA）：

@using MT_Contacts.Models
@model ContactInfo

<link rel="stylesheet" type="text/css" href="~/Styles/InfoBoxStyle.css" media="screen" />
<script type="text/javascript" src="~/Scripts/Basic/Tools.js"></script>
<script type="text/javascript" src="~/Scripts/Basic/ContactInfoBox.js"></script>

<div ID="InfoBox">
    <table class="infobox">
        <thead>
            <tr>
                <th>
                    Kontaktinfo
                </th>
                <th id="tester1" style="text-align: right">
                    <table id="HoverButtonTable" style="text-align: right; width: 100%; vertical-align: middle">
                        <tr style="text-align: right">
                            <td style="width: 100%"></td>

                            <td class="boxIcons" id="ContactInfoHeaderEditButton" style="vertical-align: middle; text-align: right; font-size: 10px" onclick="ContactInfoBox.toggleEditMode('1')">
                                L
                            </td>

                            <td class="boxIcons" id="ContactInfoHeaderAcceptButton" style="display: none; vertical-align: middle; text-align: right; font-size: 10px" onclick="saveInfoChanges();">
                                &#xe2a0;
                            </td>
                            <td id="ContactInfoHeaderSpace" style="display: none"> &#160 </td>
                            <td class="boxIcons" id="ContactInfoHeaderCanselButton" style="display: none; vertical-align: middle; text-align: right; font-size: 10px" onclick="ContactInfoBox.toggleEditMode('0');">
                                &#xe262;
                            </td>
                        </tr>
                    </table>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" id="contactInfoList">
                    @{ Html.RenderPartial("InfoBoxes/ContactInfoBox/_ContactInfoList", Model);}
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

从技术上讲，这里有非法代码。 HTML 规范不允许隐藏字段等元素位于表格内，而是位于单元格外。这也可能是一个促成因素。我建议将表格放在表格之外，以及隐藏的元素（但在表格内）

@using (Html.BeginForm(...)
{
    <table> 
      ...
    </table>
    @Html.HiddenFor(...)
}