2011-08-05 6 views
0

私はAjax.BefinForm()を使用しようとしています。私は間違って何をしたのか分かりません。これで私を助けてください。Ajax.BiginFormはポストバックを引き起こします。私は両方のAjaxスクリプトを含んでいます。ネストされたフォームはありません。

メインビュー:

@model GenericApp.Models.ExperienceModel 
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
@{ 
    ViewBag.Title = "Details"; 
    var comments = Model.Comments == null ? new GenericApp.Models.Comments() : Model.Comments; 

    //comments. 
} 
<h2>Details</h2> 
<p> 
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) | 
    @Html.ActionLink("Back to List", "Index") 
</p> 
<fieldset> 
    <legend>ExperienceModel</legend> 
    <div class="display-field"> 
     <h2> 
      @Html.DisplayFor(model => model.Title) 
     </h2> 
    </div> 
    <div class="display-field"> 
     @Html.DisplayFor(model => model.Description) 
    </div> 
    <div class="display-field"> 
     <b>Created By:</b> @Html.DisplayFor(model => model.CreatedBy) 
    </div> 
    <div class="display-field"> 
     <b>Create Date:</b> @Html.DisplayFor(model => model.CreateDate) 
    </div> 
    <div class="display-field"> 
     <b>Modified By:</b> @Html.DisplayFor(model => model.ModifiedBy) 
    </div> 
    <div class="display-field"> 
     <b>Modified Date:</b> @Html.DisplayFor(model => model.ModifiedDate) 
    </div> 
</fieldset> 
@if (User.Identity.Name == null || User.Identity.Name.Length == 0) 
{ 
    <div>To view or add comments, please log-in</div> 
} 
else 
{ 
    <div id="ShowAllComments"> 
     @Html.Partial("_ShowComments", comments) 
    </div> 
} 

部分図 "_ShowComments" 私のコントローラで

@model GenericApp.Models.Comments 
<table> 
    <tr> 
     <th> 
      Description 
     </th> 
     <th> 
      CreatedBy 
     </th> 
     <th> 
      CreateDate 
     </th> 
    </tr> 
    @foreach (var item in Model.CommentList) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.Description) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.CreatedBy) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.CreateDate) 
      </td> 
     </tr> 

    } 
</table> 
@{ 
    GenericApp.Models.Comment comment = new GenericApp.Models.Comment(); 
    AjaxOptions opts = new AjaxOptions() 
    { 
     UpdateTargetId = "ShowAllComments", 
     HttpMethod = "POST", 
     Confirm = "Are you sure you want to save your comments", 
     InsertionMode = InsertionMode.Replace 
    }; 
    using (Ajax.BeginForm("StoreComments", new { id = Model.ParentID}, opts, new { id = "ajaxForm" })) 
    { 
     Html.ValidationSummary(true); 
     <fieldset> 
      <div class="editor-field"> 
       @Html.LabelFor(model => comment.Description)</div> 
      <div class="editor-field"> 
       @Html.EditorFor(model => comment.Description) 
       @Html.ValidationMessageFor(model => comment.Description) 
      </div> 
     </fieldset> 
     <input type="submit" value="Save" /> 
    } 
} 

アクションコード:

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult StoreComments(int id, FormCollection collection) 
    { 
     if (Request.IsAjaxRequest()) 
     { 
      ExperienceModel exp = getExpById(id); 
      if (exp.Comments == null) 
      { 
       exp.Comments = new Comments(); 
       exp.Comments.ParentID = exp.ID; 
       exp.Comments.CommentList = new List<Comment>(); 
      } 
      Comment com = new Comment(); 
      com.Description = Request.Params["comment.Description"]; 
      com.CreatedBy = User.Identity.Name; 
      com.CreateDate = new DateTime().ToString(); 
      com.ID = exp.Comments.CommentList.Count; 
      exp.Comments.CommentList.Add(com); 
      return PartialView("_ShowComments", exp.Comments); 
     } 
     else 
     { 
      return this.Content("Hi"); 
     } 
    } 

私はなかれ空欄に "こんにちは" を見終わりますページ

レンダリングされたHTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Details</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <div class="page"> 
     <div id="header"> 
      <div id="title"> 
       <h1>My MVC Application</h1> 
      </div> 
      <div id="logindisplay"> 
        Welcome <strong>sadanands</strong>! 
    [ <a href="/Account/LogOff">Log Off</a> ] 

      </div> 
      <div id="menucontainer"> 
       <ul id="menu"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/About">About Us</a></li> 
        <li><a href="/Experience">Our Experience</a></li> 
        <li></li> 
       </ul> 
      </div> 
     </div> 
     <div id="main"> 
      <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.min.js"  type="text/javascript"></script> 
<h2>Details</h2> 
<p> 
    <a href="/Experience/Edit/1">Edit</a> | 
    <a href="/Experience">Back to List</a> 
</p> 
<fieldset> 
    <legend>ExperienceModel</legend> 
    <div class="display-field"> 
     <h2> 
      First Exp 
     </h2> 
    </div> 
    <div class="display-field"> 
     hsdh asfhasjfkl fidsjfkldsj fkl dklds lfjdslfj sdsfhkjhdsf ahdfklhs fdsfhklds fldshfklsd fdskfhklds fkjds fhdskfhs fds fkfhkjds ffhsdk 
    </div> 
    <div class="display-field"> 
     <b>Created By:</b> xxxxxxx 
    </div> 
    <div class="display-field"> 
     <b>Create Date:</b> 1/1/2010 
    </div> 
    <div class="display-field"> 
     <b>Modified By:</b> abcdefg 
    </div> 
    <div class="display-field"> 
     <b>Modified Date:</b> 1/5/2010 
    </div> 
</fieldset> 
    <div id="ShowAllComments"> 
     <table> 
    <tr> 
     <th> 
      Description 
     </th> 
     <th> 
      CreatedBy 
     </th> 
     <th> 
      CreateDate 
     </th> 
    </tr> 
</table> 
<form action="/Experience/StoreComments/0" data-ajax="true" data-ajax-confirm="Are you sure you want to save your comments" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#ShowAllComments" id="ajaxForm" method="post">  <fieldset> 
      <div class="editor-field"> 
       <label for="comment_Description">Description</label></div> 
      <div class="editor-field"> 
       <textarea class="text-box multi-line" data-val="true" data-val-required="The Description field is required." id="comment_Description" name="comment.Description"> 
</textarea> 
       <span class="field-validation-valid" data-valmsg-for="comment.Description" data-valmsg-replace="true"></span> 
      </div> 
     </fieldset> 
     <input type="submit" value="Save" /> 
</form> 
    </div> 


     </div> 
     <div id="footer"> 
     </div> 
    </div> 
</body> 
</html> 

このページではJavaScriptエラーが表示されません。 IEデバッガツールを使って、MicrosoftAjax.jsとMicrosoftMvcAjax.jsがロードされているかどうかを確認しました。

すべてのヘルプは非常にビューのフォルダに

私のWeb.Configをにappriciatedされるだろう:私はここにすべての情報を出している

<configuration> 
    <configSections> 
    <sectionGroup name="system.web.webPages.razor"  type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> 
     <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral,  PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> 
     <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> 
    </sectionGroup> 
    </configSections> 

    <system.web.webPages.razor> 
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
    <pages pageBaseType="System.Web.Mvc.WebViewPage"> 
     <namespaces> 
     <add namespace="System.Web.Mvc" /> 
     <add namespace="System.Web.Mvc.Ajax" /> 
     <add namespace="System.Web.Mvc.Html" /> 
     <add namespace="System.Web.Routing" /> 
     <add namespace="GenericApp.Infrastructure" /> 
     <add namespace="GenericApp.Extensions"/> 
     </namespaces> 
    </pages> 
    </system.web.webPages.razor> 

    <appSettings> 
    <add key="webpages:Enabled" value="false" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
    </appSettings> 

    <system.web> 
    <httpHandlers> 
     <add path="*" verb="*" type="System.Web.HttpNotFoundHandler"/> 
    </httpHandlers> 

    <!-- 
    Enabling request validation in view pages would cause validation to occur 
    after the input has already been processed by the controller. By default 
    MVC performs request validation before a controller processes the input. 
    To change this behavior apply the ValidateInputAttribute to a 
    controller or action. 
--> 
    <pages 
     validateRequest="false" 
     pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
    pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" 
    userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> 
     <controls> 
     <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.Mvc" tagPrefix="mvc" /> 
     </controls> 
    </pages> 
    </system.web> 

    <system.webServer> 
    <validation validateIntegratedModeConfiguration="false" /> 

    <handlers> 
     <remove name="BlockViewHandler"/> 
     <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode"  type="System.Web.HttpNotFoundHandler" /> 
    </handlers> 
    </system.webServer> 
</configuration> 

希望。

答えて

1

私は答えを見つけました。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
:私はあなたが私の以前の記事で、メインビューを見れば、それは

<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")"  type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

を持っていますが、不足している1だった1

以外のすべての必要なスクリプトを含めビューで

このスクリプトタグが追加されていれば、MicrosoftAjax.jsとMicrosoftMvcAjax.jsを削除しても、コードは機能するはずです。それは私のためにやった。

サダナンド

関連する問題