После нажатия кнопки Частичное представление отображается как макет null

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

Я не уверен, что вы подразумеваете под «нужно перейти к следующему частичному представлению», но причина, по которой у вас нет макета, заключается в том, что вы используете комбинацию этого:

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

Что говорит о том, что вы хотите обновить всю страницу и что:

return PartialView("_PartialView2", model);

, который предназначен для очистки вашего частичного контента без всего вокруг.

Если вам нужно просто перейти от шага «корзина» к «доставке», но при обновлении ваших данных они все равно будут отображаться в одном и том же виде. Я рекомендую использовать

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

, который предназначен только для обновления части вашей страницы. Обязательно включите в свой макет файл «jquery.unobtrusive-ajax.js» (он доступен в NuGet), без него работать не будет.

Надеюсь, это поможет!