使用多个局部视图

Question

美好的一天

我的索引页面上有 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 上，我有一个提交按钮，它应该使用在第一个局部视图上提交的信息填充其他局部视图。

我的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 脚本进行提交调用：

<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 部分视图返回时刷新其他部分视图，以便分配的值可以显示在所需的部分视图上？

Answer 1

您可以使用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 提交成功后调用的方法。