Question

我正在使用剃刀开发ASP.NET Core 2.1 MVC应用程序。我有searchQuery.cshtml和一个（单独正常工作的）viewQuery.cshtml页面。在我的searchQuery页面中，我让用户输入queryId，然后单击“搜索”按钮，然后运行ViewQuery的操作，该操作将结果显示在viewQuery.cshtml中，并在搜索按钮区域下方显示viewQuery。

与Ajax一起工作不是很好。在Search btn单击上，我通过Ajax调用viewQuery Get操作。在按钮单击中，我传递输入的int类型的queryId。但是，当我加载searchQuery页面时，它将为传递queryId引发null异常。我搜索了一些房子，但没有任何解决方法。

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操作并获取响应。最后，在搜索按钮下方显示响应。我只是尝试使用上述模式对话框，我更喜欢文本而不是对话框。

Answer 1

尝试并找出问题所在。

与其在searchQuery.cshtml中使用model.QueryId，不如简单地对“ modelid”的任何引用进行硬编码-这样至少可以消除该页面上Model为null的可能性。然后，代替onclick =“ ShowResult（@ Model.QueryId）”>硬编码一些已知的ID，而不是@ Model.QueryId。然后调试以查看您的ViewQuery操作方法ID是否命中。如果该方法被点击，那么您可以从那里开始。

此外，我注意到您的jquery调用可能需要修改：

代替：$（'myModalBodyDiv'）。html（response）;它可能应该是$（'＃myModalBodyDiv'）。html（response）; （“＃”丢失了..）-与$（'myModal'）相同。

Answer 2

您可以使用Partial Pages（ViewQuery页面），在searchQuery页面中，可以使用Ajax调用带有参数ID的服务器端操作。在服务器端，您可以使用ID查询数据库并返回具有Models的PartialView：

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

然后在Ajax的成功回调函数中，您可以使用jQuery将部分视图的html加载到页面中的相关区域：

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

如果使用MVC模板，则可以单击here和here以获得代码示例。如果使用Razor页面，则here是代码示例。

通过控制器在搜索按钮上点击加载局部视图

2 个答案: