6

我是 ajax / jquery 的新手，很难找到包含以下内容的简单示例：

  • ASP.Net MVC RC1（或 2）
  • jQuery
  • 情态形式

我希望用户能够单击视图（父级）中的链接/按钮，并出现一个包含表单的模态表单。模态对话框的内容应该是 MVC 视图（子视图）。

提交表单后，我希望模式对话框消失并更新父视图的一部分。

4

1 回答 1

12

因此，您无需一次考虑所有问题。首先在 html 中将表单放在页面的前面和中心，附加一个动作，让它在没有模态幻想的情况下工作。
一旦你的表单逻辑工作，你就可以在 jQuery 中循环。无论您是想从模态和弹出窗口开始，还是从 jQuery 异步发布开始，都取决于您。我通常喜欢在让它变得漂亮之前让它工作，所以我们会走那条路。如果您使用标准 <% Html.BeginForm... { %> 语法来定义您的表单，请将其删除。去老学校的html！（我知道您可以进一步自定义 Html.Beginform 但只使用 html 更容易）

<form action="<%= Url.ActionLink(...)%>" id="SomeForm">

现在您可以在您的 document.ready 或任何您初始化 JS 的地方连接 jQuery。

$('#SomeForm').bind('submit', youractionfunction);

在您的操作表单中，您可能会调用 jQuery 的帖子，其中帖子的回调隐藏您的表单并更新页面的其余部分。API 文档

function youractionfunction(e){
  $.post($(e).attr('action'), // we get the action attribute (url) from the form
         { title : $('#titleBox').val()}, // the values we're passing
         yourCallbackFunction); 
  return false;  // This is important, this will stop the event from bubbling and your form from submitting twice.
}

现在您有了一个 ajaxy 表单，因此您可以处理回调。

function yourCallbackFunction(data)
{
    // do something with the result.
}

现在我们可以谈谈模态了。这通常有点痛苦，但您可以使用像这样的 jQuery 插件或类似的东西来为您做这件事。然后只需连接事件以显示和隐藏弹出窗口，就可以了。

如果您的意图是在单击“显示”链接时异步加载该表单，那会有点麻烦，但仍然可行。您可以使用 jQuery.Load ( Api Documentation ) 来拉取 html 并将其注入到 dom 中，但您仍然必须连接事件（同样，使用上述的 bind('submit'...) ）。

于 2009-03-07T18:55:34.990 回答