ASP MVC jQuery函数的局部视图不工作，但在主视图中工作 [英] ASP MVC jquery function not working in partial view but working in main view
问题描述
我有搜索条件的主视图。主视图包含与 HTML 表的局部视图。搜索结果将通过 AJAX 加载。
现在我试图实施修改，创建和删除通过引导模式。因此，在的部分观点上表行按钮单击事件我增加了一个功能，打开这样的模式
＆LT;按钮类=BTN BTN外形BTN-主要数据切换=提示称号=详细地点类型=按钮的onclick =的ShowModal（） ;＆GT;
＆LT; I类=发FA-FW FA-信息＆GT;＆LT; I＆GT /;
＆LT; /按钮＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
起作用的ShowModal（）{
$（'＃myModal'）模态（'秀'）。
//返回false;
}
＆LT; / SCRIPT＆GT;
如果放在局部视图此功能不起作用。但是，一旦我把我的主视图里面相同的功能，模态正常打开。
为什么会出现这种情况？
为什么我想有剧本我的局部视图里面的原因，是因为我想继续我的客户端code在一起，因此更容易理解和维护。
修改
以下是我的主视图与相关：脚本一起
@model MVC_Replica.Models.LocationSearchViewModel@using（Html.BeginForm（指数，位置，FormMethod.Get））{
＆LT; DIV ID =页面包装＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-LG-12＆GT;
＆LT; DIV ID =＆GT;
＆LT; H1类=页面标题ID =lblDboard＆GT;位置列表＆LT; / H1＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =面板面板主要＆GT;
＆LT; DIV CLASS =面板体＆GT;
＆LT; DIV CLASS =形横＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV CLASS =COL-MD-3＆GT;
@ Html.TextBoxFor（M = GT; m.LocationSearch.LocationName，新{@class =表格控，@placeholder =地点名称，@name =LOCATIONNAME}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =板尺clearfix＆GT;
＆LT;输入类型=按钮ID =cmdSearch级=BTN BTN-主要值=搜索/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行ID =locationGrid＆GT;
@ Html.Partial（_ LocationGrid）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
}
这是在脚本
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$（'[数据切换=提示]'）提示（）。
$（'＃cmdSearch'）。点击（函数（）{
。VAR LOCATIONNAME = $（'＃LocationSearch_LocationName）VAL（）; $（'＃locationGrid'）块（{消息：'＆LT; IMG SRC =../媒体/ AJAX-loading.gif/＆GT;'}）; 的setTimeout（SearchLocations，2000年）; 功能SearchLocations（）{
$阿贾克斯（{
网址：/位置/ SearchLocations
键入：POST，
数据：{'LOCATIONNAME'：LOCATIONNAME}，
数据类型：HTML，
成功：函数（响应）{
$（'＃locationGrid'）空（）。
$（'＃locationGrid'）的HTML（响应）; $（'[数据切换=提示]'）提示（）。
}，
错误：功能（xmlHtt prequest，ERRORTEXT，thrownError）{
警报（xmlHtt prequest +'|'+ ERRORTEXT +'|'+ thrownError）;
}
}）;
}
}）;
}）;
＆LT; / SCRIPT＆GT; ＆LT;！ - 搜索位置AJAX - ＆GT;
部分查看HTML
@model MVC_Replica.Models.LocationSearchViewModel
@ {
IEnumerable的＆LT; MVC_Replica.Models.Location＆GT;位置= Model.LocationList;
布局= NULL;
}
＆LT; DIV CLASS =表响应＆GT;
＆LT;表类=table表响应表凝聚表边框的表格条纹＆GT;
＆所述; TR＆GT;
＆LT;第i个
＆LT;按钮类=BTN BTN外形BTN-成功数据切换=提示称号=创建新地点的数据放置=底
的onclick =location.href ='@ Url.Action（创建，位置）';返回false;＆GT;
＆LT; I类=发FA-FW FA-加上＆GT;＆LT; / I＆GT;＆安培; NBSP;创建
＆LT; /按钮＆GT;
＆LT; /第i
＆LT;第i个
地点名称
＆LT; /第i
＆LT;第i个
创建日期
＆LT; /第i
＆LT;第i个
所在国
＆LT; /第i ＆LT; / TR＆GT; @foreach（在位置VAR项）
{
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;按钮类=BTN BTN外形BTN-主要数据切换=提示称号=修改位置
的onclick =location.href ='@ Url.Action（编辑，位置，新{ID = item.LocationId}）;返回false;＆GT;
＆LT; I类=发FA-FW FA-铅笔＆GT;＆LT; I＆GT /;
＆LT; /按钮＆GT;
＆LT;按钮类=BTN BTN外形BTN-主要数据切换=提示称号=详细地点类型=按钮
的onclick =的ShowModal（）;＆GT;
＆LT; I类=发FA-FW FA-信息＆GT;＆LT; I＆GT /;
＆LT; /按钮＆GT;
＆LT;按钮类=BTN BTN外形BTN-危险数据切换=提示称号=删除位置
的onclick =location.href ='@ Url.Action（删除，位置，新{ID = item.LocationId}）;返回false;＆GT;
＆LT; I类=发FA-FW FA-删除＆GT;＆LT; / I＆GT;
＆LT; /按钮＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.LocationName）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.DateCreated）
＆LT; / TD＆GT;
＆所述; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.LocationState）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
} ＆LT; /表＆gt;＆LT; / DIV＆GT;
＆LT;！ - 模态 - ＆GT;
＆LT; DIV ID =myModal级=模式变脸角色=对话＆GT;
＆LT; DIV CLASS =模式-对话框＆GT; ＆LT;！ - 莫代尔内容 - ＆GT;
＆LT; DIV CLASS =模式内容＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=模式＆GT;＆安培;倍;＆LT; /按钮＆GT;
＆LT; H4类=模式标题＆GT;模态页眉和LT; / H4＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT; ＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮式=按钮级=BTN BTN-默认的数据驳回=模式＆GT;关闭＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
这在部分页面线你的....
＆LT;按钮类=BTN BTN外形BTN-主要数据切换=提示称号=详细地点类型=按钮
的onclick =的ShowModal（）;＆GT;
所以，当你做了 $（'＃locationGrid'）HTML（响应）; 在Ajax调用的页面加入到DOM并触发文件准备如果任何在部分页的脚本，因此，当HTML被添加到DOM启动事件从顶部解析，而HTML被解析上述行命中和它试图找到名字的ShowModal一个功能，但它不是 ŧ尚未加载到DOM。所以，你既可以的将你的脚本在你的部分页面的开头，以便脚本标签来该行与功能可用之前解析。 或您可以删除的onclick从按钮标记和文件注册按钮点击事件就绪功能即可。你不必这样担心那里的脚本所处的位置。
让我知道，如果这个解决您的问题。
I have a main view with search criteria. Main view contains a partial view with an html table. The search results are loaded via ajax.
Now i am trying to implement edit, create and delete via bootstrap modal. So in the partial view on table row button click event i added a function to open the modal like this
<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>
This function does not work if placed in the partial view. However, once i place the same function inside my main view, the modal opens properly.
Why does this happen?
The reason why i wanted to have the script inside my partial view, is because i wanted to keep my client side code together so it is easier to understand and maintain.
Edit
The following is my main view together with related 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>
}
An the 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-->
Partial View 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> 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">×</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>
This line of yours in the partial page....
<button class="btn btn-outline btn-primary" data-toggle="tooltip" title="Location Details" type="button"
onclick="ShowModal();">
So when you do a $('#locationGrid').html(response);in your ajax call the page is added into the DOM and triggers a document ready event if any in your partial page scripts,So when the HTML is added to the DOM it starts to parse from top, while the HTML is being parsed the above line is hit and it tries to find a function with name ShowModal but it isn't loaded yet into the DOM. So you can either place your script in the beginning of your partial page so that the script tag is parsed prior to coming to this line and function is available. OR you can remove the onclick from the button tag and register the button click event in document ready function. That way you don't have to worry about the position where the script is placed.
Let me know if this resolved your issue.
这篇关于ASP MVC jQuery函数的局部视图不工作，但在主视图中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
