CODEWITHSUNDEEP
c#asp.net.netasp.net-mvcasp.net-mvc-4
Eitan
Eitan

Reputation: 1494

Redirect within partial view in MVC

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?

Upvotes: 0

Views: 4342

Answers (2)

user3559349
user3559349

Reputation:

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>

Upvotes: 2

David
David

Reputation: 1774

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.

Upvotes: 0

Related Questions