javascript - 使用 mvc 4 razor 显示外部部分视图的客户端验证错误消息

Question

我的视图有 3 个选项卡，例如“tab1”、“tab2”和“tab3”。当我出于某种目的尝试在“tab2”的剑道网格的 ClientDetailTemplate 中加载“tab1”的内容时。loded 内容具有一些输入控件和按钮。当我单击提交按钮表单无效但立即（外侧）显示验证消息时。验证消息在“tab1”上正确显示。

我想在'tab2'的剑道网格的ClientDetailTemplate中加载'tab1'中的代码。验证消息在'tab1'上正确显示

@{ Layout = null;
ViewContext.FormContext = new FormContext();}

@model PatientPortal.Model.Data.CommunicationMessasge
    <script type="text/javascript" src="~/Scripts/Validators/_SendMessage.js"></script>
    <script type="text/javascript" src="@Url.Content("~/scripts/jquery.validate.unobtrusive.js")"></script>

 @using (Html.BeginForm("SendMessageView", "Account", FormMethod.Post, new { id = "_sendMessageViewForm" }))
 {
     <table class="formStyle" style="margin-top: 10px;width:100%;" >


            <tr>
       <td colspan="2">
        </td>
    </tr>
        <tr>
        <td style="width:10%; " >
         <span class="bText">*</span>To:
        </td>
        <td style="width:90%;" >
            @(Html.Kendo().AutoCompleteFor(m=>m.MessageTo)
      .Name("MessageTo")
      .HtmlAttributes(new { style = "width:60%;" })
      .DataTextField("FirstNameWithEmail")
      .Filter("contains")
      .Separator(",")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetPortalUsers", "Home").Data("onAdditionalData");
          }).ServerFiltering(true);
      })
      .Filter("startswith")
      .MinLength(1)
      .Height(150)
      .Template("<dl>" +
                            "<dd style='height:5px;vertical-align:central;' >${ data.FirstName } ${ data.LastName }</dd>" +
                        "</dl>")
        )
        </td>
     </tr>
                    <tr>
        <td style="width:10%;" >
         CC:
        </td>
        <td style="width:90%;"  >
            @(Html.Kendo().AutoCompleteFor(m=>m.CopyTo)
      .Name("CopyTo")
      .HtmlAttributes(new { style = "width:60%;" })
      .DataTextField("FirstNameWithEmail")
      .Filter("contains")
      .Separator(",")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetPortalUsers", "Home").Data("onCopyTo");
          }).ServerFiltering(true);
      })
      .Filter("startswith")
      .MinLength(1)
      .Height(150)
      .Template("<dl>" +
                            "<dd style='height:5px;vertical-align:central;' >${ data.FirstName } ${ data.LastName }</dd>" +
                        "</dl>")
        )
        </td>
     </tr>

    <tr>
       <td style="width:10%;">
        Subject:
        </td>
        <td style="width:90%;">
              @Html.TextBoxFor(m => m.Subject, new { style = "width:60%;",pattern = "[a-zA-Z0-9@.]*" })
        </td>

    </tr>
    <tr>
        <td style="width:10%;">
        <span class="bText">*</span>Message:
        </td>
        <td style="width:90%;">
            @Html.TextAreaFor(m => m.Comments, new { style = "width:60%;", rows="20"})
        </td>
    </tr>

    <tr>
        <td style="width:10%;" >

        </td>
        <td style="width:90%;">
            <input type="checkbox" name="cbSaveAsDraft" id="cbSaveAsDraft"  checked="checked" style="width:20px;">Save Message in Sent Folder
        </td>
     </tr>
    <tr>
        <td colspan="2">
            @Html.HiddenFor(m=>m.MessageId)
            @Html.HiddenFor(m=>m.MessageFrom)

        </td>
    </tr>
</table>
    <div>
        <input type="button" id="btnSend" value="Send" style="width: 100px;" class="k-button" onclick="PostMessageDetails(1)" />&nbsp;&nbsp;<input type="button" id="btnReply"  value="Reply" style="width: 100px; display:none;" class="k-button" onclick="    PostMessageDetails(2)" />&nbsp;&nbsp;<input type="button" id="btnForword" value="Forword" style="width: 100px; display:none;" class="k-button" onclick="    PostMessageDetails(3)" />&nbsp;&nbsp;<input type="button" id="btnNew" value="New" style="width: 80px;display:none;" class="k-button" onclick="    clearMsgFields(); showHideMsgButton('new');" />&nbsp;&nbsp;<input type="button" id="btnCancel" value="Discard" style="width: 100px;" class="k-button" onclick="    clearMsgFields(); showHideMsgButton('cancel');" />&nbsp;&nbsp;<input type="button" id="btnSendReply"  value="Send" style="width: 100px; display:none;" class="k-button" onclick="    PostMessageDetails(2)" />&nbsp;&nbsp;<input type="button" id="btnDiscard" value="Discard" style="width: 100px; display:none;" class="k-button" />
        @*<input type="button" id="btnSend" value="Send" style="width: 100px;(@TempData["SendDisplayValue"] != null) ? @TempData["SendDisplayValue"]: display:block;" class="k-button" onclick="PostMessageDetails(1)"  />&nbsp;&nbsp;<input type="button" id="btnReply"  value="Reply" style="width: 100px; (@TempData["ReplyDisplayValue"] !=null) ? @TempData["ReplyDisplayValue"] : display:none;" class="k-button" onclick="    PostMessageDetails(2)" />&nbsp;&nbsp;<input type="button" id="btnForword" value="Forword" style="width: 100px; display:none;" class="k-button" onclick="    PostMessageDetails(3)" />&nbsp;&nbsp;<input type="button" id="btnNew" value="New" style="width: 80px; display:none;" class="k-button" onclick="    PostMessageDetails(2);" />&nbsp;&nbsp;<input type="button" id="btnCancel" value="Discard" style="width: 100px; " class="k-button" onclick="@TempData["onCalcelFunction"]"  />*@
    </div>

 }

以及包含剑道网格的“tab2”上的代码。在这个网格的 ClientDetailTemplate 中，我想加载“tab1”的内容

<script type="text/javascript" src="~/Scripts/Validators/_MessagesList.js" ></script>
<script type="text/javascript" src="@Url.Content("~/scripts/jquery.validate.unobtrusive.js")"></script>
<style>
    /*<span class="k-icon k-delete"></span>*/
    /*<span class="k-icon k-delete"></span>Delete*/
        span.k-delete {
            background: url("../../../Images/deletes.gif");
        }
        .k-grid .k-button-icontext .k-icon {
            margin: 0;
            vertical-align: middle;
            background-color:transparent;
            border:none;
        }
        .k-grid tbody .k-button {
            min-width: 30px;
            width: 30px;
            border:none;
        }
    .unreadRows
    {
        font-weight:bold;
    }

.k-grid td{
border-color:transparent;
}
    </style>
<div id="divContainer" >
    <div id="replyMsgURL" data-request-url="@Url.Action("SendMessageView", "Account")"></div>
    <div id="loader" data-request-url="@Url.Action("changeMsgStatus", "Account")"></div>
@using (Html.BeginForm("MessageListView", "Account", FormMethod.Post, new { id = "_messagesListViewForm" }))
                    {  

<table  class="formStyle" style="width:100%;">
                              <tr>
                                  <td>
                                      <table style="width:100%;">
                                          <tr>
                                              <td>
                                                   InBox<input type="radio" name="msgType" id="rdInBox" value="true" style="width:5%" checked="checked" onclick="fillMsgList()"/>

                                                  Sent<input type="radio" name="msgType" id="rdSent" value="true"  style="width:5%"  onclick="fillMsgList()"/>

                                                  Draft<input type="radio" name="msgType" id="rdDraft" value="true"  style="width:5%" onclick="fillMsgList()" />
                                              </td>
                                          </tr>
                                      </table>
                                  </td>
                              </tr>
    <tr>
        <td>

            @Html.Kendo().Window().Name("wdwMsg").Title("Message").Draggable().Height(200).Width(200).Content(@<div id="divMsg"></div>)
        </td>
    </tr>
                              <tr>
                                  <td>
                                      @{

                                      <div id="divGrid" >
 @(Html.Kendo().Grid<PatientPortal.Model.Data.CommunicationMessasge>()    
    .Name("GridMsgList")
    .CellAction(cell =>
      {

          if (cell.DataItem.Status == 2)
        {
            cell.HtmlAttributes["style"] = "color:gray";

        }

      }
    )
    .Columns(columns =>
    {


        columns.Bound(m => m.MessageId).Groupable(false).Hidden();        
        columns.Bound(m => m.MessageFrom).Title("From").HtmlAttributes("grName:GrdRow;");
        columns.Bound(m => m.MessageTo).Title("To");
        columns.Bound(m => m.Subject);
        columns.Bound(m => m.MessageDate).Format("{0:dd/MM/yyyy}").Title("Date");
        columns.Command(command => { command.Destroy().Text(""); }).Title("Delete").Width("20px");
       })

    .ClientDetailTemplateId("template")
                            .Pageable()
                            .Sortable()
                            .Filterable()
                            .Events(events => events.DataBound("onDataBound"))
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Events(events => events.Error("error_handler"))
                                .Read(read => read.Action("GetPatientMessage", "Account").Data("getMsgType")).PageSize(10)
                                .Model(model => model.Id(m => m.MessageId))
                                .Destroy(delete => delete.Action("deleteMassage", "Account").Data("getMsgType"))                               
                            )

                        )
    </div>      

                                      }
                                  </td>
                              </tr>
                          </table>


}
    </div>
  <script id="template" type="text/kendo-tmpl">

     <div id="divOuter" class="dashContentBlock divShadowOuter" >
   <div id="divDetails_#=MessageId#">
       <ul style="list-style:none">
           <li><b>From:</b> #= MessageFrom #</li>
           <li><b>To:</b> #= MessageTo #</li>
           <li><b>Subject:</b> #= Subject #</li>
           <li><b>Message:</b> #= Comments #</li>
           <li>&nbsp;&nbsp;</li>
           <li><input  type="button" value="Reply" title="Reply" class="k-button" style="width: 100px;" onclick="EditMesg(#:MessageId#,#:Status#,'#= MessageFrom #')"/></li>
           </ul>
   </div>
    <div id="divViewContainer_#=MessageId#" style="display:none;" >
        <div id="divView_#=MessageId#" style="border:0px none none;" >
            </div>

        </div>
</div>
</script>

该函数用于将'tab1'的内容加载到'tab2'

function EditMesg(id, Status, MessageFrom) {
    var replyUrl = $("#replyMsgURL").data('request-url');
    $("#divView_" + id).load(replyUrl, { 'id': id },
                                    function (response, status, xhr) {
                                        //set SendMessagePartial
                                        $('#btnNew').hide();
                                        $('#btnSend').hide();
                                        $('#btnReply').hide();
                                        $('#btnForword').hide();
                                        $('#btnCancel').hide();
                                        $('#btnSendReply').show();
                                        $('#btnDiscard').show();
                                        $("#MessageTo").data("kendoAutoComplete").value(MessageFrom);
                                        //$("#MessageTo").data("kendoAutoComplete").readonly(true);
                                        $("#btnDiscard").click(function () {
                                            $("#divViewContainer_" + id).hide();
                                            $("#divDetails_" + id).show();
                                            var $form = $('#_sendMessageViewForm');
                                            $.validator.unobtrusive.parse($form);
                                        });
                                        if (status == "error") {
                                        }

                                    });
    $("#divViewContainer_" + id).show();
    $("#divDetails_" + id).hide();

}