MVC4 - Ajax.BeginForm和Partial视图给出'undefined'

I'm working on an activity booking and I'm having trouble using ajax.beginform with a partial view. When I click submit, it just goes to a new page and there is an 'undefined' in the top left corner. I have "../../Scripts/jquery.unobtrusive-ajax.min.js" in my layout page. What I want to do is when the user submits the form, the div "AjaxTest" gets updated with the partial view and the form is under the search results.

我正在进行活动预订,我在使用部分视图的ajax.beginform时遇到问题。当我点击提交时,它只是转到一个新页面,左上角有一个“未定义”。我的布局页面中有“../../Scripts/jquery.unobtrusive-ajax.min.js”。我想要做的是当用户提交表单时,div“AjaxTest”会使用局部视图进行更新,并且表单位于搜索结果下。

Here is what I have so far (I took out all the structure and styling so its easier to read):

这是我到目前为止(我拿出了所有的结构和样式,因此更容易阅读):

Main View - Activities

主要观点 - 活动

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

Controller

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

Partial View - PartialActivities_Success

部分视图 - 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>

Scripts in Layout Page

布局页面中的脚本

  <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>

3 个解决方案

#1

I noticed one mistake in the code. Your div has an id Ajaxtest but the parameter you are passing to BeginRequest is AjaxTest the T is capital

我注意到代码中有一个错误。你的div有一个id Ajaxtest,但你传递给BeginRequest的参数是AjaxTest,T是资本

#2

Are you using MVC 4? I would make sure that UnobtrusiveJavaScriptEnabled is set to true in your WebConfig file. I believe it is by default, though. The only other thing I can think of is to verify that you have your other jQuery files and that they're being loaded in the right order. If you load your unobrusive jQuery file before the main one then it won't work.

你在使用MVC 4吗?我会确保在WebConfig文件中将UnobtrusiveJavaScriptEnabled设置为true。不过我相信它是默认的。我能想到的唯一另一件事是验证你是否有其他jQuery文件,并且它们是按照正确的顺序加载的。如果您在主要文件之前加载unobrusive jQuery文件,那么它将无法正常工作。

#3

You haven't specified which action to call when posting the Ajax form. Try changing it to this:

在发布Ajax表单时,您尚未指定要调用的操作。尝试将其更改为:

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

#1