Question

我有以下观点：

@model EDR.Presentation.WebMain.ViewModels.MvcSupportQueryViewModel 
@{
    ViewBag.Title = "Support Queries";
}

<div id="updatedContent">
    @{ Html.RenderPartial("_QueryList", Model); }
</div>

@section scripts{
    @Scripts.Render("~/Scripts/Model Scripts/Support Queries/SupportQueries.js")
}

这是_QueryList部分视图：

@model EDR.Presentation.WebMain.ViewModels.MvcSupportQueryViewModel 

@Styles.Render("~/Content/css")

<h2>Support Queries</h2>

@using (Ajax.BeginForm("SearchQueries", "SupportQueries", new AjaxOptions() { HttpMethod = "get", UpdateTargetId = "updatedContent", InsertionMode = InsertionMode.Replace }))
{
    <div class="col-md-6">
        @Html.LabelFor(model => model.QueryFilter)
        @Html.DropDownList("QueryFilter", Model.QueryFilter)
    </div>
    <div class="col-md-6">
        @Html.LabelFor(model => model.DRTBUnitCollection)
        @Html.DropDownList("DRTBUnit", Model.DRTBUnitCollection)
    </div>

    <input type="submit" value="Search" class="btn btn-info" />
}

<div class="lineSeperator-100"></div>

@if (Model.QueryCollection.ModelCollection.Items.Count > 0)
{
    <div class="table table-responsive">
        <table class="table-hover">
            <thead>
                <tr>
                    <th class="col-md-1">Reference</th>
                    <th class="col-md-1">Type</th>
                    <th class="col-md-3">Facility</th>
                    <th class="col-md-4">Subject</th>
                    <th class="col-md-1">Date</th>
                    <th class="col-md-1">Resolved</th>
                    <th class="col-md-1"></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var value in Model.QueryCollection.ModelCollection.Items)
                {
                    <tr>
                        <td class="col-md-1">@value.ReferenceNoDisplay</td>
                        <td class="col-md-1">@value.QueryType.DisplayName</td>
                        <td class="col-md-3">@value.Facility.Name</td>
                        <td class="col-md-4">@value.Subject</td>
                        <td class="col-md-1">@value.QueryDate.Value.ToShortDateString()</td>
                        <td class="col-md-1">@value.IsResolved</td>
                        <td class="col-md-1">@Ajax.ActionLink("View", "ViewSupportQuery", new { queryID = value.ID }, new AjaxOptions() { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "updatedContent" },new { @class = "btn btn-info" })</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

    if (Model.QueryCollection.CanGoPrevious)
    { 
        @Ajax.ActionLink("<<", "Paging", new { pageNumber = Model.QueryCollection.PageNumber - 1, queryFilter = Model.UserQueryFilter.ToString(), drTBUnit = Model.FacilityID }, 
                                new AjaxOptions() { HttpMethod = "get", UpdateTargetId = "updatedContent", InsertionMode = InsertionMode.Replace }, 
                                new { @class = "btn btn-info" })
    }
    if (Model.QueryCollection.CanGoNext)
    {
        @Ajax.ActionLink(">>", "Paging", new { pageNumber = Model.QueryCollection.PageNumber + 1, queryFilter = Model.UserQueryFilter.ToString(), drTBUnit = Model.FacilityID },
                                new AjaxOptions() { HttpMethod = "get", UpdateTargetId = "updatedContent", InsertionMode = InsertionMode.Replace },
                                new { @class = "btn btn-info" })
    }

}
else
{
    @Html.Label("No Queries to display")
}

当我点击此部分视图中的“查看”按钮时，它会返回另一个部分视图，将div元素中的所有内容替换为ID“updatedContent”。

以下是支持“查看”功能的控制器操作。

[HttpGet]
public PartialViewResult ViewSupportQuery(Guid queryID)
{
    var vm = new MvcSupportQueryViewModel()
    {
        QueryID = queryID
    };
    vm.GetQueryByID();

    return PartialView("_ViewQuery", vm);
}

然而，在我点击“查看”按钮后，它会打开一个新的局部视图。如果我在Chrome中检查我的来源，我可以看到不再加载JQuery文件。

JQuery文件放在我视图中的@section中，根据我的理解，包括视图中的JQuery，它应该在所有前面的部分视图中都可用。

我在这里错过了什么吗？

Answer 1

好的，问题似乎与我的JQuery代码有关。

我替换了以下JQuery代码：

$("#btnAddResponse").on("click", function () {
    $("#hiddenContent").slideToggle();
});

使用以下事件委派方法：

$(document).on("click", "#btnAddResponse", function () {
    $("#hiddenContent").slideToggle();
});

在View中加载的JQuery在部分视图中不可用

1 个答案: