Question

我需要在视图中的成功消息上显示一个输入按钮。我正在使用剃刀视图在MVC 3应用程序中工作。此按钮将允许用户导航到另一个视图。

控制器。

var successfull = new string[]
{
  "All " + builder.Data.Count.ToString() + " work items were added successfully."
};

return new JsonResult
{
   Data = new { success = true, msg = successfull}
};

的JavaScript。

var jsonText = JSON.stringify(json);

$.ajax({
   url: '/Builder/CreateWork',
   type: 'POST',
   dataType: 'json',
   data: jsonText,
   contentType: 'application/json; charset=utf-8',
   success: function (result) {
     // clear table
     $('#instruments-data').empty();
     resultMessage(result);
   },
   complete: function () {
     // hides the loading gif
     $('.loading').hide();
   }
});

视图

<div id="resultMessage"></div>

有没有办法添加到ajax代码以包含以下输入按钮。

<input type="button" class="styledbutton" value="Some text" onclick="window.location.href='Url.Action("action", "controller")';" />

编辑---

问题在于这段代码 - 但是看不出问题。

        onclick="window.location.href = '@Url.Action("actionName", "controllerName")'"/>');

请告知。

Answer 1

是的，您可以在ajax调用中生成html，如下所示：

<div id="div1"><div>

success: function (result) {
                // clear table
                $('#instruments-data').empty();
                resultMessage(result);
                $('#div1').html('<input type="button" class="styledbutton" value="Some text" onclick="window.location.href='@Url.Action("actionName", "controllerName")'/>')
            }

以上代码可以正常工作，只需在上面的ajax调用中生成html。

Answer 2

该按钮是静态的，因此您可以隐藏它

<input style="display:none" type="button" class="styledbutton" value="Some text" onclick="window.location.href='Url.Action("actionName", "controllerName")';" />

然后成功回调显示它

            success: function (result) {
            // clear table
            $('#instruments-data').empty();
            resultMessage(result);
            //show button
            $(".styledbutton").show();
        },

Answer 3

您可以通过简单的方式完成此操作。如您所知，您最初可以使用css隐藏按钮。

<input type="button" class="styledbutton" style="display:none;" value="demo" onclick="window.location.href='Url.Action("actionName", "controllerName")';"/>

如果幕后工作正常（我的意思是模型和控制器），你只需要在js代码中稍微调整一下。

如果您使用done()或更高版本，请使用success代替always()，同样使用complete代替jQuery v 1.8。检查docs中的弃用通知。从success

开始，complete和jQuery 1.8+已不再使用

$.ajax({
   url: '/Builder/CreateWork',
   type: 'POST',
   dataType: 'json',
   data: jsonText,
   contentType: 'application/json; charset=utf-8'
 }).done(function(result){
     // clear table
     $('#instruments-data').empty();
     resultMessage(result);
     //just show the button
     $(".styledbutton").show();
 }).always(function(){
     // hides the loading gif
     $('.loading').hide();
});

注意：将您的按钮准确放在要在视图中查看的位置，并将其设为display:none。 Ajax将处理剩下的事情。如果它不起作用，请告诉我。

Answer 4

以前的答案都没有允许重新指导，所以我找到了解决办法。

  success: function (result) {
                // clear table
                $('#instruments-data').empty();
                resultMessage(result);
                $('#resultMessage').append('<input type="button" id="MultiStatus"class="styledbutton" value="Button text" />');
                $('#MultiStatus').click(function (e) {
                    location.href = "/Controller/Action";
                });

Answer 5

如果您需要建议，我建议您尝试使用自举样式的锚点按钮来反映按钮的感觉。

如果这不会影响你的意图，请你试试这个吗？

示例：

@Html.ActionLink("ButtonText", "ActionName", "ControllerName", null, new { @id = "Query", @class = "btn btn-inverse styledButton" })

我已经为您的特定需求添加了一个关于如何使用按钮的jsbin演示，请点击此链接：Demo

如果您需要任何解释，请随时发表评论

在ajax成功时不显示HTML按钮

控制器。

的JavaScript。

视图

编辑---

5 个答案: