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

Question

I have a MVC model as follows

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

What I have done is, create "PointOfContact" as a partial view on a jquery dialog and on "save" button click it shows the data on the main view in labels (I will have multiple point of contacts), now on submit I want this data along with the property values of ListSampleData to be posted back to the controller. The issue is, the data related to simple properties are returned back but the list is always null.

below is my View

@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 on Main View

<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>

Partial View

@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>

any help will be appreciated.

Answer 1

I posted partial view data to the main page's post action You can modify the idea to any of your suits

Partial View

<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>

Index Page

@{
    ViewBag.Title = "IndexTestPost";
}

<h2>IndexTestPost</h2>

@using(Html.BeginForm()){

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

<input type="submit" />
}

Class To Catch Post Data

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

Controller

public class TestPostPartialController : Controller
{

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

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

Answer 2

The contents of DIV elements are not submitted as form data. If you'd like that data to be submitted, add it to the DOM as hidden INPUT elements in addition to your DIVs. You'll also need to format their names correctly so that MVC knows how to bind them. See this article for how complex objects are bound in MVC.