Question

我试图通过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将正确的参数传递给控制器？

由于

Answer 1

您的代码存在一些问题：

您正在使用Html.BeginForm方法的错误重载。在您使用的重载中，id是路由值，而不是HTML属性
在您的.submit回调中，您没有通过返回false来取消默认操作，因此在提交表单时，在浏览器重定向远离页面之前，AJAX调用几乎没有时间执行
在AJAX调用的data参数中，当您应该序列化数据时，您将传递一个表示名为formCollection的表单的jQuery对象。
你破了markup =＆gt;有一个结束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>
<% } %>

然后是AJAX化表单的脚本：

$(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错误。

Answer 2

您需要在formCollection上调用.Serialize() - 这会将表单编码为提交字符串。

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参数 - 你实际上并没有使用它？

Asp.net mvc 2表单没有通过Ajax发布到控制器

2 个答案: