如何从 MVC 中的部分视图回发数据？

Question

我有一个主视图和两个局部视图

1. 索引 - 主视图
2. _详细信息 - 部分视图
3. _Address- 详细信息部分视图中的部分视图

索引 - 主视图

    @model IndexViewModel
    @{
        Layout = "~/Views/Shared/_CodeLayout.cshtml";

    }

@Html.Partial("_Details", Model)

2。 _Details - 局部视图

     @model IndexViewModel
<div id="Detailsdiv">  



    @using (Html.BeginForm("_Details", "FS", FormMethod.Post, new
        {
            id =
              "frmFS",
            @class = "form-horizontal"
        }))
    { 

    <div class="row">
        <div class="col-lg-1 nopadding">
            <div class="col-lg-1 nopadding">
                @Html.LabelFor(m => m.User.Name):
            </div>
            <div class="col-lg-2">
                @Html.TextBoxFor(m => m.User.Name, new { @id = "txtName", @style = "width:140px;height:24px", @maxlength = "25" })
            </div>
        </div>
    </div>
  @Html.Action("_Address", "Shared", new { userId = Model.User.UserId })
        }
        <button type="button" value="Save" ID="btnSave"> Save </button>
        }
    </div>

3. _地址-部分视图

@model AddressViewModel 

<div id="divAddress">

    @using (Html.BeginForm("_Address", "Shared", FormMethod.Post, new { id = "frmAddress", @class = "form-horizontal" }))
    {
<div class="row">
<div class="col-lg-1 nopadding">
                                    @Html.LabelFor(m => m.Address.AddressDesc):
                                </div>
                                <div class="col-lg-2">
                                    @Html.TextBoxFor(m => m.Address.AddressDesc, new { @id = "txtAName", @style = "width:140px;height:24px", @maxlength = "25" })
                                </div>
</div>
---
-
-
And some more 
  <button type="button" value="Save" ID="btnCreate"> Create </button>
</div>

}



   $('#btnCreate').click(function () {

                $("#ajax_loader").show();
                 var inputdata = $("#frmAddress").serialize();
                $.ajax({
                    url: '@Url.Action("CreateAddress", "Shared")',
                    type: 'POST',
                    cache: false,
                    data: inputdata
                }).done(function (result) {
                    $("#divAddress").html(result);
                    $("#ajax_loader").hide();
                });

        });

SharedConroller

获取地址操作

public ActionResult _ Address (short userId )
        {


}

public ActionResult CreateAdderess(AddressViewModel addressViewModel)
        {
Create address…………..
But AddressViewModel is coming null 
}
    }


public class AddressViewModel
{
    [Key]
    public decimal AddressId { get; set; }


    [DisplayName("Address Type")]

    public string Addr_Typ { get; set; }
    [DisplayName("Address Description")]
    [MaxLength(256)]
    public string Addr_Desc { get; set; }
    [DisplayName("City")]
    [MaxLength(30)]
    public string City_Nm { get; set; }

    [DisplayName("State")]
    [MaxLength(2)]
    public string State_Cd { get; set; }

    [DisplayName("Zip")]
    [RegularExpression(@"^\d{5}(?:[\-]?\d{4})?$", ErrorMessage = "Invalid Zip")]
    [MaxLength(10)]
    public string Zip { get; set; }
}

从 _Details 回发工作正常。从地址回发 - 部分视图不起作用。

提前致谢

Answer 1

我假设您有返回相同的部分视图的 HTTP GET 和 HTTP POST 操作。您需要包含部分视图的父视图上的 DIV

<div id="divYourPartial"></div>

在加载（或页面内的 id 值更改）时，数据会从 HTTP GET 操作加载到部分视图中。 POST 活动由局部视图本身使用 Ajax.BeginForm 元素处理

$.ajax({
    url: '/YourController/YourAction/' + YourId,
    type: "get",
    success: function (result) {
    $("#divYourPartial").html(result);
    }
});

局部视图可能如下所示。请注意，更新目标是该视图所在的外部 div，但这可以使用“InsertionMode.Replace”选项。您的（同名）获取和发布操作会使用您使用的任何模型返回此部分视图

@model YourModels.ModelView
@{
    Layout = null;
}

@using (Ajax.BeginForm("YourAction", "YourController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "divYourPartial"
            }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.YourId)

    @Html.ValidationSummary(false, "", new { @class = "text-danger" })

    <div>
        @Model.SomeInfo
    </div>

    <div class="form-group mt-1">
        @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label" })
        @Html.TextAreaFor(model => model.Notes, new { @class = "form-control", @rows = 6, @cols = 80 })
        @Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })
    </div>
    <input type="submit" value="Save" class="btn btn-default btn-primary" title="Save changes to these notes" />
}

Answer 2

您可以在一个页面上拥有多个表单。例如，如果您有一个包含要删除任何行的行的表格，您可以在该行的表格单元格中创建一个表单。这样，delete 只需要一个 id 到 POST 动作中进行删除。

我建议您将您的部分观点拆分为各自的形式，每个形式独立执行。唯一的问题是，如果一种形式的更新需要重新显示另一种形式。你的外部视图可以比试图沟通的局部视图更好地处理这个问题。从动作返回 JSON 对象中两个视图的结果并将 HTML 分配给具有部分视图的相应 DIV 是一件简单的事情

您有两种选择来初始填充您的部分。如果您的主视图中有类似的内容，则在首次加载时，RAZOR 引擎会将您的详细信息 HTML 呈现到 div 中。这来自 HTTP GET 操作（假设您有单独的 GET 和 POST）

<div id="divYourPartial">
    @Html.Partial("_Details", Model)
</div>

当用户保存（发布）他们的更改时，我在第一个答案中建议的代码将重新填充此 DIV。您无需再做任何事情。

您也可以在第一次加载时使用 JavaScript 填充 div，就像我的第一个答案一样

<div id="divYourPartial">
</div>

您将需要一个最初执行加载的脚本部分 - 除非您等待用户单击某个元素并按 ID 加载数据。如果您想从动态加载的后代中捕获事件，请将事件处理程序放在固定的外部元素上，否则您将无法捕获它们。

        @section Scripts
        {
            <script type="text/javascript">

function LoadData(){
$.ajax({
    url: '/YourController/YourAction/' + YourId,
    type: "get",
    success: function (result) {
    $("#divYourPartial").html(result);
    }
});
}


        $(function () {
// first time page load
LoadData()

    $("#divOuter").on("dblclick", function (event) {
    // when user double clicks an item, show it for editing
    // on an outer div awaiting an event to percolate up from a descendant, the target is not $(this)
    var target = $(event.target);

    // Your ajax here to load the div
        });
    });
    </script>