用另一個替換部分視圖

Question

我在嘗試用另一種視圖替換部分視圖時遇到了一個問題，我進行了研究，並嘗試通過一些有關此類問題的主題來實現自己的目標。 到目前為止，我對asp.net不太方便，但我知道我需要使用Ajax.ActionLink

我到目前為止所做的就是這個。

我有一個要歸因於局部視圖的項目列表，現在我要做的是，當我單擊一個局部視圖鏈接“編輯”時，我希望將此特定視圖替換為另一個局部視圖編輯一些字段，然后我要單擊保存並返回到其他局部視圖“詳細信息”，這很簡單，不是嗎？ 但到目前為止我還無法解決。

這是一些代碼，在這里我只是將代碼與_ItemSummary部分視圖替換為_ItemEdit部分視圖相關

MyController.cs

public ActionResult Index()
{
var list = (some code to get my list of items)
return View(list);
}

public ActionResult ItemEdit(string itemId)
{
var item = (some code to get my item thanks to its id)
return PartialView("_ItemEdit",item);
}

Index.cshtml

@model IEnumerable<ItemModel>
<div class="row main-elem main-with-menu">
    <div class="box">
        @foreach (var item in Model)
        {
            @Html.Partial("_ItemSummary",item)
        }
    </div>
</div>

_ItemSummary.cshtml

<div id="itemsummary" class="thumbnail">
    <div class="col-xs-12">
        <div class="caption">
            <div class="col-xs-12" id="infosObj">
                <p id="room-name" class="room-name">
                    <span class="roomName">@Model.Id</span>
                </p>
                <h5>@Model.Reference</h5>
                <h5>@Model.Localisation</h5>

                @Ajax.ActionLink( "Edit", "ItemEdit", "Settings", new { itemId = Model.Id }, new AjaxOptions() { UpdateTargetId = "itemsummary", HttpMethod = "GET", InsertionMode = InsertionMode.Replace}  )

            </div>
        </div>
    </div>
</div>

_ItemEdit.cshtml

<div id="itemedit" class="thumbnail">
    <div class="col-xs-12">
        <div class="caption">
            <div class="col-xs-12" id="infosObj">
//Stuff to be added
            </div>
        </div>
    </div>
</div>

當前的作用是將我重定向到頁面http://domain.eg/Settings/ItemEdit?itemId=item_1，但我想保留在頁面http://domain.eg/Settings上 ，只替換我單擊的div打開，但在控制器中使用正確的itemId調用ItemEdit函數。 我閱讀了此類問題並嘗試了一些答案，但我無法實現我的目的。

預先感謝您對我做錯了什么以及應該怎么做的一些解釋

Answer 1

您可以自己添加一些腳本：

<div id="itemsummary" class="thumbnail">
    <div class="col-xs-12">
        <div class="caption">
            <div class="col-xs-12" id="infosObj">
                <p id="room-name" class="room-name">
                    <span class="roomName">@Model.Id</span>
                </p>
                <h5>@Model.Reference</h5>
                <h5>@Model.Localisation</h5>
                <a class="editLink" href="@Url.Action("ItemEdit", "Settings", new { itemId = Model.Id  })" >Edit </a>                  
            </div>
        </div>
    </div>
</div>

---

$(".editLink").on("click", function(){
    event.preventDefault();
    var link = $(this);
    var href= link.attr("href");

    $.ajax({ url: href })
    .done(function( data ) {
        link.hide().after(data);
    });   
}