0

I have kind of a weird scenario. I'm creating a site using the ASP.NET MVC Framework that contains a profile page which has a user's picture, info, etc. I have a view called Profile which loads partial views using the Ajax action link into a div. Here is an example:

    @Ajax.ActionLink("Basic Info", "Index", "BasicInfo", 
    new {id=Model.UserName},new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "content",
        HttpMethod = "GET"
    })

The Index action of BasicInfo just shows the user's basic information. I want to have an edit link in that partial view that when pressed loads another action method, Edit where I can edit the values (another partial view). I have a couple of questions:

1) I didn't make Profile a layout even though it would be similar to a master page in ASP.NET because it would need a controller. Is there a way to create a layout that has its own controller?

2) How do I do a redirect within a partial view without doing a postback i.e. updating the div holding the partial view that was previously called by Ajax to an edit view?

3) I hope this all makes sense. I would see a profile with the person's basic information and I can press edit within that view and the edit view of that basic information controller is loaded into the div without doing a postback. What would be the best way to accomplish this?

2 Answers 2

2

You will find this a it easier using the jQuery ajax methods rather than the Ajax.ActionLink() and Ajax.BeginForm() methods. In the main view

<button type="button" class="details" data-id="Model.UserName">View details</button>
<div id="content"></div>

var detailsUrl = '@Url.Action("Details", "User")';
var editUrl = '@Url.Action("Edit", "User")';
// Display the details view
$('.details').click(function() {
    $.get(detailsUrl, { id: $(this.data('id') }, function(response) {
        $('#content').html(response);
    });
});
// Display the edit view
$('#content').on('click', '#edit', function() {
    $.get(editUrl, { id: $(this.data('id') }, function(response) {
        $('#content').html(response);
    });
});
// Post the edit form and replace with the updated details view
$('#content').on('click', '#save', function() {
    var id = $(this).data('id');
    var data = $(this).closest('form').serialize();
    $.post(editUrl, data, function(response) {
        if (response) {
            $.get(detailsUrl, { id: id }, function() {
                $('#content').html(response);
            });
        } else {
            // Oops
        }
    }).fail(function (result) {
        // Oops
    });
});

The above assumes a UserController with the following methods

public PartialViewResult Details(int ID) // or string?
{
    // Get the user model based on the ID
    return PartialView("_Details", model);
}
public PartialViewResult Edit(int ID) // or string?
{
    // Get the user model based on the ID
    return PartialView("_Edit", model);
}
public JsonResult Edit(UserModel model) // replace with the name of your model
{
    // Save the model
    return Json(true); // indicate success
}

where the partial views are

_Details.cshtml

@model UserModel
.... // display properties of the model
<button type="button" id="edit" data-id="Model.UserName">Edit</button>

_Edit.cshtml

@model UserModel
<form>
    .... // controls for properties of the model
    <button type="button" id="save" data-id="Model.UserName">Save</button>
</form>
2
  • This looks great! Quick question though, this doesn't break some sort of self containing encapsulation rule for the Details and Edit view if the handling for certain events exists outside of the view? I also want to load multiple views each with their own logic with their own edit and save urls.
    – Eitan
    Mar 24, 2016 at 13:56
  • No, not at all. But note that I just gave the basic structure in the answer. There are lots of other things to consider, e.g. do you have client side validation, in which case you need to trigger it before saving.
    – user3559349
    Mar 24, 2016 at 22:24
0

I might be misunderstanding things. I think you're trying to flip a display view of a part of a page for an edit view of that part of the page.

I'll keep things general, because there's not enough code to refer to directly.

You should register javascript event handlers against the various clicks that can take place (in a jquery closure in a separate file is my personal preference). Those handlers should request whichever actions (returning partial views) are required.

e.g. when someone clicks the edit link, the handler calls the /GetEditStuff action, gets the partial view, and on success, clears out the previous content of the parent div and replaces it with the partial view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.