MVC 3 Ajax.beginformは提出 - フルポストバック

Question

を起こしこんにちは、私はMVC 3

を使用してajax.beginformとグリップを取得しようとしています、私は2つの形態、正常に動作しHTML.BeginFormとAjax.BeginFormを持っています部分的に見ることができる。 Ajaxフォームのポストは、モデルにメモを追加することです。

問題は、メインビューのHTML.BeginFormを含むページ全体をサブミットし、メモと非同期ポストを実行しないことです。

誰かが間違っているのを見ることができますか？

アイブ氏は、他の質問を見て、web.configファイルで控えめなJavaScriptを無効にしているなど

ビュー：

<div id="maincontent"> 
@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
    <legend>Edit Franchise</legend> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Name) 
     @Html.ValidationMessageFor(model => model.Name) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.FirstLine) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.FirstLine) 
     @Html.ValidationMessageFor(model => model.FirstLine) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.SecondLine) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.SecondLine) 
     @Html.ValidationMessageFor(model => model.SecondLine) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.City) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.City) 
     @Html.ValidationMessageFor(model => model.City) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Postcode) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Postcode) 
     @Html.ValidationMessageFor(model => model.Postcode) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Telephone) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Telephone) 
     @Html.ValidationMessageFor(model => model.Telephone) 
    </div> 
    <p class="clear"> 
     <input type="submit" value="Save" /> 
    </p> 
    </fieldset> 

    @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note()) 

} 

部分図：

@model Cash4Schools.Domain.Model.Note 
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script> 

@using (Ajax.BeginForm("AddNote", "Franchises", 
    new AjaxOptions { 
    HttpMethod = "POST", 
    UpdateTargetId = "note" }, 
    new { id = "ajaxForm" }) 
    ) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Add a Note</legend> 

     <div class="editor-label"> 
     @Html.LabelFor(model => model.Content) 
     </div> 
     <div class="editor-field"> 
     @Html.EditorFor(model => model.Content) 
     @Html.ValidationMessageFor(model => model.Content) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.CreationDate) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.CreationDate) 
     @Html.ValidationMessageFor(model => model.CreationDate) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.CreatedBy) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.CreatedBy) 
     @Html.ValidationMessageFor(model => model.CreatedBy) 
    </div> 

    <p class="clear"> 
     <input type="submit" value="Add" /> 
    </p> 
</fieldset> 

}

コントローラー：

[HttpPost] 
public ActionResult AddNote(Note model) 
{ 
    var franchise = _franchiseRepository.FindById(model.Id); 

    franchise.Notes.Add(
    new Note { 
     Content = model.Content, 
     CreationDate = DateTime.Now, 
     CreatedBy = model.CreatedBy, 
     Type = NoteType.Franchise 
    } 
); 

    _franchiseRepository.Save(franchise); 

    return PartialView(franchise.Notes); 
} 

HTML出力：

<form action="/Franchises/AddNote?Length=10" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#note" id="ajaxForm" method="post"> <fieldset> 
    <legend>Add a Note</legend> 
    <div class="editor-label"> 
     <label for="Content">Content</label> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" id="Content" name="Content" type="text" value="" /> 
     <span class="field-validation-valid" data-valmsg-for="Content" data-valmsg-replace="true"></span> 
    </div> 
    <div class="editor-label"> 
     <label for="CreationDate">CreationDate</label> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" data-val="true" data-val-required="The CreationDate field is required." id="CreationDate" name="CreationDate" type="text" value="01/01/0001 00:00:00" /> 
     <span class="field-validation-valid" data-valmsg-for="CreationDate" data-valmsg-replace="true"></span> 
    </div> 
    <div class="editor-label"> 
     <label for="CreatedBy">CreatedBy</label> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" id="CreatedBy" name="CreatedBy" type="text" value="" /> 
     <span class="field-validation-valid" data-valmsg-for="CreatedBy" data-valmsg-replace="true"></span> 
    </div> 

    <p class="clear"> 
     <input type="submit" value="Add" /> 
    </p> 

</fieldset> 
</form><div id="note"></div> 

Answer 1

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 

    </fieldset> 

    @Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note()) 
    --Partial call and therefore, the form within the partial, is embedded 
    --in the main form 
} 

変化を。

Answer 2

がマイクロソフトのライブラリへのあなたの参照を削除し、今とにかく背後で使用されているものであるだけjQueryの...を使用しています。控えめなJavaScriptを有効にして、私のブログ記事のようにlibsをここに入れてください。それはうまくいくはずです。フォーム内に埋め込まれたフォームは、作品をいじくるさ

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
    .... 
    </fieldset> 

} 

@Html.Partial("Partial/_AddNote", new Cash4Schools.Domain.Model.Note()) 
--Partial call outside main form, no longer embedded. Works 

に

http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html