2012-06-14 34 views
3

我正在進行一項活動預訂,並且在使用ajax.beginform時出現了局部視圖問題。當我點擊提交時,它會進入一個新頁面,左上角有一個'未定義'。我的佈局頁面中有「../../Scripts/jquery.unobtrusive-ajax.min.js」。我想要做的是當用戶提交表單時,div「AjaxTest」用局部視圖更新並且表單在搜索結果下。MVC4 - Ajax.BeginForm和部分視圖給出'undefined'

這裏是我到目前爲止(我拿出所有的結構和造型所以它更容易閱讀):

主視圖 - 活動

@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); 
    } 

部分視圖 - 部分活動_成功

@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>  
+0

我懷疑它可能是引用javascript文件的問題。你能告訴我們你是如何引用你的頁面中的JavaScript文件嗎 –

+0

我已經更新了我的問題。您可以按照我放置的順序查看腳本 –

+0

請勿混用捆綁和直接腳本引用。嘗試任何一個。 – VJAI

回答

1

我注意到了一個代碼錯誤。你的div的編號爲Ajaxtest,但你傳遞給BeginRequest的參數是AjaxTest T是大寫

+0

啊更正。不幸的是,我仍然在左上角看到一個未定義的空白頁面。我真的很感激幫助 –

1

你使用的是MVC 4嗎?我會確保UnobtrusiveJavaScriptEnabled在您的WebConfig文件中設置爲true。不過,我相信這是默認設置。我唯一能想到的其他事情就是驗證你有其他jQuery文件,並且它們按正確的順序加載。如果你在主要的文件之前加載你的unobrusive jQuery文件,那麼它將不起作用。

0

您沒有在發佈Ajax表單時指定要調用哪個動作。嘗試將其更改爲:

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