ASP MVC jquery 函数在局部视图中不起作用但在主视图中起作用

Question

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

现在我正尝试通过 bootstrap modal 实现 edit、create 和 delete。因此，在 partial view on table 行按钮单击事件中，我添加了一个函数来打开这样的模式

<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>

Answer 1

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

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

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

Answer 2

你这行在部分页面....

 <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并在文档就绪函数中注册按钮点击事件 .这样您就不必担心脚本放置的位置。

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

ASP MVC jquery 函数在局部视图中不起作用但在主视图中起作用

ASP MVC jquery function not working in partial view but working in main view

asp.net-mvc

jquery

partial-views

twitter-bootstrap