Erstellen Sie einen ActionLink, das funktioniert mit einer javascript-Funktion

Ich habe eine datatable, die auf das datatable ich eine Html.ActionLink. Wenn ich auf diese Aktion verlinken, ich will senden Sie eine id für das Element eine javascript-Funktion und einen neuen datatable erscheinen unter mit all seinem Inhalt, das gehört zu den ausgewählten Eintrag in der Datentabelle oben. So zum Beispiel, wenn ich auf einer Studenten-Namen in einer Tabelle, ich möchte, dass alle Schüler Noten und Test erscheinen unten in einer separaten Datentabelle. Ich habe nie gearbeitet mit javascript viel, also bin ich nicht sicher, wie ich dies tun kann. Wenn jemand kann, bitte zeigen mich in die richtige Richtung oder ein paar Tipps geben, ich würde es zu schätzen wissen.

ursprünglichen ersten datatable: 

@foreach (var item in ((List<Epic>) ViewData["selectedestimate"]))
{
    <tr>
        <td>
            @*   @Html.ActionLink(@item.Name, "action", "controller", new {id = item})*@

            <a href="#" onclick="StoryClick(@item.Id);">@item.Name</a>
        </td>

Javascript zu nennen:

<script type="text/javascript">
function StoryClick(story) {
    $.get("@Url.Action("action", "controller")", function (response) {
        $('#stories').accordion({ collapsible: true });
    });
}
</script>

ActionController:

public List<EpicDetails> getEpicDetails(int id)
{
    return eRepository.getItemsById(id).tolist();
}

Oder brauche ich eine ActionResult?

public Actionresult Details(int id)
{

}

Merke ich, dass ich nicht selbst schließen, sondern nur seine b/c ich bin nicht sicher, welche Schritte zu ergreifen, um dies zu tun.
Schließlich würde ich einen Akkordeon-und einen Tisch in das Akkordeon.

  • Hey, wenn einer von uns geholfen hat, Sie auf Ihrem Weg sollten Sie sich upvotes und markieren Sie eine Antwort.
InformationsquelleAutor TMan | 2012-04-04
  1. 4

    In Situationen wie diese, die ich tatsächlich gerne behalten, die <a> die ActionLink erzeugt, und nur hinzufügen von JavaScript zu verbessern, das Verhalten der Verbindung. Also deine Ansicht wäre nicht wirklich ändern (ich habe eine Klasse hinzufügen, so dass wir die binden können einen event-handler, um es später):

    @Html.ActionLink(@item.Name, "action", "controller", new {id = item, @class = "item-link" })

    Dann schreiben einige jQuery (es sieht aus wie Sie haben bereits eine Abhängigkeit zu jQuery. Wenn nicht, kann ich revidieren, die Antwort zu verwenden, vanilla JavaScript) zum binden eines Ereignishandlers zu links mit der Klasse item-link:

    <script type="text/javascript">
    $(document).ready(function () {
        $("a.item-link").click(function (event) {
            event.preventDefault(); //Stop the browser from redirecting as it normally would
            $.get(this.href, function (response) {
                //Do whatever you want with the data.
            });
        });
    });
</script>

    Und, ja, Ihre Aktion-Methode im controller zurückgeben sollte eine ActionResult. Es ist für mich schwer zu sagen, welche Art von ActionResult sollten Sie Sie wieder, ohne wirklich zu wissen, welche Art von Daten, die Sie konsumieren wollen auf dem client, aber wenn Sie wollte, um zu injizieren, HTML auf die Seite, könnten Sie etwas schreiben wie dieses:

    public ActionResult Details(int id)
{
    var itemDetails = /* Get details about the item */;
    return PartialView("Details", itemDetails);
}

    Dann in der JavaScript, die Sie schreiben würde:

    $("a.item-link").click(function (event) {
    event.preventDefault(); //Stop the browser from redirecting as it normally would
    $.get(this.href, function (response) {
        $("element_to_populate").html(response);
    });
});

    Wo element_to_populate wäre eine Auswahl, die Punkte, wo Sie wollen, um zu injizieren, die HTML.

    • Danke für die Antwort. Wenn u set @class = "item-link", ist, dass der Verweis auf das javascript-u haben die oben? Und wenn ich dann meine neue dattatable mit den Ergebnissen, wie würde ich anrufen/Holen Sie sich die Ergebnisse in der Tabelle? Ich arbeite meistens mit strings und zahlen. Einige wie ich haben würde, wenn eine Liste zurückgegeben, der das Objekt so, dass die datatable kann nur Sie alle mit all Ihren Eigenschaften. Thx
    • @class = 'item-link' ist nur die Angabe einer class Attribut an die generierten a tag. Es wird JS bindet Ereignisse auf links mit, dass die Klasse, obwohl (in der script block). Als für das Auffüllen der Tabelle, die Sie dienen könnte, bis ein Gesamtbild vom server, und injiziert in die Seite, oder Sie können senden Sie eine JSON-kodierte Liste der Elemente und JavaScript schreiben, zum füllen der Tabelle.
    • Vergessen Sie nicht, wickeln Sie den javascript-Code in $(function() { .... }); nun, dass man mithilfe von jQuery, damit es ausgeführt wird, wenn das Dokument fertig ist
    • Wickeln Sie die javascript-oben mit $(function() {}); ?
    • danke--Hinzugefügt $(document).ready handler
    • Sorry für alle die, die Hilfe brauchen. Eine Menge davon ist über meinem Kopf, aber ich versuche, es zu lernen. Also von hier aus, was u haben, oben, würde ich als Nächstes konfigurieren müssen mein ActionResult in meinem controller, und irgendwie dienen, bis eine neue Ansicht und es injizieren?
    • Ja, dass ist eine ziemlich gute option, werde ich update meine Antwort enthalten ein Beispiel.
    • Ok cool naja ich werde geben diesem einen Versuch. Gibt es eine Möglichkeit, tun Sie etwas dagegen, wenn ich E-Mail dir, wenn ich noch weitere Fragen später? Dankbar für die Hilfe, bro.
    • Fühlen Sie sich frei, zu öffnen, ein chat mit mir oder andere Frage stellen
    • Danke Mann es zu schätzen wissen.
    • Hey oben u return PartialView("Details", itemDetails) ..würde nicht itemDetails ein Int id, da das ist, was Einzelheiten nimmt?
    • nvm über diese Frage
    • lassen Sie uns weiter, diese Diskussion im chat

    InformationsquelleAutor Andrew Whitaker
  2. 1

    Ich würde empfehlen, mit javascript templating (ich bevorzuge handlebars.js) auf der client-Seite und die Rückkehr Ihrer Studenten-Daten als JsonResult. Damit wird Ihre Bandbreite auf ein minimum.

    Aber da scheinen Sie sich wohler mit der Rasierklinge, die Sie verwenden konnten, die für alle Ihre Vorlagen, Rückkehr einfache html-von Ihrem controller/Ansicht, und verwenden Sie dann diese javascript statt

    <script type="text/javascript">
$(function() {
    $("a.item-link").click(function (event) {
        event.preventDefault(); //Stop the browser from redirecting as it normally would
        $("#gradesContainer").load(this.href, function (response) {
            //Do whatever you want, but load will already have filled up 
            //#gradesContainer with the html returned from your grades view
        });
    });
});
</script>

    In Ihrem Haupt-Seite, unter dem Schüler-Liste, Sie hätte nur hinzufügen müssen

    <div id="gradesContainer"></div>

    Ihre anderen controller würde dann so Aussehen

    public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return View(model);
}

    Wenn Sie zurückkehren würden JSON zum client-side javascript templating würde es Aussehen wie

    public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return new JsonResult() {Data = model}; //no view here!
}
    • Danke für die Antwort, was meinst du, wenn u sagen Rückkehr plain-html aus meiner Sicht aber?
    • Ich soll gesagt haben, die controller. Ich editiert und Hinzugefügt 2 Beispiel-Controller.
    • nun, ich würde nicht brauchen, um creat eine Ansicht für die TestGrades Controller tho huh? Das javascript geladen, es in die #gradesContainer?
    • Es gibt zwei Optionen: 1) Erstellen Sie eine Ansicht, und stellen Sie den html-Code in razor, html zurückgeben (der Ansicht) im controller. 2) JSON-Rückgabe aus dem controller und mit Hilfe von client-side javascript-Template zum Rendern der testGrades Daten. Entweder Weg, das javascript geladen wird, aber die erste option wird sein, weniger Arbeit für Sie, da Sie nicht vertraut mit javascript. Ich wollte nur Stecker für javascript-templates, weil ich Sie Liebe 🙂
    • Es gibt eine Menge code fehlt, zu tun, javascript templating. Wenn Sie gehen wollte, die route, die Sie haben würden, zu Lesen, ein bisschen spielen, und dann auch noch Fragen stellen wie nötig.
    • Ja, ich werde prolly stick razor lol...zumindest für den Moment
    • Wenn ich ein view html in gestochen ist, wäre es eine teilweise Ansicht, so dass Sie alle können auf der gleichen Seite?
    • Es muss nur eine teilweise, wenn Sie wollen zu machen, es als Teil einer anderen Ansicht der server-Seite. Da bist du so eine völlig separate Anforderung an den controller mit javascript könnte man es für einen vollständigen überblick: Der controller wird nicht wissen, den Unterschied zwischen der javascript-Anfrage und jemand tatsächlich die Seiten zu, die eine bestimmte URL in einem web-browser.
    • Aber wirklich, es ist Ihr Anruf. Es spielt keine Rolle, MVC nicht egal.
    • Nach mehr gedacht, ich würde wahrscheinlich empfehlen der Rückkehr eine Teilansicht, denn das wird Ihnen mehr Flexibilität in der Zukunft. Sie können zum Beispiel server-seitiges Rendern der ersten Klasse Artikel automatisch mit @Html.RenderPartial(model.TestGrades.First())
    • Ja ich habe eine Menge ärger mit diesem. Sein gehen Sie rechts über meinem Kopf. Es ist frustrierend, lol. Das Javascript oben wäre für die partielle view oder den view, wo ich die Injektion der partial view?
    • Das javascript geladen/injiziert teilweise anzeigen, wenn ein Benutzer klickt auf einen link in Ihrem datatable. Um für den click-Ereignishandler binden Sie die Anker-tags müssen vorhanden sein. Also die sollten Sie javascript wechseln Sie in die Hauptansicht der die Noten würden injiziert.
    • UM sicherzustellen, dass Sie nicht mit javascript-Fehler, stellen Sie sicher, dass Sie mit einem browser die web-developer-toolkit. Siehe browserstack.com/debugging-tools. Sie können die Taste f12 in den meisten Browsern zu Ihnen zu bekommen.
    • lassen Sie uns weiter, diese Diskussion im chat

    InformationsquelleAutor scaryman
Schreibe einen Kommentar