Question

我正在进行活动预订，但我在使用部分视图的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>

Answer 1

我注意到代码中有一个错误。您的div的标识为Ajaxtest，但您传递给BeginRequest的参数为AjaxTest，T为大写

Answer 2

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

Answer 3

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

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

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

3 个答案: