在 div C# MVC 5 中单击按钮时渲染部分视图

我一直在关注这里的答案，但似乎无法让它发挥作用。我认为它正在触发我的函数并调用我的控制器，但它没有渲染我的部分视图。任何帮助都是极好的。

控制器

public ActionResult Detail(int? id)
{
    if (id == null)
    {
       return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    User_Accounts user_accounts = db.User_Accounts.Find(id);
    if (user_accounts == null)
    {
        return HttpNotFound();
    }
    return PartialView("_Detail", user_accounts);
}

HTML

<h2>Index</h2>
<div class="container left">

    <div class="panel-default panelbox" style="position:static">
        @*<p>
            @Html.ActionLink("Create New", "Create")*@

        @using (Html.BeginForm("Index", "Users", FormMethod.Get))
        {
            <p>
                Type: @Html.DropDownList("userType", "All")
            </p>
            <p>
                Last Name: @Html.TextBox("SearchString")
            </p>
        }
    </div>
    <div class="panel panel-default left">
        <div class="panel-heading">
            <label style="text-align:center">
                User
            </label>
        </div>
        <div class="table-responsive">
            <table id="UserTable" class="table-bordered table leftPanel table-condensed">
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            <button data-url='@Html.Action("Detail", "Users", new { id = item.user_id_IN })' id="js-reload-details">@Html.DisplayFor(modelItem => item.DisplayName)</button>
                            @*@Html.ActionLink(item.DisplayName, "Detail", new { id = item.user_id_IN }, new { onclick = "renderPartial();" })*@
                        </td>
                    </tr>
                }
            </table>
        </div>
    </div>
</div>

<div>
    <label>Details</label>
    <div id="detailsDiv"></div>
</div>

Script

<script>
    $('.js-reload-details').click(function (evt) {

        var $detailDiv = $('#detailsDiv'),
            url = $(this).data('url');

        $.get(url, function (data) {
            $detailsDiv.replaceWith(data);
        });
        });
</script>

需要帮助请叫我。

你不能使用data-url='@Html.Action("Detail", "Users", new { id = item.user_id_IN })'在你的按钮中生成一个网址。@Html.Action()是一个调用您控制器的方法。将会发生的情况是，对于模型中的每个项目，您都会点击Detail的方法UsersController（如果你有很多物品，性能一定很糟糕:)）。

由于您似乎只需要一个网址（/Users/Detail）我建议你只将ID存储在data中以最小化生成的html。正如其他答案中所述，您还需要为按钮使用类名以防止无效的 html，我还建议使用type="button"因为默认值（取决于浏览器）可能是“提交”（您没有表单，所以在这种情况下并不重要，但这是一个很好的做法）。也没有真正需要使用@Html.DisplayFor()除非你使用自定义DisplayTemplate或有一个[DisplayFormat]属性上的属性。

将 html 更改为

<button type="button" data-id="@item.user_id_IN" class="js-reload-details">@item.DisplayName</button>

和脚本

var url = '@Url.Action("Detail", "Users");
$('.js-reload-details').click(function() {
  $.get(url, { id: $(this).data('id') }, function (data) {
    $('#detailsDiv').html(data);
  });
});

请注意您不想使用replaceWith()在你的情况下。.replaceWith()将替换实际的 div<div id="detailsDiv"></div>使用您的方法返回的 html，因此下次用户单击此按钮或任何其他按钮时，将调用该方法，但是<div id="detailsDiv"></div>不再存在，什么也不会发生。

$('#detailsDiv').html('Hello world');

renders

<div id="detailsDiv">Hello world</div>

but

$('#detailsDiv').replaceWith('Hello world');

renders

Hello world