如何在 MVC 中从部分视图回发数据?

Question

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

1. 索引 - 主视图
2. _Details - 部分视图
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. _Address - 部分视图

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

共享控制器

获取地址的操作

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

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

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

最初填充部分有两种选择。如果您的主视图中有类似的东西，则在首次加载时，RAZOR 引擎会将详细信息 HTML 呈现到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>