Question

我有一个视图，该视图由2个局部视图组成。一个局部视图具有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

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

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

Wich告诉您要更新所有页面，并且：

return PartialView("_PartialView2", model);

Wich旨在清除您的部分内容而没有任何内容。

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

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

仅用于更新页面的一部分。确保在您的布局中包含“ jquery.unobtrusive-ajax.js”（在NuGet中可用），没有它就无法使用。

希望有帮助！

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

主视图

_PartialView1

_PartialView2

控制器帖子

2 个答案: