Частичное представление при нажатии кнопки в ядре asp.net

Question

В зависимости от того, какая кнопка нажата, я хочу визуализировать частичное представление внутри элемента div.Если нажата кнопка1, то отображается частичный вид1, а если нажата кнопка2, то отображается частичный вид2.Как я могу это сделать.

Основной вид: enter code here

<button id="button1">One</button>
<button id="button2">Two</button>

<div id="search">
//Render Partial view here based on which button is clicked.
</div>

Частичный вид1:

<p>In Partial View1</p>

Частичное представление2:

<p>In Partial View2</p>

   

Answer 1

После того, как я нажму синюю кнопку, я хочу, чтобы частичная страница отображалась в области Div под синей кнопкой.Но его рендеринг выше кнопки в серой области, которая является моей общей областью макета.

До нажатия введите описание изображения здесь

После введите описание изображения здесь

Answer 2

Я думаю, что код, который вы разместили, должен работать, но вам нужно запросить правильную конечную точку вашего домашнего контроллера.Учитывая ваш минимальный модифицированный код (см. URL-адрес ajax):

        <input id="btnSearch" type="button" class="btn btn-primary" value="Search" />

        <div id="students">

        </div>

<script>
    $('#btnSearch').on('click',
        function (e) {
            $.ajax({
                url: '/Home/View2',
                    type: 'POST',
                    cache: false,
                    async: true,
                dataType: "html"


                })
                .done(function(result) {
                    $('#students').html(result);
                }).fail(function(xhr) {
                    console.log('error : ' + xhr.status + ' - ' + xhr.statusText + ' - ' + xhr.responseText);
                });

        });

</script>

И ваш HomeController.cs должен иметь такой второй метод:

public IActionResult View2(){
  return PartialView();
}

Редактировать Я думаю, что эти страницы могли бы помочь вамчтобы получить общее представление о контроллерах и обработке:

• Контроллеры и конечные точки: https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-3.0

• Добавление поиска: https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/search?view=aspnetcore-3.0

  • Но вы используете PartialView через jquery вместо того, чтобы возвращать полный просмотр.
  • Ваш метод поиска должен заканчиваться на return PartialView(....)

Answer 3

Я пробовал этот код, но проблема в том, что частичное представление загружается, но не внутри элемента div.

        <input id="btnSearch" type="button" class="btn btn-primary" value="Search" />
        
        <div id="students">
           
        </div>

<script>
    $('#btnSearch').on('click',
        function (e) {
            $.ajax({
                url: '/Home/About',
                    type: 'POST',
                    cache: false,
                    async: true,
                dataType: "html"
                

                })
                .done(function(result) {
                    $('#students').html(result);
                }).fail(function(xhr) {
                    console.log('error : ' + xhr.status + ' - ' + xhr.statusText + ' - ' + xhr.responseText);
                });

        });

</script>