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

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(如果您有很多项目,性能一定很糟糕:)).

由于您似乎只需要一个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 id="detailsDiv"></div>使用您的方法返回的html 替换实际的div ,因此下次用户单击此按钮或任何其他按钮时,将调用该方法,但<div id="detailsDiv"></div>不再存在,也不会发生任何事情.

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

呈现

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

但

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

呈现

Hello world

Answer 2

你的按钮的idid="js-reload-details"

1. 错误的是，此代码在 foreach 循环中重复。这将导致您的 HTML 页面上出现多个同名的 id。

2. 您的点击事件位于：“.js-reload-details”。这是一个类：

所以让你的代码像这样：

@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>