MVC3: Aufruf Steuerung Von AJAX-Button Klicken

Dies ist, wie Sie das tun könnte, Ajax post mit MVC3. In Ihrem Fall, aktualisieren Sie das Formular auf der OnSuccess callback-Funktion auf der Basis der Antwort vom server.

Schritt 1

Stellen Sie sicher, Sie haben auf die jQuery-Ajax-Bibliothek

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Schritt 2

In der Ansicht verwenden Sie die Ajax.BeginForm helper-Methode zum generieren von Ajax bewusst form. Auch eine OnSuccess javascript-callback-Funktion

@using(Ajax.BeginForm("Search",new AjaxOptions
{
  HttpMethod = "Post",    
  OnSuccess = "Loaded"    
}))
{
   <input type="text" name="q" />
   <button type="submit" value="Search">Search</button>
}

<script type="text/javascript">
   function Loaded(result) {
      alert('result ' + result.Name);
   }
</script>

Schritt 3

In der action-Methode, tun Sie Ihre business-Verarbeitung und liefert ein JSON-Ergebnis. In diesem Beispiel habe ich einfach zurück, ein Modell, das fügen Sie die Abfrage, um die Namen.

[HttpPost]
public ActionResult Search(string q)
{
    return Json(new SampleViewModel { Age = 10 , Name = "John " + q });
}

InformationsquelleAutor Rajeesh

Wenn Sie möchten, dass eine tatsächliche Ajax button element, sondern als ein styling-hack oder JQuery, es ist auch möglich, aber ein wenig beteiligt. Es ist eine Schande, dass MS noch nicht gewählt, fügen Sie ein ActionButton, um sowohl die Html-und Ajax-Helfer, wie die Unterschiede sind tatsächlich sehr gering, wenn Sie entfernen die Vervielfältigung von privaten support-Methoden (man bräuchte nur den ActionButton und GenerateButton Methoden unten).

Das Endergebnis ist, können Sie echte Tasten, trigger wie ajax Aktion links:

z.B.

@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. Erstellen Sie eine AjaxHelper Erweiterung

Den code unten, ist basiert auf ein dekompilieren der AjaxExtensions Klasse, wie viele von den benötigten Hilfsmethoden sind nicht ausgesetzt auf 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. Ändern jquery.unobtrusive-ajax.js

Nur eine kleine änderung erforderlich ist, um die JQuery von jquery.unobtrusive-ajax.js akzeptieren die neue button-Objekt, da es in unmittelbarer Nähe, um mit zu beginnen. Zuerst der Selektor muss akzeptieren, dass ajax-buttons sowie links und dann der href muss über ein Attribut, also als eine nicht-Verbindung kann es (nicht unbedingt browser-kompatibel, arbeitet aber für jetzt).

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

*Hinweis: dies ist die neueste version von alles, was als zum Zeitpunkt der Beantwortung (MVC 5)

InformationsquelleAutor Gone Coding