视图中的 Asp.net 部分视图无法从视图中识别

Posted 2023-05-08

【中文标题】视图中的 Asp.net 部分视图无法从视图中识别

【英文标题】：Asp.net partial view in a view not being recognized from within a view

【发布时间】：2020-12-04 19:56:13

【问题描述】：

我创建了一个小博客，并且我有一个视图并在其中嵌入了一个局部视图。 嵌入的局部视图是“喜欢”按钮（链接）。

它出现在视图中，但是当我单击“喜欢”锚时，它不会进入局部视图。 我有一个警报和控制台日志，但它们没有出现。

当我点击它时，# 会附加到 URL。

我做错了什么？ 另外，我想从父视图中的按钮引用一个值。 我尝试： var blogId = $(this).attr("data-id");

对吗？

--- 视图 - 父级。

@model GbngWebClient.Models.BlogPublishedByBlogIdVM

<h2 class="page-header"><span class="blogtitle">@Session["BlogTitle"]</span></h2>

@
    Layout = "~/Views/Shared/_LayoutUser.cshtml";


@if (ViewBag.errormessage != null)

    <p class="alert alert-danger" id="errorMessage">@ViewBag.errormessage</p>


<br />

<div>
    <a href="@Url.Action("LoadDropdownBlogCategorysInBlogsPublished", "BlogPublished")">Return To 
Select a Blog</a>
</div>
<br />

@if (Model != null)

<div class="panel panel-default toppanel">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-2">
                @Html.LabelFor(model => model.BlogPublishedByBlogId.CreatedDateTime)
                @Html.TextBoxFor(model => model.BlogPublishedByBlogId.CreatedDateTime, new  @class = "form-control", @disabled = "disabled" )
            </div>
            <div class="col-md-2">
                @Html.LabelFor(model => model.BlogPublishedByBlogId.ModifiedDateTime)
                @Html.TextBoxFor(model => model.BlogPublishedByBlogId.ModifiedDateTime, new  @class = "form-control", @disabled = "disabled" )
            </div>
        </div>
        <br />

        <div class="row">
            <div>
                @Html.DisplayFor(model => model.BlogPublishedByBlogId.BlogContent, new  @class = "form-control blogContent", @disabled = "disabled" )
            </div>
        </div>
        <br />

        <div class="row">
            <div>
                @Html.Partial("_BlogLikeOrDislike")
            </div>
        </div>
        <br />

        <div class="panel-footer">
            <button type="button" class="btn btn-primary Comment" data-id="@Model.BlogPublishedByBlogId.BlogId" value="Comment">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)
            </button>
        </div>

        @* The area dynamically built. It will hold the partial view - BlogPublished/_Comments.cshtml which also holds the partial view - BlogPublished/_CommentReplys.cshtml. *@
        @* The partial view is shown after the 'Get Comment(s)' button above is clicked. *@

        @* Add comment area. *@
        <div id="@string.Format("0_1","commentsBlock", @Model.BlogPublishedByBlogId.BlogId)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
            @*Centering the button with in-line CSS. *@
            <div class="AddCommentArea" style="margin-left: 30%;  margin-bottom: 5px; margin-top: 8px;">
                @Html.AntiForgeryToken()
                <input type="text" id="@string.Format("0_1", "comment", @Model.BlogPublishedByBlogId.BlogId)" class="form-control" placeholder="Add a comment..." style="display: inline;" />
                @* Button. *@
                <button type="button" class="btn btn-primary addComment" data-id="@Model.BlogPublishedByBlogId.BlogId"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
</div>


@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

@section Scripts

    <script type="text/javascript">
    $(document).ready(function () 
        // Has ajax calls to controller methods.
     );
</script>

--- 小部分视图 - _BlogLikeOrDislike.cshtml。

<div>
<a href="#" class="LikeOrDislike" style="margin-left: 5px; font-weight: bold; font-size: 13px;">Like</a>
</div>

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")

@section Scripts

<script type="text/javascript">
    $(document).ready(function () 
        alert('here.');
        console.log('here.');

        $('.LikeOrDislike').on('click', function () 
            // HOW TO REFERENCE THE PARENTS VALUE?.
            var blogId = $(this).attr("data-id");

            alert('here. blogid from parent: ' + blogId);

            $.ajax(
                type: 'GET',
                url: '@Url.Action("SetBlogLikeCountOrDislikeCount", "BlogPublished")',
                data:  blogId: blogId ,
                success: function (response) 

                ,
                error: function (xhr, ajaxOptions, thrownError) 
                    alert("Critical Error: something is wrong in the call to SetBlogLikeCountOrDislikeCount! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
                
            )
        );
    );
</script>

【问题讨论】：

这更像是一个 jquery 问题。顺便说一句：你的部分有点乱；您应该将 bundles-stuff 移动到父视图或布局。

如果我将局部视图的 JavaScript 代码移动到父级，它可以工作。 I,e DIV 是现在局部视图中唯一的东西。局部视图不能拥有自己的 JavaScript 来触发控制器方法吗？我想要这样，这样我就可以在任何父视图中重用这个局部视图。

您当然可能在您的部分中有 js，我认为这很混乱，是 @Scripts.Render("~/bundles/jqueryval") 在部分中带有特定代码。那应该在页面或布局中。您可以使用 @Scripts.Render-stuff 创建一个单独的部分，并在您的 e.g. 中使用它。页面。

好的..我删除了 @Scripts.Render 但这并没有解决我的问题。它无法识别部分中的 JS。让它工作的唯一方法是将 JavaScript 移动到父级。

如果您在 chrome 中按 F12 并查看控制台，您可能会看到解释问题的 som js-errors。

【参考方案1】：

在局部视图中，我不得不删除：

   @section Scripts
   
   

围绕 JavaScript

只要有：

    @Scripts.Render("~/bundles/jquery").

没有它，我得到：Uncaught ReferenceError: $ is not defined。 图书馆没有被带进来。

根据建议而不是：

$(document).ready(function ()

和

@Scripts.Render("~/bundles/jquery")

我可以使用：

 document.addEventListener("DOMContentLoaded", function ()

没有

@Scripts.Render("~/bundles/jquery")

所以现在正在执行脚本部分。

现在，要将值从父视图传递到局部视图，我必须在父视图中创建一个模型：

 @
    double parentBlogId = @Model.BlogPublishedByBlogId.BlogId;
 

并将其传递为：

<div class="row">
     <div>
         @Html.Partial("_BlogLikeOrDislike", parentBlogId)
     </div>
</div>

并在局部视图的点击函数中接收它：

   var parentBlogId  = @Model;