用另一个替换部分视图答案

【问题标题】：Replace Partial View with another用另一个替换部分视图
【发布时间】：2017-05-04 10:07:36
【问题描述】：

我在尝试将部分视图替换为另一个视图时遇到了一些问题，我做了我的研究，并试图通过一些关于这类问题的主题来实现我的目标。到目前为止，我对 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 函数.我阅读了这类问题并尝试了一些答案，但我无法达到我的目的。

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

【问题讨论】：

如果你的重定向，这意味着你没有在你的视图或布局中包含jquery.unobtrusive-ajax.js
有意思，我在web开发方面比较蹩脚，是不是需要在三个视图中引用这个脚本？然后只需添加这个脚本，它就会让我在点击后留在我的索引页面上？
您需要在任何使用Ajax.ActionLink() 或Ajax.BeginForm() 的页面中使用该脚本
我正在尝试，希望它有效，谢谢提示
在添加了在这个 git github.com/aspnet/jquery-ajax-unobtrusive 上找到的脚本后，我仍然被重定向到 domain.eg/Settings/ItemEdit?itemId=item_1

标签： asp.net ajax asp.net-mvc partial-views

【解决方案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);
    });   
}

【讨论】：