MVC 3 Dao cạo. Xác nhận một phần Chế độ xem không hoạt động

Question

Tôi đang gặp sự cố mà tôi không thể xác thực phía máy khách để kích hoạt trong chế độ xem một phần của mình, tải vào div sau khi người dùng nhấp vào nút. Trong ví dụ này, tôi đã dừng div từ "toggling" để xem việc xác nhận có bị kích hoạt hay không, nhưng không có kết quả, không có gì xảy ra.

May mắn thay, mô hình không chấp nhận bất kỳ thông tin nhập không hợp lệ nào, nhưng nó cũng không cảnh báo cho người dùng về lỗi thực sự. Bất kỳ trợ giúp sẽ được đánh giá cao.

Đây là mẫu của tôi:

public class Help 
{ 
    [HiddenInput(DisplayValue=true)] 
    public int HelpID { get; set; } 

    [Required(ErrorMessage = "Please enter a proper URL")] 
    public string URL { get; set; } 

    [Required(ErrorMessage = "Please enter a content description:")] 
    [DataType(DataType.MultilineText)] 
    public string HelpContent { get; set; } 

    /*? 2 properites are nullable*/ 
    public DateTime? createDateTime { get; set; } 
    public DateTime? modifiedDateTime { get; set; }   
} 

Đây là điều khiển của tôi:

namespace HelpBtn.WebUI.Controllers 
{ 
    /*Create the admin controller*/ 
    public class AdminController : Controller 
    { 
     //declare interface object 
     private IHelpRepository repository; 

     /*Pass a db interface to controller*/ 
     public AdminController(IHelpRepository repo) 
     { 
      repository = repo; 
     } 

     /*default admin screen. displays help table obs*/ 
     public ViewResult Index() 
     { 
      return View(); 
     } 

     /*Returns add view form*/ 
     public ViewResult AddForm() 
     { 
      return View(); 
     } 

     /*Returns edit view form, searches for object to edit with id 
      if no id provided, 0 by default*/ 
     public ViewResult EditForm(int helpID = 0) 
     { 
      Help help = repository.Help.FirstOrDefault(q => q.HelpID == helpID); 
      return View(help); 
     } 

     /*Will handle the post for the edit screen after user has 
      submitted edit information*/ 
     [HttpPost] 
     [ValidateInput(false)] //this allows admin to place html in field. may cause validation problems 
     public ActionResult EditForm(Help help) 
     { 

      if (ModelState.IsValid) //if all fields are validated 
      { 
       //set the edit date 
       help.modifiedDateTime = DateTime.Now; 
       repository.SaveHelp(help); 
       return RedirectToAction("Index"); 
      } 
      else //there is something wrong. send back to view    
      { 
       return View(help); 
      } 
     } 

     /*Delete action method, searches with id*/ 
     [AcceptVerbs(HttpVerbs.Post)] 
     [GridAction] 
     public ActionResult Delete(int helpId) 
     { 
      Help helpDel = repository.Help.FirstOrDefault(p => p.HelpID == helpId); 
      if (helpDel != null) //if the object is found, delete 
      { 
       repository.DeleteHelp(helpDel); 
      } 

      //in all cases return to index 
      return RedirectToAction("Index"); 
     } 

     /*Used by the telerik table to rebind grid*/ 
     [GridAction] 
     public ActionResult AjaxBinding() 
     { 
      return View(new GridModel(repository.Help)); 
     } 
    }//end admin class 
}//end namespace 

Đây là giao diện chính của tôi:

<div id="addContent" style="display: none"></div> 

//Select Function. saves selected row 
function onRowSelect(e) { 
    HelpID = e.row.cells[0].innerHTML; 
} //end onRowSelect 

//Refresh grid function 
function refreshGrid() { 
    $("#Grid").data('tGrid').rebind(); 
} //end refresh grid 

//Variables. '$' b4 name for intellisense 
var HelpID; 
var $editContent = $("#editContent"); 
var $addContent = $("#addContent"); 
//end variables 

//Add Form call. loads partial view to div:content 
$("#Add").click(function() { 
    $editContent.hide(); 
    $editContent.html(""); 
    $.ajax({ 
     type: "Get", 
     url: "/Admin/AddForm", 
     datatype: "html", 
     success: function (data) { 
      $addContent.html(data); 
      $addContent.toggle(); 
     } //end success 
    }); //end ajax 
});  //end add 

//Edit Form call. loads partial view to div:content 
$("#Edit").click(function() { 
    $addContent.hide(); 
    $addContent.html(""); 
    $.ajax({ 
     type: "Get", 
     url: "/Admin/EditForm", 
     dataType: "html", 
     data: { HelpID: HelpID }, 
     success: function (data) { 
      $editContent.html(data); 
      $editContent.toggle(); 
     } //end sucess 
    }); //end ajax 
});   //end edit 

//Delete call. deletes selected row in table 
$("#Delete").live('click', function() { 
    $.post("/Admin/Delete", { HelpID: HelpID }, function() { 
     $addContent.html(""); 
     $editContent.html(""); 
     refreshGrid(); 
    }); //end function 
}); //end delete 

//post add form data back to server 
     $("#btnAdd").live('click', function (e) { 
      e.preventDefault(); 
      $.post($('#Addx').attr('action'), $('#Addx').serialize(), function (data) { 
       refreshGrid(); 
      $addContent.html(""); 
      }); //end post 
      e.preventDefault(); 
     }); 
     // end .live 

     //post edit form data back to server 
     $("#btnEdit").live('click', function (e) { 
      $.post($('#Editx').attr('action'), $('#Editx').serialize(), function (data) { 
       refreshGrid(); 
       $editContent.html(""); 
      }); 

      e.preventDefault(); 
     }); //end post edit 

Và đây là xem một phần của tôi, mà nạp vào div trang chính của:

@model HelpBtn.Domain.Entities.Help 
@*THIS POSTS BACK TO EDIT/ADMIN. needs to be asynchronous*@ 
@using (Html.BeginForm("EditForm", "Admin", FormMethod.Post, new { id = "Addx" })) 
{ 
    <fieldset> 
     <legend>Add Entry</legend> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.URL) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.URL) 
      @Html.ValidationMessageFor(model => model.URL) 
     </div> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.HelpContent, "Help Content") 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.HelpContent) 
      <p> 
       @Html.ValidationMessageFor(model => model.HelpContent, "Enter a value") 
      </p> 
     </div> 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.createDateTime, "Created Date") 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.createDateTime) 
      @Html.ValidationMessageFor(model => model.createDateTime) 
     </div> 
     <p> 
      <input id="btnAdd" type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

Answer 1

Mỗi lần bạn thực hiện một cuộc gọi AJAX và thay thế một số phần của DOM của bạn với nội dung HTML cục bộ được trả về bởi các hành động điều khiển bạn cần reparse các quy tắc xác nhận không phô trương phía khách hàng. Vì vậy, trong callbacks thành công AJAX của bạn khi sau khi bạn gọi phương thức .html() để làm mới DOM bạn cần phải phân tích:

$('form').removeData('validator'); 
$('form').removeData('unobtrusiveValidation'); 
$.validator.unobtrusive.parse('form');