在按鈕上渲染部分視圖在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()是一個調用控制器的方法。 將要發生的是，對於模型中的每個項目，您將訪問UsersController的Detail方法（如果您有很多項目，性能必須UsersController :)）。

由於您似乎只需要一個URL（ /Users/Detail ），我建議您只將ID存儲在數據中以最小化生成的html。 如其他答案中所述，您還需要使用按鈕的類名來防止無效的html，我還建議使用type="button"因為默認（取決於瀏覽器）可能是“提交”（你不喜歡）有一個表格所以在這種情況下並不重要，但它的良好做法進入）。 除非您使用自定義DisplayTemplate或在屬性上具有[DisplayFormat]屬性，否則也不需要使用@Html.DisplayFor() 。

將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="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>

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);
    });
});