After an ajax post, I have problems for displaying results - asp.net-mvc

Question

I have a view named Index.cshtml with a table of users (create/edit/update functionalities).
When buttons (create/edit/update) are clicked I have a jQuery dialog for it. Next I use an ajax post like this:
Edit >> call an action controller for editing and return a json >> update row table with javascript
Delete >> call an action controller for deleting and return a json >> delete row table with javascript
Create >> call an action controller for creating and redirect to Index.cshtml >> ???
For the create part, I have a problem: I would like "simply" to display my view but I am in an ajax post. I don't know how to proceed.
Here is my code (submitting data and then refreshing the view):
$.post($(this).attr('action'), $(this).serialize(), function (data, status) {
$('#my-modal').modal('hide');
if (data.operation == 'edit') {
// Edit
var row = $('#' + data.userid);
row.children(':eq(0)').text(data.company);
row.children(':eq(1)').text(data.username);
row.children(':eq(2)').text(data.email);
row.children(':eq(3)').text(data.firstname);
row.children(':eq(4)').text(data.lastname);
} else if (data.operation == 'delete') {
// Delete
var row = $('#' + data.userid);
row.remove();
} else {
// Create
alert(data);
$("#userList").html(data);
}
})
As you can see, I check the data.operation which tells me if I do an 'edit' or 'delete' of (last possibility) a 'create'. For the create the problem is that my entire view (< html> < body>...) is generated and added in my #userList div. That's duplicate things.
Maybe that's not the right thing to do?
Thanks.
UPDATED
Here is my Create action:
[HttpPost]
public ActionResult Create(UserCreateViewModel viewModel)
{
if (!ModelState.IsValid)
{
this.Response.StatusCode = 400;
return PartialView("Create", viewModel);
}
var userDTO = new UserDTO();
Mapper.Map(viewModel, userDTO);
_requestServiceClient.CreateNewUser(userDTO);
return RedirectToAction("Index");
}
Here is my Index action:
[Authorize]
public ActionResult Index(string q, int? page)
{
var users = _requestServiceClient.GetUsers();
...
...
if (Request.IsAjaxRequest())
return PartialView(userListPaged);
else
return View(usersListPaged);
}
After relexion, in case of 'create' maybe it is better in my view to simply reload the page like this:
...
} else if (data.operation == 'create') {
// Create >> refresh the page
location.reload();
}
Thanks anyway.

Answer 1

If your list is not too long I would suggest to send back the complete list in every ajax request, doesn't matter if update, create or delete.
So you can remove your data operation check (your :eq(0) stuff will fail if you change the order of the columns some day) and simply put the result from the ajax request in your #userlist div.
EDIT
But to solve your create problem:
Just replace in the Create action this line:
return RedirectToAction("Index");
with this line:
return PartialView("Index", _requestServiceClient.GetUsers());
and it should return only the new list.
EDIT2
Ok, your Index.cshtml seems to have the complete layout, not just the list as I thought. So you have to do this first:
Move just the HTML code required to build the list in a seperate View, name it _List.cshtml for example
At the place where the HTML code was in your Index.cshtml put #Html.Partial("_List") in there
At this point your index view should look the same as before but you have your list view seperatly
Change my example above to not return the Index but the _List partial:
return PartialView("_List", _requestServiceClient.GetUsers());
I hope that works for you.

Answer 2

Place this code into your partial view:
#{
Layout = null;
}
This code says that you don't need a master view for this page.