MVC 3 使用日期选择器更新页面

Question

我遇到了一个问题，经过 2 小时的尝试和解决错误& google 我是来问问的。

我对 Web 开发和 Ajax 都很陌生。

我有一个简单的页面，其中包含 jquery ui 的日期选择器和带有渲染操作的 div：

@using (Html.BeginForm())
{
    <div id="datepicker"></div>    
}

<h2>Lista de trabajos</h2>

<div id="trabajos">
    @Html.Action("List", "Trabajo", new { dia = Model.Fecha })
</div>

到目前为止一切顺利。我想单击数据选择器上的日期（通过脚本配置）并使用 @model 上的另一个日期再次调用此操作。

问题是，如果我使用这个：

            onSelect: function (dateText, inst) {
                $("form").submit();
            }

当我点击日期时它会完美发布，但如果我使用：

            onSelect: function (dateText, inst) {
                $("form").submit(function (e) { });
            }

它不再发布。

作为新手，我正在努力一步一步地完成它。我试图只是发布（现在没有ajax）并将新日期发送到我的控制器，所以：

我如何将数据（我认为dateText是我想要发送的）发送到我的操作（谁期待一个字符串）。当我完成该任务后，我将使用 Ajax，但如果我无法将日期发送到操作并进行刷新以获取新模型......

有什么帮助吗？

谢谢。

Answer 1

以下代码：

$("form").submit();

立即触发提交事件并POST到服务器。

以下代码：

$("form").submit(function (e) { 

});

只是重新定义 submit 处理程序，但不会立即提交。您需要单击提交按钮，然后将调用匿名函数（该函数为空，最终会执行正常提交，但您需要单击提交按钮）。因此，如果您想使用 AJAX：

onSelect: function (dateText, inst) {
    var form = $(form);
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
            // the form was successfully sent to the server using an AJAX call
            // do something with the result
        }
    });
    return false;
}

Answer 2

第二种表单是为提交事件添加处理程序，而不是提交表单。如果你想使用ajax发布表单，你应该使用 post 方法。

onSelect: function (dateText, inst) {
            var $form = $('form');
            $.post( $form.attr('action'), $form.serialize(), function(result) {
               // do something with the result of the post request
            });
          }