对于表单中的非提交按钮，请使用ActionLink而不是纯JS

Question

我正在寻找一种只使用HtmlHelper或AjaxHelper的方法在表单中显示3个按钮的方法，也就是说，如果可能的话，在视图中没有额外的JavaScript。

这里的场景如下：我得到了一个带有提交、预览和取消按钮的表单(想想"创建新博客")。到目前为止的观点是

@using (Html.BeginForm())
{
<fieldset>
...        
<div id="preview-content"></div>
...
<input type="submit" value="Submit" />
<input type="button" value="Preview" id="preview-button"/>
@Html.ActionLink("Cancel", "Index", new { Area = "Blog" }, new { @class = "button" })
...
</fieldset>
}
<script type="text/javascript">
$('#preview-button').click(function () {
$.ajax({
url: '@Url.Action("Preview", new { Area = "Blog" })',
type: 'POST',
data: { title: $('#Title').val(), content: $('#Content').val() },
success: function (data) {
$('#preview-content').html(data);
}
});
});
</script>

到目前为止，我还没能使用其中一个助手函数来摆脱JS。SO上有几个类似的问题，但我不想在点击预览时发布表格。这里的想法是发布内容并获得部分视图，然后将其添加到表单中

当然，我可以像SO一样处理这个问题(不断显示和更新预览)，但我想知道是否有解决我的问题的方法。

Answer 1

I(像大多数网站一样)实际上倾向于将jQuery用于此类操作，因为这些预构建方法的默认和基本用法在很多方面都失败了。

如果用户离开一个小时，然后自动注销，然后点击提交，会发生什么。无提示失败，如果出现问题，则不会向用户发送消息。

如果服务器端验证失败，会发生什么？你会给用户什么消息？

如果用户正在使用WiFi并与网络断开连接，又发生了一次无声故障，没有向用户发送任何消息，会发生什么？

当你直接开始时，即使你使用AjaxHelper完全构建了一个漂亮的接口，你也只写了同样数量的代码。唯一真正的区别是可重用性和封装性。使用AjaxHelper，您可以创建许多链接到javascript方法的按钮，如果这些方法发生更改，则必须更改所有AjaxHelpers。相反，使用适当的html类意味着这些更改被封装在javascript中。YMMV。

例如，我会这样写你的代码：

@using (Html.BeginForm())
{
<fieldset>
...        
<div id="preview-content"></div>
...
<input type="submit" value="Submit" />
<input type="button" 
value="Preview" 
class="js-btn-preview"
data-preview-url="@Url.Action("Preview", new { Area = "Blog" })"
data-preview-target="#preview-content"/>
@Html.ActionLink("Cancel", "Index", new { Area = "Blog" }, new { @class = "button" })
...
</fieldset>
}
<script type="text/javascript">
$('.js-btn-preview').click(function () {
var url = $(this).data("preview-url");
var target = $(this).data("preview-target");
var form = $(this).closest('form').serialize();
$.ajax({
url: url,
type: 'POST',
data: form,
success: function (data) {
$(target).html(data);
}
});
});
</script>

现在您有了一个脚本，可以将数据从任何表单发布到任何url，并最终获取结果并将其嵌入到目标中。一个与html和css解耦的高度可重用的方法。