用另一个替换部分视图



我在尝试用另一个视图替换部分视图时面对某个问题,我进行了研究,并试图通过有关此类问题的一些主题来实现我的目标。到目前为止,我对ASP.NET很不合时宜,但是我知道我需要使用ajax.actionlink

到目前为止我所做的是。

我有一个要归功于部分视图的项目列表,现在我想做的是,当我单击一个部分视图链接"编辑"时,我希望将此特定的视图替换为另一种视图旨在编辑某些字段的部分视图,然后我想单击以保存并返回到其他部分视图"详细信息"很简单吗?但是我无法完成这个问题。

这里有一些代码,在这里我只将代码与_itemsummsary部分视图替换为_itemedit Partial View

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,但我想留在我的页面上Div i单击了,但是在控制器中,使用正确的itemID调用intiqedit函数。我读到了这种问题,并尝试了一些答案,但我无法实现自己的目的。

事先感谢您对我做错了什么以及应该做什么的一些解释

您可以通过添加一些脚本来自己做:

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

最新更新