3

アクティビティの予約に取り組んでいますが、部分ビューで ajax.beginform を使用する際に問題があります。送信をクリックすると、新しいページに移動し、左上隅に「未定義」と表示されます。レイアウト ページに「../../Scripts/jquery.unobtrusive-ajax.min.js」があります。私がやりたいことは、ユーザーがフォームを送信すると、div "AjaxTest" が部分ビューで更新され、フォームが検索結果の下にあることです。

ここに私がこれまでに持っているものがあります（読みやすいようにすべての構造とスタイルを取り除きました）：

メイン ビュー - アクティビティ

@model Project.Models.ActivityModel
<div id="AjaxTest"></div>

@using (Ajax.BeginForm(new AjaxOptions
  {
   UpdateTargetId = "AjaxTest",
   InsertionMode = InsertionMode.Replace, 
   HttpMethod = "POST"
  }))

  {
    @Html.ValidationSummary(true)
      @Html.TextBoxFor(x => x.Activity_CityName)
        <div class="editor-label">   
            <strong>@Html.LabelFor(x => x.Activity_StartDate)</strong>
        </div> 
        <div class="editor-field">
            <input id="checkin" type="text" name="Activity_StartDate" />
        </div>
      @Html.TextBoxFor(x => x.Activity_EndDate)
      @Html.DropDownListFor(x => x.Activity_NumAdults, AdultNum)
      @Html.DropDownListFor(x => x.Activity_NumChildren)
      @Html.DropDownListFor(x => x.Activity_ChildAge1, ChildAge)
      @Html.DropDownListFor(x => x.Activity_ChildAge2, ChildAge)
      @Html.DropDownListFor(x => x.Activity_ChildAge3, ChildAge)

     <div class="submitbutton"> 
        <input data-inline="true"type="submit" id="activity_search" value="Search" />
    </div> 
  }

コントローラ

[HttpPost]
    public ActionResult Activities(ActivityModel activitysubmission) {
       return PartialView("PartialActivities_Success", activitysubmission);
    }

部分ビュー - PartialActivities_Success

@model Project.Models.ActivityModel

<p>City: @Model.Activity_CityName</p>
<p>StartDate: @Model.Activity_StartDate</p>
<p>EndDate: @Model.Activity_EndDate</p>

<div>
    <p><strong>Ticket</strong></p>
    <p>Number of Adults: @Model.Activity_NumAdults</p>
    <p>Number of Children: @Model.Activity_NumChildren</p>
    <p>Child 1 age: @Model.Activity_ChildAge1</p>
    <p>Child 2 age: @Model.Activity_ChildAge2</p>
    <p>Child 3 age: @Model.Activity_ChildAge3</p>
</div>

レイアウト ページのスクリプト

  <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"> </script>
    <script src="../../Scripts/xdate.js" type="text/javascript"></script>
    <script src="../../Scripts/xdate.i18n.js" type="text/javascript"></script>
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
    <script>
        $(document).bind("mobileinit", function() {
            // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
            // when navigating from a mobile to a non-mobile page, or when clicking "back"
            // after a form post), hence disabling it.
            $.mobile.ajaxEnabled = true; // originally false.
        });
    </script>
4

3 に答える 3

1

コードに 1 つの間違いがあることに気付きました。div には idAjaxtestがありますが、BeginRequest に渡すパラメーターはAjaxTestT が大文字です

于 2012-06-14T17:31:21.697 に答える
1

MVC 4 を使用していますか? WebConfig ファイルで UnobtrusiveJavaScriptEnabled が true に設定されていることを確認します。ただし、デフォルトであると思います。他に考えられる唯一のことは、他の jQuery ファイルがあり、それらが正しい順序で読み込まれていることを確認することです。メインの jQuery ファイルの前に目立たない jQuery ファイルをロードすると、機能しません。

于 2012-07-09T17:53:53.930 に答える
0

Ajax フォームを送信するときに呼び出すアクションを指定していません。これを次のように変更してみてください。

@using (Ajax.BeginForm("Activities", new AjaxOptions
  {
    UpdateTargetId = "AjaxTest",
    InsertionMode = InsertionMode.Replace, 
    HttpMethod = "POST"
  }))
于 2012-11-14T13:46:14.410 に答える