Projekt-Anfragen: Tel: 07022/9319004 info@CodeDocu.de Software Entwicklung in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

Wie bindet man ein jQuery script in Asp.Net Core ein.

 

jQuery ist in Asp.Net Core schon vorinstalliert unter wwwroot-libs.

Deshalb muss man nur noch an der gewünschen Stelle einen <script> Block einfügen, und in diesen jQuery Funktionen einfügen.

 

Hier ein einfach Alert-Warnhinweis nach dem Laden einer Seite

 

jQuery script Block

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

    $(document).ready(function () {

        alert("This is a jQuery- Alert Test");

    });

</script>

 

 

Beim Einfügen von jQuery muss der Pfad auf "~/lib/jquery/dist/jquery.js" gesetzt werden. Dabei ist ~ das wwwroot-Verzeichnis.

Der jQuery script Block Code kann einfach am Ende der View-Seite  in Razor eingefügt werden

 

 

jQuery in Asp Core

Mit jQuery lassen sich einfach javascript funktionen beim Client-Browser ausführen.

jQuery ist in Asp.Net Core Anwendung vorinstalliert unter dem Verzeichnis wwwroot/lib/jquery/dist/jquery.js

 

jQuery ist eine einfache Zusammenstellung von Funktionen, welche javascript einfach ausführt.

Dadurch kann ajax besser verwaltet werden und Daten zwischen Client und Server während Sitzungen ausgeführt werden.

 

 

 

 

Kompletter View Code, Razor View

Das jQuery script steht ganz am Ende

@model IWois_Core.Models.Notes_Edit_DataModel

 

@{

    ViewData["Title"] = "Edit";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<div style="margin-top:20px;">

    <div class="col-md-push-0" style="margin-right:20%">

        <form asp-action="Edit">

 

            <div class="form-group" style="text-align:center ">

                <input type="submit" value="Speichern" class="btn btn-default" />

                <a href="~/Notes/Details/@Model.IDNote" title="Ansicht" style="font-size:large; text-decoration:none;margin:10px;">Ansicht</a>

                <a href="~/Notes/Index_All" title="Liste" style="font-size:large; text-decoration:none;margin:10px;">Liste</a>

 

            </div>

            <br />

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <input type="hidden" asp-for="IDNote" />

            <div class="form-group">

                <label asp-for="Title" class="control-label"></label>

                <input asp-for="Title" class="form-control" />

                <span asp-validation-for="Title" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Text" class="control-label"></label>

 

                <br />

                TextArea

                @Html.TextAreaFor(model => model.Text1, new { @class = "form-control", @rows = 4 })

                <br />

                Div

                <div contenteditable="true" id="Text3" name="Text3" style="height:200px;overflow:auto;">

                    @Model.Text1

                </div>

 

 

                <span asp-validation-for="Text" class="text-danger"></span>

            </div>

 

        </form>

    </div>

</div>

 

 

@section scripts {

    @{await Html.RenderPartialAsync("_ValidationscriptsPartial");}

}

 

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

    $(document).ready(function () {

        alert("This is a jQuery- Alert Test");

    });

</script>

 

Mobile
»
Upload mit Progress Bar
»
jQuery: Wert einer HTML Progress Anzeige einstellen
»
Dateien hochladen und anzeigen mit jQuery ajax, FileUpload, Anzeigen des json Results
»
jQuery: 1-Button File-Upload mit Autostart
»
Dateien mit Ajax hochladen : Asp Net Core MVC und jQuery
»
jQuery: Function vor Submit Senden ausführen
»
jQuery: function nach dem Laden einer Seite ausführen
»
jQuery: HTML Elemente in ein Element einfügen
»
jQuery: Paste Event beim Einfügen von Text in ein HTML Element
»
jQuery: Insert event bei Text Eingabe

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Info@CodeDocu.de