data-ajax-update在dotnet核心jquery unobtrusive ajax中不起作用

loading...


0

我想用部分视图中的ajax数据更新容器中的数据,但页面只是重新加载而没有错误,并且不更新数据 . 请帮我提一下建议 .

它是我的控制器代码

public class HomeController : Controller
{
   public ActionResult OnGetPartial()
    {
        return PartialView();
    }
}

Its my PartialView code

<p>Hello from the Hello World partial at @DateTime.Now</p>

its my index and _layout code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - IntegTest</title>              
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
            @RenderBody()       
        <script src="~/lib/jquery/dist/jquery.js"></script>              
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>                 
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    <script src="~/lib/jquery-validation/dist/additional-methods.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>    
    @RenderSection("Scripts", required: false)
</body>
</html>

Index

<a href="" data-ajax="true" data-ajax-url="@Url.Action("OnGetPartial","Home")" data-ajax-update="#panel" data-ajax-complete="completed" data-ajax-failure="failed">Click Here!</a>
<div id="panel">        
</div>
<script>
    completed = function (xhr) {
        alert('hi ${xhr.responseText}!');
    }
    failed = function (xhr) {
        alert('Status: { xhr.status }, Status Text: { xhr.statusText}');
    }
</script>

loading...

1回答

  • 0

    你需要使用jQuery Unobtrusive AJAX库,它可以在Github中找到:

    https://github.com/aspnet/jquery-ajax-unobtrusive

    您可以从上面的链接下载文件(在src文件夹中)或从VS中的Nuget安装它 . 然后,您需要链接_layout页面中的文件:

    <script src="~/lib/jquery-validation-unobtrusive/jquery.unobtrusive-ajax.js"></script>
    

    之后你的代码应该运行良好 . 此外,您应确保已设置正确的部分视图名称 . 如果您使用的是Razor页面,可以参考this article获取详细代码示例 .

评论

暂时没有评论!