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，但在控制器中调用ItemEdit函数使用正确的itemId。我读到了这类问题并尝试了一些答案，但我无法达到目的。

提前感谢我对我做错了什么以及应该做些什么的解释

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

将部分视图替换为另一个

1 个答案: