Telerik MVC Tabstrip表单提交失去焦点并在发布后离开页面

Question

I'm working with Telerik controls in an MVC 4 project. Specifically, I have a page that has a parent/child grid setup. The child grid is in a Tabstrip and I have another Tab where I would like to allow a user to submit changes for their contact information.

The example/demo I used from Telerik can be found here - http://demos.telerik.com/aspnet-mvc/razor/grid/detailsajax .

At this point, I was able to setup my code to have a partial view and bring up the form successfully in the tab. I had one test field for email that I was able to retrieve and populate against the model. Validation is working. My problem now is that, after the form submits, it is leaving child tab and bringing up a new page based on the partial view instead of staying within the tab its already on.

So, how can I keep the focus within the current child tab after the form has been submitted? I'm fairly new to MVC in general so it maybe something not even specific to Telerik. Thanks in advance for any advice and here's some code snippets below.

View code from my main page.

.Items(items =>
                {
                    items.Add().Text("CourseHistory").Content(
                            Html.Telerik().Grid<selStudentCourseHistory_Result>()
                                ...grid code snipped...
                                ...
                    items.Add().Text("Contact Information")
                        .LoadContentFrom("StudentSubmitContactInfo", "Student", new { studentid = "<#=StudentId #>" })

                                .Visible(true);
                             })

                       .ToHtmlString()

Partial View for StudentSubmitContactInfo

@using (Html.BeginForm())
{
    <div id="dvStudentContact">
        <table>
            <tr>
                <td><label>SC Email:</label></td>
                <td>@Html.TextBoxFor(s => s.scEmail)</td>
                <td></td>
                <td></td>
                <td>
                    <input type="submit" name="btnContactSubmit" value="Submit" id="btnContactSubmit"/>
                </td>
            </tr>
        </table>
    </div>

    @Html.ValidationSummary()
}

Code From the Controller

public ActionResult StudentSubmitContactInfo(int studentid)
    {

        StudentContactModel contactinfo = (from s in new LNLiteEntities().Students
                                                       where s.StudentId == studentid
                                                       select new StudentContactModel
                                                       {
                                                           scEmail = s.Email
                                                       }).FirstOrDefault();

        return PartialView(contactinfo);
    }

    [HttpPost]
    public ActionResult StudentSubmitContactInfo(StudentContactModel scm)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("StudentSubmitContactInfo");
        }
        else {
            return PartialView(scm);
        }

    }

Answer 1

As it sometimes happens, I was able to finally come with a different search criteria to get this resolved. Here is what I did.

For the Controller, HttpPost portion was changed to return Json.

public ActionResult StudentSubmitContactInfo(int studentid)
    {

        StudentContactModel contactinfo = (from s in new LNLiteEntities().LNStudents
                                                       where s.StudentId == studentid
                                                       select new StudentContactModel
                                                       {
                                                           scEmail = s.Email
                                                       }).FirstOrDefault();

        return PartialView(contactinfo);
    }

    [HttpPost]
    public JsonResult StudentSubmitContactInfo(StudentContactModel scm)
    {

        if (ModelState.IsValid)
        {
            return Json(new { contactinfo = scm, errorMsg = "success", Success = true});
        }
        else
        {
            return Json(new { contactinfo = scm, errorMsg = "invalid values", Success = false });

        }

    }

So, it no longer went off to some other page which is great. However, validation stopped working. So, the fix for that was in the jquery submit in the partial view. Make sure you have the partial view setup for jquery.validate and jquery.validate.unobtrusive.

@model StudentContactModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">  </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm("StudentSubmitContactInfo", "Student", FormMethod.Post, new { id = "contact-form" }))
{
    <div id="dvStudentContact">
        <table>
            <tr>
                <td><label>SC Email:</label></td>
                <td>@Html.TextBoxFor(s => s.scEmail)</td>
                <td></td>
                @*<td>@Html.TextBoxFor(s => s.scEmail, new {@Value = "<#=WorkEmail #>" })</td>*@
                <td>
                    <input type="submit" name="btnContactSubmit" value="Submit" id="btnContactSubmit"/>
                </td>
            </tr>
        </table>
    </div>

    @Html.ValidationSummary()
}

<script type="text/javascript">
$('#contact-form').submit(function (e) {
    var data = $(this).serialize();
    $.post(this.action, data, function (data) {
        //prevents the window from closing
        //e.preventDefault();

        if (data.Success == true) {
            alert(data.contactinfo.scEmail);
        }
        else {
            alert(data.Success);
        }

    });
    //e.preventDefault();
    var form = $("#contact-form").closest("form");
    form.removeData('validator');
    form.removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse($("#dvStudentContact"));

    e.preventDefault();
});

Answer 2

Use javascript code to set the focus on that tab by following sample code

            var tabstrip = $("#controlID").data("tTabStrip");
            var item = $("li", tabstrip.element)["6"];
            tabstrip.select(item);

Refer to these links for more details http://demos.telerik.com/aspnet-mvc/tabstrip/clientsideapi http://www.telerik.com/community/forums/aspnet-mvc/tabstrip/select-is-not-functioning.aspx