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

时间:2015-01-14 15:29:59

标签: asp.net-mvc partial-views

我有一个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; }
    }

我所做的是,创建&#34; PointOfContact&#34;作为jquery对话框的部分视图和&#34; save&#34;按钮单击它显示标签中主视图上的数据(我将有多个联系人点),现在提交我想要将此数据与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>

任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我将部分观看数据发布到主页的帖子您可以将想法修改为任何套装

部分视图

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