用部分视图替换主视图的内容

Question

我写了一些jQuery，该jQuery执行操作，传递dashid，希望应该返回一些带有相关信息的HTML。但是，我的jQuery似乎并没有收回该数据。

这是我的javascript

function loadDashboard(dashID) {
    $.get('@Url.Action("Dashboard", new {id = ' + dashID + '})', function (data) {
        $('#dash-content').html(data);
    });
}

i然后将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更新部分视图

Answer 1

我认为最好将剃须刀和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');
                    }
                })
            });