Replace Partial View with another

Question

I'm facing some issue while trying to replace a partial view with another, I did my research and tried to achieve my goal with some topics about that kind of issues. I'm quite unhandy with asp.net so far, but i understood that i need to use Ajax.ActionLink

What i've done so far is this.

I have a list of items that a display thanks to a partial view, now what i'd like to do is this, when i click on one partial view link "edit" i want this specific view to be replaced with another partial view aimed to edit some fields, then i want to click to save and go back to the other partial view "details" pretty simple isn't it? but i can't get through this so far.

Here's some code, here i just put the code relative to the replacement of _ItemSummary partial view with _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>

What it currently does is to redirect me to a page http://domain.eg/Settings/ItemEdit?itemId=item_1 but i want to stay on my page http://domain.eg/Settings and just replace the div i clicked on, but in the controller the ItemEdit function is called with the correct itemId. i read about that kind of issues and tried some of the answers but i can't achieve my purpose.

Thanks in advance for some explainations of what i'm doing wrong and what should be done instead

Answer 1

You can do it yourself, by adding some script :

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