Question

我写了一些jquery，它执行一个get on a action，传入一个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

Answer 1

我认为将你的Razor和jQuery分开会更好。

像这样渲染项目：

@foreach (var dashboard in Model.dashboard)
{

<li class="drop-text clickMe" data-id="@dashboard.DashID">@dashboard.DashName</li>

...
}

然后在页面底部添加此jQuery，在.clickMe类上创建一个click事件，发送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'); } }) });

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

1 个答案: