ASP.NET Core搜索后PartialView跳转新页、onClick事件不触发问题求解

存在的问题 #

• 表单默认提交行为未拦截：你用了type="submit"的按钮，点击后会触发表单默认跳转，直接加载action指定的/Books/BookDetail地址到整页，所以才会整页展示结果而非局部渲染。
• onClick事件绑定错误：onclick属性值需要加函数调用括号，你写的onclick="showBook"是错误的，正确写法是onclick="showBook()"。
• 前端请求地址错误、缺参数：jQuery load方法里请求的/Controllers/BooksController/BookDetail是错误的，ASP.NET Core路由中控制器路径不需要写Controllers目录、也不需要加Controller后缀，正确地址是/Books/BookDetail；同时你没有把输入框的barcodes参数传给后端，后端拿不到查询条件。
• 异步方法调用错误：后端你用products.Result调用异步方法，会引发线程死锁风险，不符合异步编程规范。
• 错误场景返回类型错误：查询不到数据时你返回的是完整视图View("AddBook")，如果要局部渲染应该返回PartialView，否则会把完整页面的HTML塞进局部容器。
• 隐含依赖问题：如果你的页面没有引入jQuery，$('#partialContent').load方法会直接报错无法执行。

修复后的代码 #

主视图代码 #

<div class="container">
    <!-- Outer Row -->
    <div class="row justify-content-center">
        <div class="col-6 p-3">
            <form class="form-group" onsubmit="return false;"> <!-- 阻止表单默认提交 -->
                <div class="input-group">
                    <input type="text" id="barcodeInput" name="barcodes" class="form-control bg-light border-0 small bg-gray-200" placeholder="Kitap Barkodunu giriniz..." aria-label="Search" aria-describedby="basic-addon2">
                    <button class="btn btn-primary" type="button" id="myBtn" name="myBtn" onclick="showBook()"> <!-- 改成button类型，补全函数调用括号 -->
                        <i class="fas fa-search fa-sm"></i>
                    </button>
                </div>
            </form>
        </div>    
        <br />
        <div id="partialContent">
        </div>
    </div>
</div>
<!-- 注意：请确保页面已提前引入jQuery库，否则$相关语法无法正常执行 -->
<script>
    function showBook() {
        // 读取输入框的条码值
        const barcodeVal = $('#barcodeInput').val();
        if(!barcodeVal.trim()) return;
        // 拼接参数请求正确的后端地址
        $('#partialContent').load("/Books/BookDetail?barcodes=" + encodeURIComponent(barcodeVal));
    }
</script> 

控制器代码 #

// 改为异步Action避免死锁
public async Task<IActionResult> BookDetail(string barcodes)
{
    var products = await _httpTool.HttpGetAsync<List<Products>>($"{AppSettings.ApiUrl}/GetProducts?barcodes={barcodes}");       
    if(products?.Count > 0)
    {
        ViewBag.result = "Success";
        var product = products[0]; 
        return PartialView("_BookDetailPartial", product);
    }
    else
    {
        ViewBag.result = "Failed";
        // 查询失败时返回对应局部视图，不要返回完整View
        return PartialView("_AddBookPartial");
    }
}

内容的提问来源于stack exchange，提问作者aoiTenshi