[英]Working with multiple partial views
美好的一天
我正在索引頁面上使用7個局部視圖。
Index.cshtml (在其自己的標簽中創建部分視圖的代碼部分)
@model project1.Models.MasterModel
<div class="tab-content col-lg-9 col-md-9 col-sm-9 col-xs-9" style="margin-bottom:110px;">
<div id="partial1" class="tab-pane fade in active">
@Html.Partial("partial1", Model)
</div>
<div id="partial2" class="tab-pane fade in">
@Html.Partial("partial2", Model)
</div>
<div id="partial3" class="tab-pane fade in">
@Html.Partial("partial3", Model)
</div>
<div id="partial4" class="tab-pane fade in">
@Html.Partial("partial4", Model.Owners)
</div>
<div id="partial5" class="tab-pane fade in">
@Html.Partial("partial5", Model)
</div>
<div id="partial6" class="tab-pane fade in">
@Html.Partial("partial6", Model)
</div>
<div id="partial7" class="tab-pane fade in">
@Html.Partial("partial7", Model)
</div>
在partial1
我有一個partial1
按鈕,該按鈕應使用在第一個局部視圖上提交的信息填充其他局部視圖。
我的Model
包含7個模型(每個局部視圖一個)
MasterModel.cs
public class MasterModel
{
public DisplayPartial1 view1 {get;set;}
public DisplayPartial2 view2 {get;set;}
public DisplayPartial3 view3 {get;set;}
public DisplayPartial4 view4 {get;set;}
public DisplayPartial5 view5 {get;set;}
public DisplayPartial6 view6 {get;set;}
public DisplayPartial7 view7 {get;set;}
}
在控制器的Index Action結果中,我創建了MasterModel的新實例,然后為所有子模型創建了新實例,並返回到Index視圖。
MainController.cs
// Global variable used and returned by all partial views
MasterModel main = new MasterModel();
public ActionResult Index()
{
MasterModel master = new MasterModel();
master.view1 = new DisplayPartial1 ();
master.view2 = new DisplayPartial2 ();
master.view3 = new DisplayPartial3 ();
master.view4 = new DisplayPartial4 ();
master.view5 = new DisplayPartial5 ();
master.view6 = new DisplayPartial6 ();
master.view7 = new DisplayPartial7 ();
return View(master);
}
public ActionResult MyPartial1()
{
return PartialView("MyPartial1", master);
}
[HttpPost]
public ActionResult MyPartial1(MasterModel model, string submitButton)
{
if(submitButton == "GetInfo")
{
/*Process input values*/
//wcf service return data
main.view1.id = serviceObject.Id;
...
main.view4.name = serviceObject.Name;
...
}
return PartialView("MyPartial1", master);
}
當返回MyPartial1
,其他6個局部視圖將不使用分配的信息進行更新,直到我使用如下所示的Java腳本執行MyPartial1
調用:
<script type="text/javascript">
$(document).ready(function () {
$('#input1').change(function () {
$('form').submit();
});
$('#input2').change(function () {
$('form').submit();
});
});
</script>
局部視圖示例 (所有局部視圖都在相同的主體上工作)
@model OperatorLicense.Models.MasterModel
@using (Ajax.BeginForm("MyPartial1", "Operator", null, new AjaxOptions
{
UpdateTargetId = "MyPartial1",
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post"
}, new { id = "MyPartial1" }))
{
@Html.TextBoxFor(model => model.view1.SerialNumber, new { id="SerialNumber", @class = "form-control", placeholder = Html.DisplayNameFor(n => n.view1.SerialNumber) })
...
}
返回MyPartial1
局部視圖后,是否可以刷新其他局部視圖,以便可以在所需的局部視圖上顯示確定的值?
您可以使用AjaxOptions
類的OnSuccess
或OnComplete
屬性。
@using (Ajax.BeginForm("MyPartial1", "Operator", null, new AjaxOptions
{
UpdateTargetId = "MyPartial1",
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post",
OnSuccess="partial1Success"
}, new { id = "MyPartial1" }))
{
@Html.TextBoxFor(model => model.view1.SerialNumber, new { id="SerialNumber", @class = "form-control", placeholder = Html.DisplayNameFor(n => n.view1.SerialNumber) })
...
}
在javascript中定義partial1Success
方法
<script type="text/javascript">
function partial1Success(){
// write your other partial view refresh logic here
}
</script>
成功提交后調用的partial1Success
方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.