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

Question

我正在 MVC 4 项目中使用 Telerik 控件。具体来说，我有一个具有父/子网格设置的页面。子网格位于 Tabstrip 中，我有另一个选项卡，我希望允许用户提交更改他们的联系信息。

我在 Telerik 中使用的示例/演示可以在 here - http://demos.telerik.com/aspnet-mvc/razor/grid/detailsajax 找到。

此时，我能够将我的代码设置为具有局部视图并在选项卡中成功显示表单。我有一个电子邮件测试字段，我可以根据模型检索和填充它。验证正在工作。我现在的问题是，在表单提交后，它会离开子选项卡并根据部分视图打开一个新页面，而不是停留在它已经打开的选项卡中。

那么，如何在表单提交后将焦点保持在当前子选项卡中？一般来说，我对 MVC 相当陌生，所以它可能甚至不是 Telerik 特有的。提前感谢您的任何建议，下面是一些代码 sn-ps。

从我的主页查看代码。

.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()

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()
}

来自控制器的代码

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

按照示例代码，使用 javascript 代码将焦点设置在该选项卡上

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

有关详细信息，请参阅这些链接 http://demos.telerik.com/aspnet-mvc/tabstrip/clientsideapi http://www.telerik.com/community/forums/aspnet-mvc/tabstrip/select-is-not-functioning.aspx

Answer 2

正如有时发生的那样，我终于能够使用不同的搜索条件来解决这个问题。这就是我所做的。

对于 Controller，HttpPost 部分已更改为返回 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 });

        }

    }

因此，它不再转到其他很棒的页面。但是，验证停止工作。因此，解决方法是在局部视图中的 jquery 提交中。确保您有 jquery.validate 和 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();
});