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

我（像大多数网站一样）实际上首先使用jQuery来执行这类操作，因为这些预构建方法的默认和基本用法在很多方面都失败了。

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

如果服务器端验证失败，您向用户发送了什么消息，会发生什么？

如果用户使用WiFi并从网络断开连接会发生什么情况，另一个无提示失败而没有向用户发送消息有什么问题？

当你接下来的时候，即使你使用AjaxHelper完全构建了一个漂亮的接口，你也只需编写相同数量的代码。唯一真正的区别在于可重用性和封装性。使用AjaxHelper，您可以创建许多链接到javascript方法的按钮，如果这些方法发生更改，则必须更改所有AjaxHelper。而是使用适当的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，最后获取结果并将其嵌入到目标中。一个高度可重用的方法decoupled from your html and css。

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

1 个答案: