单击按钮后，局部视图显示为布局null

Question

我有一个视图，该视图由2个部分Views.One部分视图组成，部分视图具有FormSubmit，当表单提交者单击它时，它需要转到下一个部分视图，我尝试过了，但问题是第二个部分视图显示为没有布局

主视图

 <div class="card-body px-1 px-md-5 pt-5" id="cartpartial">
            @Html.Partial("_PartialView1",Model)


        </div>
        <div class="card-body px-1 px-md-5 pt-5" id="deliverypartial">
            @Html.Partial("_PartialView2",Model)
        </div>

_PartialView1

@model XYZ.Domain.MyModel

@using (Html.BeginForm("UpdateNewsItem", "Home", FormMethod.Post))
{
//Some Code Here
 <input type="submit" class="btn btn-primary rounded-pill btn-lg" value="Next" />
}

_PartialView2

@model XYZ.Domain.MyModel
//Some Code Here

控制器开机自检

[HttpPost]
 public ActionResult UpdateNewsItem(MyModel model)
 {
  // Some code here
  return PartialView("_PartialView2", model);
 }

Answer 1

我的朋友。很抱歉回复得太晚了。这是我的解决方案。你可以参考。希望能帮上忙：)

主视图

<div class="card-body px-1 px-md-5 pt-5" id="cartpartial">
    @{Html.RenderPartial("_PartialView1", Model);}

</div>
<div class="card-body px-1 px-md-5 pt-5" id="deliverypartial">
    @{Html.RenderPartial("_PartialView2", Model);}
</div>

@section scripts{
    <script>
        $(document).on('click', '#btnSubmit', function () {
            $(this).prop('disabled', true); //prevent multiple click
            $.ajax({
                url: '@Url.Action("UpdateNewsItem", "Home")',
                type: 'POST',                
                data: $('#form1').serialize(),
                success: function(result){                    
                    $('#deliverypartial').html(result);
                    $('#cartpartial').hide(); //you can hide partial view 1 if you want
                }
             });
        });
    </script>
}

_PartialView 1

@using (Html.BeginForm("UpdateNewsItem", "Home", FormMethod.Post, new { id = "form1"}))
{
    <div class="col-md-12">
        @Html.TextBoxFor(t => t.Email)
        <input type="button" class="btn btn-primary rounded-pill btn-lg" value="Next" id="btnSubmit" />
    </div>

}

Answer 2

我不确定你说的“它需要转到下一个局部视图”是什么意思，但你没有布局的原因只是因为你使用了它们的组合：

@using (Html.BeginForm("UpdateNewsItem", "Home", FormMethod.Post))

这就是说你想要更新你所有的页面，并且：

return PartialView("_PartialView2", model);

这意味着在没有任何东西的情况下刷新你的部分内容。

如果您的需求只是从“购物车”步骤转到“交付”步骤，但在更新数据时仍将这两个步骤放在同一视图中。我建议使用

@using (Ajax.BeginForm("UpdateNewsItem", "Home", ...

这意味着只更新页面的一部分。确保在您的布局中包含"jquery.unobtrusive-ajax.js“(它在NuGet中可用)，没有它它将无法工作。

希望它能帮上忙！