用局部视图替换主视图的内容
用局部视图替换主视图的内容
提问于 2015-05-20 12:23:33
我编写了一些jquery，它对一个操作执行get，传入一个dashID，希望返回一些带有相关信息的html。然而，我的jquery似乎没有得到这些数据。
这是我的javascript
function loadDashboard(dashID) {
$.get('@Url.Action("Dashboard", new {id = ' + dashID + '})', function (data) {
$('#dash-content').html(data);
});
}然后，我将javascript代码连接到html元素上的onclick事件。
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@foreach (var dashboard in Model.dashboard)
{
<li class="drop-text" onclick="loadDashboard(@dashboard.DashID)">@dashboard.DashName</li>
}
<li class="divider"></li>
<li class="drop-text" id="add-dashboard">Add dashboard</li>
</ul>内容应该显示在这里。
<div id="dash-content">
@Html.Partial("Dashboard", Model);
</div>这是控制器
public ActionResult Dashboard(int? id)
{
var dashID = id;
if (dashID == null || dashID == 0)
{
dashID = 1;
}
var getWidgetsQuery = (from widgets in db.widgets
where widgets.DashID == dashID
select widgets);
dvm.widgets = getWidgetsQuery.ToList();
return PartialView(dvm);
}我一直在关注这篇文章，但是它对我没有用，MVC4 Update Partial view。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-20 13:27:43
我认为最好把你的Razor和jQuery分开。
将项目呈现如下：
@foreach (var dashboard in Model.dashboard)
{
<li class="drop-text clickMe" data-id="@dashboard.DashID">@dashboard.DashName</li>
...
}然后在页面底部添加这个jQuery，在.clickMe类上创建一个单击事件，发送Ajax请求。
<script type="text/javascript">
var mUrl = '@Url.Action("Dashboard", "Controller")';
// Replace Controller with your Controller Name
$(function() {
$('.clickMe').click(function(e) {
e.stopPropagation();
var btn = $(this);
$.ajax({
url: mUrl,
data: {
id: btn.data('id')
},
type: 'GET',
success: function(data) {
$('#dash-content').html(data);
},
error: function(response) {
$('#dash-content').html('Failed');
}
})
});
});
</script>编辑
如果JS文件中有jQuery，请执行以下操作：
@foreach (var dashboard in Model.dashboard)
{
<li class="drop-text clickMe" data-id="@dashboard.DashID" data-action-url="@Url.Action("Dashboard", "Controller")">@dashboard.DashName</li>
...
}在您的jQuery文件中，您可以这样做：
$('body').on('click', ".clickMe", function (e) {
e.stopPropagation();
var btn = $(this);
$.ajax({
url: btn.data('action-url'),
data: {
id: btn.data('id')
},
type: 'GET',
success: function(data) {
$('#dash-content').html(data);
},
error: function(response) {
$('#dash-content').html('Failed');
}
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30349557
复制相关文章
相似问题
腾讯云开发者
