Загрузка частичного вида через контроллер при нажатии кнопки «Поиск» - PullRequest
Новая
       32

Загрузка частичного вида через контроллер при нажатии кнопки «Поиск»

0 голосов
/ 19 мая 2019

Я работаю над приложением ASP.NET Core 2.1 MVC, используя бритву. У меня есть searchQuery.cshtml и (индивидуально работающие) viewQuery.cshtml страницы. На моей странице searchQuery я позволил пользователю ввести queryId и, нажав кнопку «Поиск», я хочу запустить действие ViewQuery, которое отображает результаты в viewQuery.cshtml и отображает viewQuery под областью кнопки поиска.

Я не очень хорошо работаю с Ajax или около того. При поиске по клику я вызываю viewQuery Get action через ajax. При нажатии кнопки я передаю введенный queryId типа int. Но когда я загружаю страницу searchQuery, она выдает нулевое исключение для передачи queryId. Я искал несколько часов, но не нашел решения.

searchQuery.cshtml ОБНОВЛЕНО 

<div>
        <div class="col-md-6">
            <dl class="dl-horizontal">
                <dt>
                    @Html.DisplayNameFor(model => model.QueryId)
                </dt>
                <dd>
                    <input asp-for="QueryId" class="form-control" />
                </dd>
            </dl>
        </div>
        <input type="submit" value="Show" />
        <!-- CHANGE IN CALL -->
        <a href="#" class="btn btn-primary" onclick="ShowResult()">Search</a>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">&times;</a>
                <h3 class="modal-title">Query Answer</h3>
            </div>
            <div class="modal-body" id="myModalBodyDiv">

            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success" data-dismiss="modal">Ok</a>
            </div>
        </div>
    </div>

</div> 

<script>
     function ShowResult() {
        // Retrieve queryId
        var queryId = $("#QueryId").val();

        // DisplayS PROPERLY
        alert("Entered ID " + queryId);

        // TRIED '/query/viewQuery' ALSO
        $.ajax({
            type: 'GET',
            url: '../query/viewQuery', 
            data: { queryId: queryId },
            success: function (response) {
                alert(response);    // **DISPLAYS [Object: object]**
                $("#myModalBodyDiv").html(response);

                $('#myModal').modal("show");
            }, error: function (response) {
                alert("Error: " + response);
            }
        });
    }
</script>

Мое действие ViewQuery в контроллере ОБНОВЛЕНО 

        [Route("[controller]/viewQuery/{queryId:int}")]
        public async Task<IActionResult> ViewQuery(int queryId)
        {
            // Retrieve Data from api using HttpClient
            ....
            return PartialView("ViewQuery", qVM); // PartialView(qVM); //View(qVM);
        }

Действие поискового запроса ОБНОВЛЕНО 

        [Route("searchQuery")]   // customer/searchQuery
        public IActionResult SearchQuery()
        {
            return View();
        }

Может кто-нибудь, пожалуйста, помогите мне, как мне достичь моей цели. Просто - текстовое поле, в которое пользователь вводит queryId. Нажатием кнопки хотите передать введенный queryId, вызвать действие GET на контроллере и получить ответ. Наконец покажите ответ под кнопкой поиска. Я просто пытался с вышеупомянутым модальным диалогом, я предпочитаю текст, а не диалог.

Ответы [ 2 ]

0 голосов
/ 20 мая 2019

Вы можете использовать Partial Pages (ViewQuery page), на вашей странице searchQuery вы можете использовать Ajax для вызова действия на стороне сервера с идентификатором параметра. На стороне сервера вы можете запросить базу данных с идентификатором и вернуть PartialView с моделями: 

[HttpPost]
public IActionResult Students (StudentFilter filters)
{
     List students = Student.GetStudents(filters);
     return PartialView("_Students", students);
}

Затем в случае успешного вызова функции Ajax вы можете загрузить html частичного просмотра в связанную область на странице, используя jQuery: 

success: function (result) {
    $("#searchResultsGrid").html(result);
}

Вы можете нажать здесь и здесь для примера кода при использовании шаблона MVC. И здесь - пример кода при использовании Razor Pages.

0 голосов
/ 20 мая 2019

Попробуйте и изолируйте проблему.

Вместо того, чтобы использовать model.QueryId в searchQuery.cshtml, просто жестко закодируйте любую ссылку на "modelid" - таким образом, по крайней мере, вы исключаете возможность того, что Model является нулем вэта страницаЗатем вместо onclick = "ShowResult (@ Model.QueryId)"> жестко закодируйте некоторый известный идентификатор вместо @ Model.QueryId.Затем выполните отладку, чтобы увидеть, ударил ли идентификатор метода действия ViewQuery.Если метод вызван, то вы можете взять его оттуда.

Кроме того, я заметил, что ваши вызовы jquery могут нуждаться в изменении:

Вместо: $ ('myModalBodyDiv').HTML (ответ);вероятно, это должно быть $ ('# myModalBodyDiv'). html (response);("#" отсутствует ..) - то же самое для $ ('myModal').

...