c# - 在 div C# MVC 5 中单击按钮时呈现局部 View

Question

我一直在关注这里的答案，但似乎无法让它发挥作用。我认为它正在触发我的功能并调用我的 Controller ，但它没有呈现我的局部 View 。任何帮助都会很棒。

Controller

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>
    $('.js-reload-details').click(function (evt) {

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

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

如果您还需要什么，请告诉我。

Answer 1

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

因为您似乎只需要一个 url ( /Users/Detail )，我建议您只将 ID 存储在数据中，以尽量减少生成的 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');

渲染

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

但是

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

渲染

Hello world