0

我正在尝试通过 ajax 将表单发布到我的控制器，以便我可以呈现部分视图。

这是我的 Ajax 代码

 var formCollection = $('#some-form');
 $(function(){ $('#some-form').submit(function(){
      $.ajax({
           type: "POST",
           url: "/Trusk/Index",
           data: formCollection,
           dataType: "html",
           success: function (result) {
               $('#newView').html(result);
           },
           error: function (request, status, error) {
               alert('Oh no!');
           }
     });
});
});

我的表单代码，我希望部分视图在 ID = newView 处呈现，部分视图由控制器返回

  <% using (Html.BeginForm(new { @id = "some-form" }))
           { %>
            <div id="TestDiv">
            <div id="Title">Test</div>                 
                <div id="CheckIn">Check-in:<br />
                <%:Html.TextBox("FromDate", "", new { @id = "DateFrom", @style =  "width:190px" })%></div>
                <div id="CheckOut">Check-out:<br />
                <%:Html.TextBox("ToDate", "", new { @id = "DateTo", @style =  "width:190px" })%><br /></div>
                <div id="newView">  
                </div>
                <input type="submit" value="Search" />        
        </div>
               </div>
        <% } %>

我的控制器代码

 public ActionResult Index(FormCollection post)
    {
        ITruckRepository hotelRep = new TruckRepository();

        IEnumerable<Truck> AvailableTrucks = hotelRep.getTrucks('2012,3,2', '2012,3,5');

       return PartialView("Search", AvailableTrucks );

    }

我是否通过 Ajax 将正确的参数传递给控制器​​？

谢谢

4

2 回答 2

2

您的代码有几个问题：

  • 您使用了 Html.BeginForm 方法的错误重载。在您使用的重载中，id是路由值，而不是 HTML 属性
  • 在您的 .submit 回调中，您不会通过返回 false 来取消默认操作，因此当提交表单时，在浏览器重定向离开页面之前，AJAX 调用几乎没有时间执行
  • 在 AJAX 调用的 data 参数中，您传递了一个 jQuery 对象，该对象表示formCollection您应该序列化数据时调用的表单。
  • 你已经破坏了标记 => 有一个没有相应的开始元素的结束 div。

因此，让我们首先修复标记：

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "some-form" })) { %>
    <div id="TestDiv">
        <div id="Title">Test</div>                 
        <div id="CheckIn">
            Check-in:<br />
            <%= Html.TextBox("FromDate", "", new { id = "DateFrom", style = "width:190px" }) %>
        </div>
        <div id="CheckOut">
            Check-out:<br />
            <%= Html.TextBox("ToDate", "", new { id = "DateTo", style = "width:190px" }) %>
            <br />
        </div>
        <div id="newView"></div>
        <input type="submit" value="Search" />        
    </div>
<% } %>

然后是 AJAXify 表单的脚本：

$(function () {
    $('#some-form').submit(function () {
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function (result) {
                $('#newView').html(result);
            },
            error: function (request, status, error) {
                alert('Oh no!');
            }
        });
        return false;
    });
});

现在您应该确保成功调用了相应的 POST 控制器操作并且正确传递了参数。还要确保在此控制器操作内和渲染局部视图时不会发生错误。使用诸如 FireBug 之类的 javascript 调试工具来准确查看正在发送的请求/响应以及任何可能的 js 错误。

于 2012-05-01T10:50:12.923 回答
0

您需要调用.Serialize()-formCollection它将表单编码为字符串以供提交。

var formCollection = $('#some-form'); 
$(function(){ $('#some-form').submit(function(){ 
  $.ajax({ 
       type: "POST", 
       url: "/Trusk/Index", 
       data: formCollection.serialize(), 
       dataType: "html", 
       success: function (result) { 
           $('#newView').html(result); 
       }, 
       error: function (request, status, error) { 
           alert('Oh no!'); 
       } 
 }); 
});
});

此外，虽然您FormCollection的控制器方法上有一个参数 - 您实际上并没有使用它？

于 2012-05-01T08:18:56.380 回答