使用 xVal 和 ViewModel

Question

我看到一篇类似的文章试图用晚餐示例做同样的事情，但他解决了他的问题，我的问题似乎更深一些。基本上我 cxan 验证工作得很好，但它只适用于 Firefox。在 IE7 中，当页面加载时，我立即收到一个警告框，其中包含以下消息：“错误：元素标题不在表单中”...显然它是在此处的表单中，如果需要，我可以发布实际呈现的标记从查看源代码来显示这一点。任何关于我能做什么来解决这个问题的想法将不胜感激！

基本上我只是想确保我的 NewsPost 有标题和正文。因为我把它包含在 ViewModel 中，所以我认为 IE 不太理解这一点。也许我错了。

我正在使用 xVal 进行验证。我正在传递一个 ViewModel 作为我的模型。我的 ViewModel 看起来像这样：

public class NewsAdminViewData : ViewModel
{
   public NewsPost NewsPost { get; set; }
   public List<SelectListItem> NewsItem { get; set; }
   public List<SelectListItem> NewsGroup { get; set; }

   public NewsAdminViewData(List<SelectListItem> newsItem, List<SelectListItem> newsGroup, NewsPost newsPost)
   {
      this.NewsItem = newsItem;
      this.NewsGroup = newsGroup;
      this.NewsPost = newsPost;
   }
}

这是我的视图：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MVCApp.Models.ViewModels.News.NewsAdminViewData>" %>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <% using (Html.BeginForm())
           {%>
        <div class="moduleContainer">
            <div class="moduleTitle">
                Create News Item
            </div>
            <div class="moduleContent">
                <div>
                    <div>
                        Title:</div>
                    <div>
                        <%= Html.TextBox("Title") %>
                    </div>
                </div>
                <div>
                    <div>
                        &nbsp;</div>
                    <div>
                        <%= Html.TextArea("Body") %>
                    </div>
                </div>
                <div>
                    <div>
                        News Group:
                    </div>
                    <div>
                        <%= Html.DropDownList("NewsGroup")%>
                    </div>
                </div>
                <div>
                    <div>
                        News Item:
                    </div>
                    <div>
                        <%= Html.DropDownList("NewsItem") %>
                    </div>
                </div>
            </div>
            <div class="moduleFooter">
                <%= Html.SubmitButton("btnSubmit", "Add News Post", null, "To add this news post click here.", "#ffd40f")%>
            </div>
        </div>
        <% } %>
        <%= Html.ClientSideValidation<NewsPost>()%>

最后是我的后操作：

 [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult Create(/*FormCollection collection*/ NewsPost np)
    {
       NewsPost entity = this.reposNewsPost.New();
       try
       {
          entity.Title = np.Title; 
          entity.NewsPostGUID = System.Guid.NewGuid();
          entity.DateAdded = DateTime.Now;
          entity.DateUpdated = DateTime.Now;
          entity.Body = np.Body; 

          UpdateModel(entity);
          this.reposNewsPost.Insert(entity);
          this.reposNewsPost.SubmitChanges();
          return RedirectToAction("Index");
        }
        catch (RulesException ex)
        {
           ex.AddModelStateErrors(ModelState, "NewsPost");
           return ModelState.IsValid ? RedirectToAction(MVC.News.Actions.Create) 
                        : (ActionResult)View();
        }
     }

Answer 1

我遇到了和你类似的问题。老实说，看起来你不像我那样把事情弄得一团糟，但也许它会引导你找到解决方案。

我的带有 xVal 客户端验证的输入表单被动态加载（jquery ajax 调用）到页面中。不幸的是，我忽略了我将返回的 html 放入父元素之间已经具有“form”的元素中。因为它是一个ajax请求，所以页面上存在嵌套的“form”元素，并且xVal方法“_attachRuleToDOMElement”是这样实现的：

 var parentForm = element.parents("form");
        if (parentForm.length != 1)// <-- there can be only one parent form of course
            alert("Error: Element " + element.attr("id") + " is not in a form");

我的parentForm.lengts是2！

我发现您在这里肯定没有嵌套表单，但也许在母版页中有一些东西？可能是 IE7 呈现嵌套表单，而 Firefox 不呈现。
另外，我会对输入控件进行不同的命名，尽管这不应该是问题的根源：

<%= Html.TextBox("np.Title") %>...<%= Html.TextBox("np.Body") %> etc...

然后我也会设置 elementPrefix：

<%= Html.ClientSideValidation<NewsPost>("np")%>