Question

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

控制器

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()是一种调用控制器的方法。将要发生的是，对于模型中的每个项目，您将使用Detail UsersController方法{如果您有很多项目，那么表现一定很糟糕:)。

由于您似乎只需要一个网址（/Users/Detail），我建议您只将ID存储在数据中，以最大限度地减少生成的HTML。如其他答案中所述，您还需要使用按钮的类名来防止无效的html，我还建议使用type="button"因为默认（取决于浏览器）可能是＆＃34;提交＆＃34 ; （你没有表格，所以在这种情况下并不重要，但是它的良好做法是进入）。除非您使用自定义@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()会使用您的方法返回的html替换实际的div <div id="detailsDiv"></div>，因此下次用户点击此按钮或任何其他按钮时，系统会调用该方法，但不再<div id="detailsDiv"></div>存在，什么都不会发生。

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

呈现

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

但

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

呈现

Hello world

Answer 2

按钮的ID id="js-reload-details"

错误此代码在foreach循环中重复。这会在HTML页面上导致多个同名的ID。
您的点击事件已开启：＆＃39; .js-reload-details＆＃39;。这是一个类：

所以让你的代码像这样：

@foreach (var item in Model)
{
    <tr>
        <td>
            <button data-url='@Html.Action("Detail", "Users", new { id = item.user_id_IN })' class="js-reload-details">
                @Html.DisplayFor(modelItem => item.DisplayName)
            </button>
        </td>
    </tr>
}

我在jQuery中发现的一个错误是你有$detailsDiv.replaceWith(data); 根据您的代码$detailDiv而不是var detailDiv = $('#detailsDiv');

$detailsDiv

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

            evt.stopPropagation();
            var detailDiv = $('#detailsDiv');

            // TRY using the attr function: 
            var url = $(this).attr("data-url");

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

<强>更新

<script>
    $(document).ready(function(){
        $('.js-reload-details').click(function (evt) {              
            evt.stopPropagation();
            var detailDiv = $('#detailsDiv');

            // TRY using the attr function: 
            var url = $(this).attr("data-url");

            $.get(url).success(function(result) {
                    detailDiv.html(result);
            });
    });
</script>

Answer 3

我们的HTML元素使用唯一ID，这是一种很好的做法。由于以下语句将被执行多次

  <button data-url='@Html.Action("Detail", "Users", new { id = item.user_id_IN })' id="js-reload-details">@Html.DisplayFor(modelItem => item.DisplayName)</button>

您将拥有多个具有相同ID的按钮。你可以使用一个类而不是这样做。

 <button data-url='@Html.Action("Detail", "Users", new { id = item.user_id_IN })' @class="js-reload-details">@Html.DisplayFor(modelItem => item.DisplayName)</button>

然后你必须纠正你的剧本：

// Now we bound the click event in all the elements that contain
// the .js-reload-details class
$('.js-reload-details').click(function (evt) {  

    var $detailDiv = $('#detailsDiv');

    // Here was your the error
    var url = $(this).attr("data-url");

    $.get(url, function (data) {
        $detailsDiv.replaceWith(data);
    });
});

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

3 个答案: