Telerik MVC Tabstrip表單提交失去焦點並在發佈後留下頁面

我正在與MVC 4項目中的Telerik控件一起工作。具體來說，我有一個有父/子網格設置的頁面。子網格位於Tabstrip中，我有另一個Tab，我希望允許用戶提交其聯繫信息的更改。Telerik MVC Tabstrip表單提交失去焦點並在發佈後留下頁面

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

在這一點上，我能夠設置我的代碼有一個局部視圖，並在選項卡中成功地調出表單。我有一個測試領域的電子郵件，我可以檢索和填充模型。驗證正在工作。我現在的問題是，表單提交後，它將離開子選項卡，並基於部分視圖創建新頁面，而不是保留在已有的選項卡中。

那麼，如何在表單提交後將焦點保留在當前子標籤中？一般來說，我對MVC都很陌生，所以對Telerik來說可能並不是特定的東西。預先感謝任何建議，下面是一些代碼片段。

查看我的主頁上的代碼。

.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); 
     } 

    }

來源

2013-06-25 user1143550

因爲它有時會發生，我能夠最終拿出一個不同的搜索條件來得到這個解決。這是我做的。

對於控制器，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(); 
});

來源

2013-06-25 17:36:02 user1143550

使用JavaScript代碼通過下面的示例代碼

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

將焦點設置該選項卡上

來源

2013-06-25 17:37:29

Telerik MVC Tabstrip表單提交失去焦點並在發佈後留下頁面

回答

相關問題