从父视图提交部分视图数据

Question

如何从父视图提交部分视图数据.

我是MVC的新手,
我创建了一个局部视图_CurrentData,其中包含编辑器控件 - 文本框等,
并在主视图中添加了Submit按钮:

<div class="row">
    <div class="col-md-12">
        @Html.Partial("_CurrentData", Model.CurrentItemDetails)
    </div>
</div>
<div class="row">
    <div class="col-md-2 col-md-offset-5">
        <div>
            <input type="button" class="btn btn-primary" value="Submit" id="btnSubmit"/>
            &nbsp;&nbsp;
            <input type="button" class="btn btn-primary" value="Cancel" id="btnCancel" />
            <br/><br />
        </div>
    </div>
</div>

视图模型

public class ProductionViewModel
{
    public ItemDetails CurrentItemDetails { get; set; }
}

public class ItemDetails
{
    public int ID { get; set; }
    public string Name { get; set; }
}

视图

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Editor</h3>
    </div>
    <div class="panel-body">
        <div class="row form-group">
            <div class="col-sm-4 control-label text-right">
                <strong>Name:</strong>
            </div>
            <div class="col-sm-8 control-label">
                @Html.TextBoxFor(m => m.Name , new { @class = "form-control" })
            </div>
        </div>
    </div>
</div>

现在单击'btnSubmit'我想将数据从_CurrentData视图提交到服务器,然后刷新局部视图,
如何完成此操作？

Answer 1

你要的是什么

您要求的功能是AJAX.AJAX请求是"异步",在最基本的级别意味着可以启动和响应HTTP请求,而无需刷新页面.

正如有人写评论你的问题,jQuery可以使用,并提供了一个很好的方式来做AJAX请求,但如果你只是为了一个AJAX请求包含整个jQuery库,很多人可能会哭.

JavaScript的

因此,在JavaScript中,这是一个liiiiiittle比较复杂一点,有一些例子在这里.我不打算告诉你如何在JavaScript中完成它只是因为我现在没有很多时间,但我可能会在稍后更新答案.如果可以的话,我可能会建议你这样做.

jQuery的

在jQuery中这很容易.AJAX请求的文档在这里.

基本上您需要做的是向服务器发出请求,以便它可以更新您的部分视图数据,然后返回新的部分视图,以便用您替换当前的HTML.它看起来像:

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$.ajax({
    url: '@Url.Content("~/Controller/_CurrentData")',
    type: 'POST',
    data: {
        //partialViewForm relates to the form element in your partial view
        model: JSON.stringify($('#partialViewForm').serializeObject());
    },
    success: function (response) {
        if (response) {
            //partialViewDiv relates to the div in which your partial view is rendered
            $('#partialViewDiv').html(response);
        }
    },
    error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
});

上面会假设你有这样的东西作为你的控制器方法:

[HttpPost]
public ActionResult _CurrentData(ItemDetails model)
{
    //do stuff with model here
    return PartialView("_CurrentData", model);
}

所以这基本上就是你联系控制器的方式.要从您的网页调用该ajax,您需要在您可以覆盖的表单中的部分视图中使用一个按钮event.preventDefault().