How to handle the Index, Create, Delete, Details and Edit view inside a TabStrip?

[André]

I'm starting to use the Kendo UI complete for ASP.NET MVC 4. 
I already created the database and the models that I need, but now I want to be able to handle (Index, Create, Delete, Details and Edit) the entities inside the content of each Tab. But I don't know how can I do this inside de tabstrip. (I started with the Internet Application template which has already a HomeController)

My code until now is:

/Views/Home/Index

@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().TabStrip()
                .Name("tabstrip")
                .Items(items =>
                {
                    items.Add().Text("Students").Selected(true).LoadContentFrom("Index","Student"); //Add item with text "Students"
                    items.Add().Text("Teachers"); //Add item with text "Professores"
                    items.Add().Text("Schools"); //Add item with text "Escolas"
                })
)

/Controllers/StudentController

 public class StudentController : Controller
    {
        private MiniSIGEdb db = new MiniSIGEdb();

        //
        // GET: /Student/

        public ActionResult Index()
        {
            var students = db.Students.Include(s => s.Person).Include(s => s.School);
            return PartialView(students.ToList());
        }

        //
        // GET: /Student/Create

        public ActionResult Create()
        {
            ViewBag.Person_id = new SelectList(db.People, "id", "FirstName");
            ViewBag.School_id = new SelectList(db.Schools, "id", "City");
            return PartialView();
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }

/Views/Student/Index

@model IEnumerable<MiniSIGEweb.Models.Student>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Course)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Person.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.School.City)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Course)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Person.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.School.City)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.id }) |
            @Html.ActionLink("Details", "Details", new { id=item.id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.id })
        </td>
    </tr>
}

</table>

Until now I'm able to show de Index view (as partialview), but when I click in "Create New", the Create view is not rendered inside the tabstrip? How can I do this? 

Thanks in advance!

[Daniel]

Hello André,

The view will not be rendered in the tabstrip since you are navigating to a different action. In order to render the create, edit, etc. views in the tabstrip you could add an iframe in the tab content. The alternative is to configure the links to make a request to the tabstrip action and render a different partial view in the content based on an additional parameter.

Regards,
Daniel
the Telerik team