Question

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

索引-主视图
_详细信息-部分视图
_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”选项使用。您（同名）的get和post操作将返回您使用的任何模型的局部视图

@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

页面上可以有多个表单。例如，如果您有一个包含要删除任何行的行的表，则可以在该行的表单元格中创建一个表单。这样，删除操作只需一个ID即可执行POST操作。

我建议您将局部视图分成各自的形式，每个独立地起作用。唯一的问题是，如果一种形式的更新要求重新显示另一种形式。您的外部视图比试图进行通信的部分视图可以更好地处理该问题。简单地从一个操作中返回JSON对象中两个视图的结果，并将HTML分配给每个具有部分视图的DIV

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

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

当用户保存（POSTS）他们的更改时，我在第一个答案中建议的代码将重新填充此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>

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

2 个答案: