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，而是一个所有属性都为null的ContactInfo对象

我似乎找不到任何解决方案。希望对您有所帮助！

编辑：

这是 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 规范不允许诸如隐藏字段之类的元素位于 table 内部，而是位于单元格外部。这也可能是一个促成因素。我建议将表单放在 table 之外，以及隐藏元素（但在表单内）

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

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

MVC Razor - form values empty when submitted from outside the form

.net

html

html.beginform

razor

asp.net-mvc-5