How to naviagte to an edit form in a tab-strip

[Chinonso]

Hi there guys, its me again. I have a tab-strip that calls a details page for a Person,House, and Car tab. These tabs display the data just fine. On each detail page, i have an edit button, when i click the edit button, right now, when i click the edit button,  i am re-directed to the edit page outside of the tab-strip which isn't what i want. How do i make it load up the edit page within the tab-strip and ultimately when i click save, how to i make  re-load the details page again within the tab-strip.

Index.cshtml- from the InfoController

01.<div class="demo-section k-content">
02.    @(Html.Kendo().TabStrip()
03.          .Name("tabstrip")
04.          .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
05.          .Items(tabstrip =>
06.          {
07.            tabstrip.Add().Text("Person")
08.               .Content(@<text> <div class="form-group"> @Html.Action("Detail", "Person", new { id = 1 }) </div> </text>);
09.
10.             tabstrip.Add().Text("House")
11.                .Content(@<text> <div class="form-group"> @Html.Action("Detail", "House", new { id = 1 }) </div> </text>);
12.
13.             tabstrip.Add().Text("Car")
14.                .Content(@<text> <div class="form-group"> @Html.Action("Detail", "Car", new { id = 1 }) </div></text>);
15.          })
16.)
17.</div>
18.
19.
20.
21.<script type="text/javascript">
22.
23.    $(document).ready(function () {
24.        $("#tabstrip").kendoTabStrip({
25.            animation: {
26.                open: {
27.                    effects: "fadeIn"
28.                }
29.            }
30.        });
31.
32.</script>

 

Here is the InfoController.cs

01.using System;
02.using System.Collections.Generic;
03.using System.Linq;
04.using System.Web;
05.using System.Web.Mvc;
06.
07.namespace JustTestingWeb4.Controllers
08.{
09.    public class InfoController : Controller
10.    {
11.        // GET: Info
12.        public ActionResult Index()
13.        {
14.            return View();
15.        }
16.    }
17.}

 

Here is my Detail.cshtml - for the Person tab

01.@model JustTestingWeb4.Models.Person
02.
03.<div>
04.    <h4>Person</h4>
05.    <hr />
06.    <dl class="dl-horizontal">
07.        <dt>
08.            @Html.DisplayNameFor(model => model.FirstName)
09.        </dt>
10.
11.        <dd>
12.            @Html.DisplayFor(model => model.FirstName)
13.        </dd>
14.
15.        <dt>
16.            @Html.DisplayNameFor(model => model.LastName)
17.        </dt>
18.
19.        <dd>
20.            @Html.DisplayFor(model => model.LastName)
21.        </dd>
22.
23.        <dt>
24.            @Html.DisplayNameFor(model => model.Sex)
25.        </dt>
26.
27.        <dd>
28.            @Html.DisplayFor(model => model.Sex)
29.        </dd>
30.
31.        <dt>
32.            @Html.DisplayNameFor(model => model.Ssn)
33.        </dt>
34.
35.        <dd>
36.            @Html.DisplayFor(model => model.Ssn)
37.        </dd>
38.
39.        <dt>
40.            @Html.DisplayNameFor(model => model.PhoneNumber)
41.        </dt>
42.
43.        <dd>
44.            @Html.DisplayFor(model => model.PhoneNumber)
45.        </dd>
46.
47.    </dl>
48.</div>
49.<p>
50.    @Html.ActionLink("Edit", "Edit", "Person", new { id = 1 }, new { @class = "btn btn-primary", @style = "color:white; height:25px; width:35px; font-size: 0.99em; text-align:center" })
51.</p>

 

And here is my Edit.cshtml for  the - Person tab

01.@model JustTestingWeb4.Models.Person
02.
03.@using (Html.BeginForm())
04.{
05.    @Html.AntiForgeryToken()
06.
07.    <div class="form-horizontal">
08.        <h4>Person</h4>
09.        <hr />
10.        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
11.        @Html.HiddenFor(model => model.PersonID)
12.
13.        <div class="form-group">
14.            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
15.            <div class="col-md-10">
16.                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
17.                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
18.            </div>
19.        </div>
20.
21.        <div class="form-group">
22.            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
23.            <div class="col-md-10">
24.                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
25.                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
26.            </div>
27.        </div>
28.
29.        <div class="form-group">
30.            @Html.LabelFor(model => model.Sex, htmlAttributes: new { @class = "control-label col-md-2" })
31.            <div class="col-md-10">
32.                @Html.EditorFor(model => model.Sex, new { htmlAttributes = new { @class = "form-control" } })
33.                @Html.ValidationMessageFor(model => model.Sex, "", new { @class = "text-danger" })
34.            </div>
35.        </div>
36.
37.        <div class="form-group">
38.            @Html.LabelFor(model => model.Ssn, htmlAttributes: new { @class = "control-label col-md-2" })
39.            <div class="col-md-10">
40.                @Html.EditorFor(model => model.Ssn, new { htmlAttributes = new { @class = "form-control" } })
41.                @Html.ValidationMessageFor(model => model.Ssn, "", new { @class = "text-danger" })
42.            </div>
43.        </div>
44.
45.        <div class="form-group">
46.            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
47.            <div class="col-md-10">
48.                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
49.                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
50.            </div>
51.        </div>
52.
53.        <div class="form-group">
54.            <div class="col-md-offset-2 col-md-10">
55.                <input type="submit" value="Save" class="btn btn-default" />
56.            </div>
57.        </div>
58.    </div>
59.}

 

And Finally here is my PersonController.cs

01.using JustTestingWeb4.Models;
02.using System.Web.Mvc;
03.
04.namespace JustTestingWeb4.Controllers
05.{
06.    public class PersonController : Controller
07.    {
08.        public DbQuery db = new DbQuery();
09.
10.        // GET: Person
11.        public ActionResult Index()
12.        {
13.            return View();
14.        }
15.
16.        public PartialViewResult Detail(int id)
17.        {
18.            var result = db.GetPerson(id);
19.            return PartialView(result);
20.        }
21.
22.        public PartialViewResult Edit(int? id)
23.        {
24.            var result = db.GetPerson(id);
25.            return PartialView(result);
26.        }
27.
28.        [HttpPost]
29.        public PartialViewResult Edit([Bind(Include = "PersonID,FirstName,LastName,Sex,Ssn,PhoneNumber")] Person person)
30.        {
31.
32.
33.            var result = db.UpdatePerson(person);
34.
35.            if (result == true)
36.            {
37.                var result1 = db.GetHouse(person.PersonID);
38.                return PartialView("Detail", result1);
39.            }
40.
41.
42.            return PartialView(person);
43.        }
44.    }
45.}

 

I have attached images to help explain what i am seeing. Thanks for your help.

[Dimitar]

Hello Chinonso,

Thank you for the detailed code sample provided.

Based on it, I have managed to setup a working example in MVC, where a similar scenario to the one described is demonstrated.

You will notice that I have addressed your requirements in the following way:

1) In the _PersonView partial, I have used a simple button with an attached click handler. When it is clicked, the partial container is replaced with the _PersonEdit partial. Please note, that the Model is passed to the EditPerson action.

2) In the _PersonEdit partial, I have used the standard form submit. You can perform the needed operations with the received data and afterwards you can just redirect to the Index view.

Keep in mind that the above example is not completely finished and you will have to modify it further according to your application requirements. 

I hope this helps you to resolve the issue. In case you have any other related questions, please do not hesitate to contact us.

Regards,
Dimitar
Progress Telerik

[Chinonso]

Thanks a lot man, i will give this a whirl and get back to you asap.

[Dimitar]

Hello Chinoso,

Take your time testing the example and please let me know if any issues arise.

Regards,
Dimitar
Progress Telerik

[Chinonso]

Thanks man, it works. :)