Asp。Net MVC Ajax表单没有发布到操作。

I'm having a bit of an issue with an Ajax form. I've probably done it a bit backwards no doubt. Basically, when I hit the submit button in the form, nothing at all happens. I've debugged however it doesn't appear to post to the action method. It literally does nothing.

我对Ajax表单有点问题。我可能已经做了一点，毫无疑问。基本上，当我按表单中的submit按钮时，什么都不会发生。我已经调试了，但是它似乎没有发布到action方法。它什么也不做。

Here is my code so far:

这是我目前的代码:

Basically I post information from a form with the model of DetailedBreakdownReportRequest. This model is being passed through fine as my page displays the list of initial unfiltered results.

基本上，我使用DetailedBreakdownReportRequest模型从表单中发布信息。当我的页面显示初始的未过滤结果列表时，这个模型正在被很好地传递。

DetailedBreakdownReport Action Method:

DetailedBreakdownReport操作方法:

[HttpPost]
public ActionResult DetailedBreakdownReport(DetailedBreakdownReportRequest reportRequest, FormCollection formVariables)
{
    return View(reportRequest);
}

DetailedBreakdownReport View

DetailedBreakdownReport视图

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Main.Master" Inherits="System.Web.Mvc.ViewPage<MyApp.Data.AdvancedReports.AdvancedReports.DetailedBreakdownReports.DetailedBreakdownReportRequest>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Detailed Breakdown Report
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script language="javascript" type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.4.1.min.js")%>"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

 <% using (Ajax.BeginForm("DetailedList", "Reports",
        new AjaxOptions
        {
          UpdateTargetId = "panelBreakdownList",
          InsertionMode = InsertionMode.Replace
        },
        new { id = "SearchForm" })) %>
<% { %>

                <div style="position: absolute; top: 0px; height: 30px; right: -12px; margin-top: 8px;
    width: 250px; padding-left: 00px; vertical-align: middle; display: inline-block;">
        <input id="searchField" name="searchField" style="padding-left: 5px; position: relative;
        float: left; top: 3px; margin: 0px; border: 1px solid #DDDDDD; height: 19px;
        width: 200px;" />
        <%: Html.HiddenFor(m => m.ToDate) %>
        <%: Html.HiddenFor(m => m.FromDate) %>
        <%: Html.HiddenFor(m => m.Currency) %>
        <%: Html.HiddenFor(m => m.ReportType) %>
        <!--<input type="image" src="/Content/Images/search-form-submit.png" style="border: 0px;
        height: 27px; position: relative; left: -8px; margin: 0x; float: left;" />-->
        <input type="submit" value="Search" style="border: 0px;
        height: 27px; position: relative; left: -8px; margin: 0x; float: left;" />
    </div>
<% } %>

 <div id="panelBreakdownList" style="position: relative; z-index: 0;">
        <% Html.RenderAction("DetailedList", new { ToDate = Model.ToDate, FromDate = Model.FromDate, Currency = Model.Currency, ReportType = Model.ReportType }); %>
</div>


</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="Header" runat="server">
<h1>Detailed Breakdown Report</h1>
<h2><%: Model.ToDate.ToString("dd-MMM-yyyy") %> to <%: Model.FromDate.ToString("dd-MMM-yyyy")%></h2>
</asp:Content>

Here is the DetailedList action that is called from the above page, and it's view:

下面是从上面页面调用的DetailedList操作，它是视图:

[HttpPost]
public ActionResult DetailedList(DateTime ToDate, DateTime FromDate, string Currency, string ReportType, FormCollection formVariables)
{
    DetailedBreakdownReportRequest reportRequest = new DetailedBreakdownReportRequest()
    {
        ToDate = ToDate,
        FromDate = FromDate,
        Currency = Currency,
        ReportType = ReportType,
        UserId = UserServices.CurrentUserId
    };

    DrilldownReportEngine re = new DrilldownReportEngine();
    DetailedBreakdownReport report = null;

    if (formVariables.HasKeys())
    {
        reportRequest.searchTerm = formVariables["searchField"];
        report = re.GetDetailedBreakdown(reportRequest);
    }
    else
    {
        report = re.GetDetailedBreakdown(reportRequest);
    }

    return PartialView(report);
}

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyApp.Data.AdvancedReports.AdvancedReports.DetailedBreakdownReports.DetailedBreakdownReport>" %>

    <% if (Model.HasData)
       { %>

       <% if (Model.ShopBreakdown != null)
          { %>

          <h2>Shop Breakdown Report</h2>  
          <p>Click on a shop's name to see additional information.</p>
          <div id="shopGrid" style="float:left; width: 400px;">
              <table width="400px">
              <% foreach (var shop in Model.ShopBreakdown)
                 { %>
                <tr>
                    <td colspan="3"><h2><%: Html.ActionLink(shop.Shop.Name + " >>", "ShopDashboard", new { ShopId = shop.Shop.ShopID, Currency = Model.Currency, toDate = Model.ToDate.ToString(), fromDate = Model.FromDate.ToString(), percentageOfSales = shop.RevenuePercentageOfSales })%></h2></td>
                </tr>
                <tr>
                    <td><p class="labels">Units Sold:</p></td>
                    <td><b style="font-size:larger;"><%: shop.UnitsSoldPerShop%></b></td>
                    <td rowspan="2" align="center"><h2><%: String.Format("{0:0.0%}", shop.RevenuePercentageOfSales)%></h2> of Total Revenue</td>
                </tr>
                <tr>
                    <td><p class="labels">Revenue Earned:</p></td>
                    <td><b style="font-size:larger;"><%: String.Format("{0:0.00}", shop.TotalRevenuePerShop)%></b></td>
                </tr>
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <% } %>
              </table>
          </div>
       <% } %>



       <% if (Model.ProductBreakdown != null)
          { %>
              <% foreach (var product in Model.ProductBreakdown)
                 { %>
                       <div id="ProductGrid" style="float:left; width: 500px;">
                     <div>
                     <h3><%: Html.ActionLink(product.Product.Name + " >>", "ProductDashboard", new { ProductId = product.Product.ProductID, Currency = Model.Currency, toDate = Model.ToDate.ToString(), fromDate = Model.FromDate.ToString(), percentageOfSales = product.RevenuePercentageOfSales })%></h3>
                     </div>
                     <div style="float:left; width: 200px;">
                            <p class="labels">Units Sold: </p><b style="font-size:larger;"><%: product.TotalUnitsSoldPerProduct %></b>
                            <br />
                            <p class="labels">Revenue Earned: </p><b style="font-size:larger;"><%: String.Format("{0:0.00}", product.OverallTotalRevenuePerProduct)%></b>
                     </div>
                     <div style="float: left; text-align: center;">
                            <h2><%: String.Format("{0:0.0%}", product.RevenuePercentageOfSales)%></h2> of Total Revenue
                     </div>

                </div>

                <% } %>

                <div style="clear:both;" />
                <br />


     <% } %>
    <% } %>

As I said above, on first load, the page displays fine, it displays an unfiltered view of the results. When I type in a value into the text box and click submit, nothing at all happens and I'm finding that hard to debug. At least if it did something I'd have something to work with. Can anyone see if I'm doing something wrong here?

如前所述，在第一次加载时，页面显示良好，显示未过滤的结果视图。当我在文本框中输入一个值并单击submit时，什么都没有发生，我发现这很难调试。至少，如果它做了什么，我会有办法的。有人能看出我做错了什么吗?

1 个解决方案

#1

As I see, you expect some not nullable variables in action detailedList which are expected from form.

正如我所看到的，您希望在action detailedList中有一些不可空的变量，这些变量来自表单。

[HttpPost]
public ActionResult DetailedList(DateTime ToDate, DateTime FromDate, string Currency, string ReportType, FormCollection formVariables)
{
    ......
}

But you just send searchfield in form collection. Where is the ToDate, FromDate, Currency variables in form?

但是你只需要发送表单集合中的searchfield。货币变量的形式是什么?

I think you should create a formmodel forexample

我认为您应该为示例创建一个formmodel

DetailedListSearchModel
    DateTime ToDate
    DateTime FromDate
    string Currency
    string ReportType
    string Searchfield

and make search a partialview. Just pass default values when partial view is rendered with default values then execute in form.

让搜索成为一个局部视图。当用默认值呈现部分视图时，只需传递默认值，然后以形式执行。

Then you will take this values in action like [HttpPost]

然后，您将采取如下操作的值[HttpPost]

public ActionResult DetailedList(DetailedListSearchModel model)
{
    ......
}

You can use this model in form like

你可以使用这个模型。

<%= Html.LabelFor(m => m.Searchfield) %>
<%= Html.TextBoxFor(m => m.Searchfield, new { @class = "css classes", maxlength = "1000" })%>
<%= Html.ValidationMessageFor(m => m.Searchfield) %>




$(function() {
      $('form#SearchForm').find('a.submit-link').click( function() {
           $('form#SearchForm').trigger('submit');
      }).show();
  }

and change search button to a.

将搜索按钮改为a。

<a href="#" class="submit-link">Search</a>

#1