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

2 posts, 0 answers
  1. André
    André avatar
    7 posts
    Member since:
    Feb 2013

    Posted 13 Mar 2013 Link to this post

    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!
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 15 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top