Using MVC C# and Razor; How can I replace a partial page section at Runtime?

Question

I have a partial page of text generated from a database that will display in a partial view. I have an Edit link that shows up if the user has rights. I want to click Edit and then replace the current partial page in the

<div> current partial page </div>

With a different partial view.

I was looking here MVC with Razor: how to refresh partial page on click?

That is about refreshing - I want to replace. Can someone provide some assistance as to what I need to do in order to replace, after the edit I want to restore back to the original division with the updated data.

EDIT

I have this MVC action link in my code @Html.ActionLink("Edit", "Edit", new { id = item.Id }) and I am using MVC .. as some have pointed out in answers - it looks like javascript is required in order to do the work on the client side.

Golda's answer seems to point me in the right direction .. and I will try to implement that and see how it works out. Although I am curious how you get inline preview with editing at the same time - like in this text box the preview data is being filled in as I type. and I would like to know how this is done.

Possible duplicate of [How to replace html element with ajax response?](https://stackoverflow.com/questions/19527586/how-to-replace-html-element-with-ajax-response) — Liam, Jul 17 '19 at 12:57
@Liam my partial page has a model and is populated with that model - I am basically editing a form of text and want to be able to edit and then display those edits back again with out doing alot of reloading .. — Ken, Jul 17 '19 at 23:44

Golda · Answer 1 · 2019-07-19T13:02:47.350

0

Provide an ID for div. In the below code currentDiv is an ID of div.

<div id='currentDiv'> current partial page </div>

The below is a Jquery to replace div content

$("#editLink").click(function () {
    $.ajax({
        url: '/Controller/Action',
        data: { parameter: parameter},
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        datatype: 'html',
        cache: false,
        async: false
    })
        .success(function (result) {
            $('#currentDiv').html(result);
        });
});

Code for controller

public ActionResult Action(int parameter)
{
    return PartialView("partialView", parameter);
}

Updated Answer

<a id="editLink" data-itemid="@item.Id"> Click Here </a>

You can receive the ID using data attribute

$("#editLink").click(function () {
  var itemID = $(this).data("itemid");
  ---
  ---
  ---
});

Note: The data-itemid should be in lower case

edited Jul 19 '19 at 13:02

answered Jul 18 '19 at 04:53

Golda

3,823
10
34
67

so #editLink is the 'name' of my edit link ? And URL: url: '/Controller/Action' is the partial with controller action that I would like to change out to.. just verifying before I insert code into project - but I will give this a whirl. – Ken Jul 18 '19 at 23:27
@Ken, #editLink is ID of the edit link and you are correct about the URL – Golda Jul 19 '19 at 05:31
Right now in my cshtml code I have @Html.ActionLink("Edit", "Edit", new { id = item.Id }) so instead of that I will need a regular html link ? for data: I use my new { id = item.Id } (how to pas that in item Id in to the function ? function(int Id) ?? – Ken Jul 19 '19 at 10:07

Using MVC C# and Razor; How can I replace a partial page section at Runtime?

1 Answers1