Question

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

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

<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中放置了相同的功能，模态就会正确打开。

为什么会这样？

我想在script中加入partial view的原因是因为我希望将客户端代码放在一起，以便更容易理解和维护。

修改

以下是我的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

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

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

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

Answer 2

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

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

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

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

2 个答案: