ASP MVC jquery 函数不在部分视图中工作，但在主视图中工作答案

【问题标题】：ASP MVC jquery function not working in partial view but working in main viewASP MVC jquery 函数不在部分视图中工作，但在主视图中工作
【发布时间】：2016-02-17 08:44:10
【问题描述】：

我有一个带有搜索条件的主视图。主视图包含带有html 表的局部视图。搜索结果通过ajax 加载。

现在我正在尝试通过bootstrap modal 实现edit、create 和delete。所以在partial view on table row button click 事件中我添加了一个函数来打开这样的模式

<button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button" onclick="ShowModal();">
    <i class="fa fa-fw fa-info"></i>
</button>

<script type="text/javascript">
    function ShowModal() {
        $('#myModal').modal('show');
        //return false;
    }
</script>

如果放在partial view 中，此功能将不起作用。但是，一旦我在 main view 中放置了相同的函数，模式就会正确打开。

为什么会这样？

我之所以想在我的partial view 中包含script，是因为我想将我的客户端代码放在一起，以便更容易理解和维护。

编辑

以下是我的main view以及相关的scripts：

@model MVC_Replica.Models.LocationSearchViewModel

@using (Html.BeginForm("index", "Locations", FormMethod.Get)){
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div id="">
                <h1 class="page-header" id="lblDboard">Location List</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-3">
                            @Html.TextBoxFor(m => m.LocationSearch.LocationName, new { @class = "form-control", @placeholder = "Location Name", @name = "locationName" })
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer clearfix">
                <input type="button" id="cmdSearch" class="btn btn-primary" value="Search" />
            </div>
        </div>
    </div>
    <div class="row" id="locationGrid">
        @Html.Partial("_LocationGrid")
    </div>
</div>
}

scripts

<script type="text/javascript">
    $(function () {
        $('[data-toggle=tooltip]').tooltip();
        $('#cmdSearch').click(function () {
            var locationName = $('#LocationSearch_LocationName').val();

            $('#locationGrid').block({ message: '<img src="../media/ajax-loading.gif"/>' });

            setTimeout(SearchLocations, 2000);

            function SearchLocations() {
                $.ajax({
                    url: "/Locations/SearchLocations",
                    type: "POST",
                    data: { 'locationName': locationName },
                    dataType: "html",
                    success: function (response) {
                        $('#locationGrid').empty();
                        $('#locationGrid').html(response);

                        $('[data-toggle=tooltip]').tooltip();
                    },
                    error: function (xmlHttpRequest, errorText, thrownError) {
                        alert(xmlHttpRequest + '|' + errorText + '|' + thrownError);
                    }
                });
            }
        });
    });
</script>    <!--Search Locations AJAX-->

部分视图 HTML

@model MVC_Replica.Models.LocationSearchViewModel
@{
    IEnumerable<MVC_Replica.Models.Location> location = Model.LocationList;
    Layout = null;
}
<div class="table-responsive">
    <table class="table table-responsive table-condensed table-bordered table-striped">
        <tr>
            <th>
                <button class="btn btn-outline btn-success" data-toggle="tooltip" title="Create New Location" data-placement="bottom"
                        onclick="location.href='@Url.Action("Create", "Locations")';return false;">
                    <i class="fa fa-fw fa-plus"></i>&nbsp; Create
                </button>
            </th>
            <th>
                Location Name
            </th>
            <th>
                Date Created
            </th>
            <th>
                Location State
            </th>

        </tr>

        @foreach (var item in location)
        {
            <tr>
                <td>
                    <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Edit Location"
                            onclick="location.href='@Url.Action("Edit", "Locations", new  { id=item.LocationId})';return false;">
                        <i class="fa fa-fw fa-pencil"></i>
                    </button>
                    <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
                            onclick="ShowModal();">
                        <i class="fa fa-fw fa-info"></i>
                    </button>
                    <button class="btn btn-outline btn-danger" data-toggle="tooltip" title="Delete Location"
                            onclick="location.href='@Url.Action("Delete", "Locations", new  { id=item.LocationId})';return false;">
                        <i class="fa fa-fw fa-remove"></i>
                    </button>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LocationName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DateCreated)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LocationState)
                </td>
            </tr>
        }

    </table>

</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

【问题讨论】：

您的浏览器错误日志中有异常吗？
脚本不应该是部分的。除了它们是内联的之外，如果您在视图中有多个部分（您似乎有），它可能会导致问题。
我一直在处理这种情况并最终理解为什么会发生这种情况，我可以帮助您更好地理解它。但在此之前，我想知道您是如何加载局部视图的
我检查了控制台，确实收到了一个错误：ReferenceError: ShowModal is not defined。我将编辑我的问题以显示完整的场景
有人这么说是因为他们在将脚本放置在局部视图中时会发现问题:)，但我反对它，如果我们有一个所有页面都通过 AJAX 加载的单页应用程序怎么办。 all 必须是部分视图，我们可以一次性加载整个应用程序模块脚本。

标签： jquery asp.net-mvc twitter-bootstrap partial-views

【解决方案1】：

你在部分页面中的这一行......

 <button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
                        onclick="ShowModal();">

因此，当您在 ajax 调用中执行 $('#locationGrid').html(response); 时，页面将添加到 DOM 中并触发文档就绪事件（如果您的部分页面脚本中有），因此当 HTML 添加到 DOM 时，它开始解析顶部，在解析 HTML 时，上面的行被命中，它试图找到一个名为 ShowModal 的函数，但它尚未加载到 DOM 中。因此，您可以将脚本放在部分页面的开头，以便在到达此行之前解析脚本标记并且函数可用。或您可以从按钮标签中删除onclick，并在文档准备功能中注册按钮点击事件。这样您就不必担心放置脚本的位置。

如果这解决了您的问题，请告诉我。

【讨论】：

【解决方案2】：

由于您使用的是局部视图，我假设您以迭代方式使用它们。这意味着您将多次创建相同的 java 脚本函数。

这就是它不起作用的原因。

您应该避免在局部视图中使用脚本。

【讨论】：