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

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 对话框和 "save" 按钮上创建 "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 作为 DIV 之外的隐藏 INPUT 元素。您还需要正确格式化它们的名称，以便 MVC 知道如何绑定它们。请参阅 this article 了解如何在 MVC 中绑定复杂对象。

Answer 2

我post将部分视图数据编辑到主页的post操作您可以根据自己的喜好修改想法

局部视图

<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" />
}

Class 捕捉 Post 数据

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();
    }
}

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

posting data from partial view on main view then submitting to controller

asp.net-mvc

partial-views