Конвертировать ajax actionlink в качестве кнопки начальной загрузки

Я обычно использую bootstrap для стилизации своих кнопок следующим образом:

так как я могу преобразовать ссылку действия ajax в кнопку начальной загрузки?

Я не хочу помещать имя класса в div, содержащее ссылку на действие ajax, потому что кнопка отображается с черным цветным шрифтом и подчеркиванием...

Я хочу, чтобы он отображался как фактическая кнопка без подчеркивания и с белым шрифтом

Ответы

Ответ 1

Вы можете использовать параметр htmlAttributes, чтобы добавить любой класс Bootstrap, который вы хотите:

@Ajax.ActionLink("EMPLOYEE", "_PartialEmployeeIndex", "Employee", new AjaxOptions() { UpdateTargetId = "divToUpdate" }, new { @class = "btn" })

Ответ 2

Если вам нужен только значок, вы можете сделать это как:

    @Ajax.ActionLink(" ", "Delete", new { id = 1 }, new AjaxOptions
                                        {
                                            Confirm = "Are you sure you wish to delete?",
                                            HttpMethod = "Delete",
                                            InsertionMode = InsertionMode.Replace,
                                            LoadingElementId = "div_loading"
                                        }, new { @class = "glyphicon glyphicon-trash" })

Имя ationlink не может быть пустым или пустым, поэтому я рекомендовал пробел.

Ответ 3

Если вам нужен фактический элемент Ajax button, а не стилирующий хак, это также возможно, но немного задействовано. Жаль, что MS еще не решила добавить ActionButton как к помощникам Html, так и к Ajax, поскольку различия на самом деле очень незначительны, когда вы удаляете дублирование частных методов поддержки (вам понадобится только ActionButton и GenerateButton методы, показанные ниже).

Конечный результат: вы можете иметь реальные кнопки, которые запускаются как ссылки на действие ajax:

например.

@Ajax.ActionButton("Delete", "Delete", "document", 
     new { id = ViewBag.Id }, 
     new AjaxOptions() 
     { 
         Confirm="Do you really want to delete this file?", 
         HttpMethod = "Get", 
         UpdateTargetId = "documentlist" }, 
         new { id = "RefreshDocuments" 
     })

1. Создайте расширение AjaxHelper

Нижеприведенный код основан на декомпиляторе класса AjaxExtensions, поскольку многие из требуемых вспомогательных методов не отображаются на HtmlHelper.

public static partial class AjaxExtensions
{
    public static MvcHtmlString ActionButton(this AjaxHelper ajaxHelper, string buttonText, string actionName, string controllerName, object routeValuesBlah, AjaxOptions ajaxOptions, object htmlAttributesBlah)
    {
        // Convert generic objects to specific collections
        RouteValueDictionary routeValues = new RouteValueDictionary(routeValuesBlah);
        RouteValueDictionary htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributesBlah);

        if (string.IsNullOrEmpty(buttonText))
            throw new ArgumentException("Button text must be provided");
        string targetUrl = UrlHelper.GenerateUrl((string)null, actionName, controllerName, routeValues, ajaxHelper.RouteCollection, ajaxHelper.ViewContext.RequestContext, true);
        return MvcHtmlString.Create(GenerateButton(ajaxHelper, buttonText, targetUrl, AjaxExtensions.GetAjaxOptions(ajaxOptions), htmlAttributes));
    }

    public static string GenerateButton(AjaxHelper ajaxHelper, string linkText, string targetUrl, AjaxOptions ajaxOptions, IDictionary<string, object> htmlAttributes)
    {
        TagBuilder tagBuilder = new TagBuilder("input");
        tagBuilder.MergeAttribute("value", linkText);
        tagBuilder.MergeAttributes<string, object>(htmlAttributes);
        tagBuilder.MergeAttribute("href", targetUrl);
        tagBuilder.MergeAttribute("type", "button");
        if (ajaxHelper.ViewContext.UnobtrusiveJavaScriptEnabled)
            tagBuilder.MergeAttributes<string, object>(ajaxOptions.ToUnobtrusiveHtmlAttributes());
        else
            tagBuilder.MergeAttribute("onclick", AjaxExtensions.GenerateAjaxScript(ajaxOptions, "Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), {0});"));
        return tagBuilder.ToString(TagRenderMode.Normal);
    }

    private static string GenerateAjaxScript(AjaxOptions ajaxOptions, string scriptFormat)
    {
        string str = ajaxOptions.ToJavascriptString();
        return string.Format((IFormatProvider)CultureInfo.InvariantCulture, scriptFormat, new object[1] { str });
    }

    private static AjaxOptions GetAjaxOptions(AjaxOptions ajaxOptions)
    {
        if (ajaxOptions == null)
            return new AjaxOptions();
        else
            return ajaxOptions;
    }

    public static string ToJavascriptString(this AjaxOptions ajaxOptions)
    {
        StringBuilder stringBuilder = new StringBuilder("{");
        stringBuilder.Append(string.Format((IFormatProvider)CultureInfo.InvariantCulture, " insertionMode: {0},", new object[1]
        {
             ajaxOptions.InsertionModeString()
        }));
        stringBuilder.Append(ajaxOptions.PropertyStringIfSpecified("confirm", ajaxOptions.Confirm));
        stringBuilder.Append(ajaxOptions.PropertyStringIfSpecified("httpMethod", ajaxOptions.HttpMethod));
        stringBuilder.Append(ajaxOptions.PropertyStringIfSpecified("loadingElementId", ajaxOptions.LoadingElementId));
        stringBuilder.Append(ajaxOptions.PropertyStringIfSpecified("updateTargetId", ajaxOptions.UpdateTargetId));
        stringBuilder.Append(ajaxOptions.PropertyStringIfSpecified("url", ajaxOptions.Url));
        stringBuilder.Append(ajaxOptions.EventStringIfSpecified("onBegin", ajaxOptions.OnBegin));
        stringBuilder.Append(ajaxOptions.EventStringIfSpecified("onComplete", ajaxOptions.OnComplete));
        stringBuilder.Append(ajaxOptions.EventStringIfSpecified("onFailure", ajaxOptions.OnFailure));
        stringBuilder.Append(ajaxOptions.EventStringIfSpecified("onSuccess", ajaxOptions.OnSuccess));
        --stringBuilder.Length;
        stringBuilder.Append(" }");
        return ((object)stringBuilder).ToString();
    }

    public static string InsertionModeString(this AjaxOptions ajaxOptions)
    {
        switch (ajaxOptions.InsertionMode)
        {
            case InsertionMode.Replace:
                return "Sys.Mvc.InsertionMode.replace";
            case InsertionMode.InsertBefore:
                return "Sys.Mvc.InsertionMode.insertBefore";
            case InsertionMode.InsertAfter:
                return "Sys.Mvc.InsertionMode.insertAfter";
            default:
                return ((int)ajaxOptions.InsertionMode).ToString((IFormatProvider)CultureInfo.InvariantCulture);
        }
    }

    public static string EventStringIfSpecified(this AjaxOptions ajaxOptions, string propertyName, string handler)
    {
        if (string.IsNullOrEmpty(handler))
            return string.Empty;
        return string.Format((IFormatProvider)CultureInfo.InvariantCulture, " {0}: Function.createDelegate(this, {1}),",
            new object[2]
              {
                propertyName,
                handler
              });
    }

    public static string PropertyStringIfSpecified(this AjaxOptions ajaxOptions, string propertyName, string propertyValue)
    {
        if (string.IsNullOrEmpty(propertyValue))
            return string.Empty;
        string str = propertyValue.Replace("'", "\\'");
        return string.Format((IFormatProvider)CultureInfo.InvariantCulture, " {0}: '{1}',",
            new object[2]
              {
                propertyName,
                str
              });
    }
}

2. Измените jquery.unobtrusive-ajax.js

Для JQuery jquery.unobtrusive-ajax.js требуется небольшое изменение, чтобы принять новый объект кнопки, поскольку он очень близок к началу. Сначала селектор должен принимать кнопки, а также ссылки, а затем href должен поступать из атрибута, чтобы обеспечить его отсутствие (не строго совместимый с браузером, но работает пока).

$(document).on("click", "input[data-ajax=true],a[data-ajax=true]", function (evt) {
        evt.preventDefault();
        asyncRequest(this, {
            url: $(this).attr("href"),
            type: "GET",
            data: []
        });
    });

* Примечание: это используется последняя версия всего, как на дату ответа (MVC 5)

Ответ 4

если вы не хотите беспокоиться о назначении соответствующих классов каждому элементу Bootstrap, проверьте TwitterBootstrapMVC

В примере с вашей ссылкой ajax вы должны написать что-то вроде этого:

@Ajax.ActionLink("EMPLOYEE", "_PartialEmployeeIndex", "Employee", ).AjaxOptions(new AjaxOptions() { UpdateTargetId = "divToUpdate" })

Ответ 5

Добавляя к Терри ответ, если вы хотите добавить html к кнопке, лучший способ - использовать Javascript для добавления html-кода. Параметр linkText Ajax.Actionlink автоматически кодирует любой текст, который вы предоставляете, и вы ничего не можете сделать, чтобы этого избежать (кроме написания собственного помощника).

Что-то вроде JQuery append или prepend будет работать.

<div> 
@Ajax.ActionLink("EMPLOYEE", "_PartialEmployeeIndex", "Employee", new AjaxOptions() { UpdateTargetId = "divToUpdate" }, new { @class = "btn btn-default my-custom-class" }) 
</div>

<script>
    $(".my-custom-class").prepend("<span class=\"glyphicon glyphicon-pencil\"></span>&nbsp; ");
</script>

Ответ 6

Альтернативой является использование Ajax.BeginForm, который позволяет вводить HTML напрямую. Это предполагает, что вы еще не в форме.

@using (Ajax.BeginForm("EMPLOYEE", "_PartialEmployeeIndex", "Employee", new AjaxOptions() { UpdateTargetId = "divToUpdate" }))
{
    <button type="submit" id="EmployeeButton" title="Employee" aria-label="Employee Button">
        <span class="glyphicon glyphicon-trash"></span>
    </button>
}

Ответ 7

@Ajax.ActionLink(" ", "EditUser/" + Model.Id, null, new AjaxOptions { 
      OnSuccess = "userEditGet", 
      HttpMethod = "post", 
      LoadingElementId = "ajaxLoader" }
 ,new { @class = "btn btn-default glyphicon glyphicon-edit" })