multiple sub partial views(crud) inside a partial view inside a tab MVC

Question

I want to create an application with a parent view where there is several tabs, and inside each tab there is CRUD operations for a specific table of the database. So i used jquery ui to create the tabs in my parent view, and made a partial view "Index" for each table and render them like this:

 <div id="tabs-1">
    @{Html.RenderAction("Index", "companies");}
 </div>
 <div id="tabs-2">
     @{Html.RenderAction("Index", "users");}
 </div>

For CRUD operations, i created partial view for each operation that i render inside the index view using Html.RenderPartial.

The problem is that only the Index view is displayed inside the tab, if you click on one of the CRUD (create new company for example) it redirects you to another url (to company/create for example).

so what is the proper way to render them inside the same tab? Is there a better approach to do that? (i thaught of SPA maybe).

if you want to stay in the same page, instead of directly posting to the controller capture that inside the AJAX request and you can process the request in the controller. — threeleggedrabbit, Mar 06 '15 at 11:18
You probably won't be using `Html.RenderPartial`, it has a more specific use. You will likely need `Html.Partial`. — Inspector Squirrel, Mar 06 '15 at 11:33
I have an answer [here](http://stackoverflow.com/questions/27267942/submitting-partial-view-data-from-parent-view/27292486#27292486) that might help you, there's a few others I wrote about using AJAX and some more on viewmodels as well which might be of use. — Inspector Squirrel, Mar 06 '15 at 11:38

score 0 · Answer 1 · answered Mar 06 '15 at 11:43

you can use this example, on button click of submit call this method - make sure you build the data ans send it in JSON format.

For partial View - http://www.codeproject.com/Tips/617361/Partial-View-in-ASP-NET-MVC

@Html.Partial("~/Views/Shared/_Product.cshtml", product);

Html.RenderPartial("~/Views/Shared/_Product.cshtml", product);

Sending request - http://www.codeproject.com/Articles/795483/Do-GET-POST-PUT-DELETE-in-asp-net-MVC-with-Jquery

$.ajax({
    url: '/User/Create',
    dataType: "json",
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ user: { name: 'Rintu', email: 'Rintu@gmial.com' } }),
    async: true,
    processData: false,
    cache: false,
    success: function (data) {
        alert(data);
    },
    error: function (xhr) {
        alert('error');
    }
})

multiple sub partial views(crud) inside a partial view inside a tab MVC

1 Answers1