从主视图的部分视图发布数据，然后提交给控制器

Question

我有一个MVC模型如下

    public class ListSampleModel
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public int SampleId { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public IList<PointOfContact> lstPoc { get; set; }
    }

    public class PointOfContact
    {
        [Key]
        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
        public int PocID { get; set; }

        public string EmailAddress { get; set; }

        public string PhoneNumber { get; set; }
    }

我所做的是，在 jquery 对话框上创建“PointOfContact”作为局部视图，然后在“保存”按钮上单击它在标签中的主视图上显示数据（我将有多个联系点），现在提交我希望将此数据与 ListSampleData 的属性值一起发送回控制器。 问题是，与简单属性相关的数据被返回，但列表始终为空。

下面是我的视图

@model MVCDataFlowSample.Models.ListSampleModel    
@using (Html.BeginForm("Create", "ListSample", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>ListSampleModel</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.FirstName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.FirstName)
                @Html.ValidationMessageFor(model => model.FirstName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.LastName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.LastName)
                @Html.ValidationMessageFor(model => model.LastName)
            </div>
            <div id="dialog1" class="ui-dialog" style="background-color:gray;"></div>
            <div id="data">
            </div>
            <p>
                <input type="button" value="Add More..." id="btnAdd" />
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

主视图上的 Javascript

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnAdd').on('click', function () {
            $('#dialog1').dialog({
                autoOpen: true,
                position: { my: "center", at: "center", of: window },
                width: 1000,
                resizable: false,
                title: 'Add User Form',
                modal: true,
                open: function () {
                    $(this).load('@Url.Action("PocPartial", "ListSample")');
                },
                buttons: {
                    "Save User": function () {
                        addUserInfo();
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
            return false;
        });
        function addUserInfo(email, phone) {
            var text = "<div id='EmailAddress'>Email Address:" + $("#EAddress").val() + "</div><div id='PhoneNumber'>Phone Number:" + $("#PhNo").val() + "</div>";
            $("#data").append(text);
        }
    });
</script>

局部视图

@model MVCDataFlowSample.Models.PointOfContact
<div>
        @Html.Label("EmailAddress:")
        <div>
            @Html.TextBoxFor(x => x.EmailAddress, new { id = "EAddress" })
        </div>

        @Html.Label("PhoneNumber:")
        <div>
            @Html.TextBoxFor(x => x.PhoneNumber, new { id = "PhNo" })
        </div>
</div>

我们将不胜感激。

Answer 1

DIV 元素的内容不作为表单数据提交。如果您希望提交该数据，请将其添加到 DOM 作为隐藏的 INPUT 元素以及您的 DIV。您还需要正确格式化它们的名称，以便 MVC 知道如何绑定它们。请参阅 this article 了解复杂对象在 MVC 中的绑定方式。

Answer 2

我将部分视图数据发布到主页的发布操作您可以将想法修改为您的任何套装

局部视图

<select name="Country">
    <option>Indian</option>
    <option>Africa</option>
</select>

<select name="State">
    <option>Kerala</option>
    <option>TamilNadu</option>
</select>

<select name="City">
    <option>Thrissur</option>
    <option>Palakkad</option>
</select>

索引页面

@{
    ViewBag.Title = "IndexTestPost";
}

<h2>IndexTestPost</h2>

@using(Html.BeginForm()){

    @Html.Partial("~/Views/_PartialPagePostCountry.cshtml");

<input type="submit" />
}

获取帖子数据的类

public class CountryCityState
{
    public string Country { get; set; }
    public string State { get; set; }
    public string City { get; set; }
}

控制器

public class TestPostPartialController : Controller
{

    // GET: TestPostPartial
    public ActionResult IndexTestPost()
    {
        return View();
    }

    [HttpPost]
    public ActionResult IndexTestPost(CountryCityState CtnCtySta)
    {
        return View();
    }
}