MVC - dropdownlist onchange nie abgefeuert jquery

Ich bin kämpfen, um dropdown-Liste onchange-Ereignis in jquery. Bei der Auswahl Datum vom dropdownlist, andere Textfeld unsichtbar sein sollte und Datum textbox soll, werden sichtbar. Und bei der Auswahl von Status, die anderen Textfelder sollten unsichtbar sein und der status der dropdownlist angezeigt werden soll. Es passiert nichts. Schauen Sie bitte in meinem code, was ich falsch mache. Ihre Hilfe bedeutet eine Menge.

_Layout.cshtml

 <head>
  <script type="text/javascript">
    $(function () {
        $('#categorie').on('change', function () {
            if ($(this).val() == "Date") {
                $('#keyword').hide(); //invisible
                $('#txtcalendar').show();
            } else if ($(this).val() == "Status"){
                $('#keyword').hide(); //invisible
                $('#txtcalendar ').hide();
                $('#tmstatus ').show();
            }
            .
            .
            .
        });

    });
    </script> 
</head>

Index.cshtml

@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "All", "Id", "Status",
                                                       "Vendor", "Date"
                                                   }) as SelectList)



 <p> Keyword: @Html.TextBox("keyword")  <input id="Submit" type="submit" value="Search"  /> </p>

 <p>Calendar @Html.TextBox("txtcalendar", new {}, new { @class = "myclass",  style = "display:none;" })</p>

 @Html.DropDownList("tmstatus", new SelectList(new[]
                                                   {
                                                       "Success", "Pending", "Error",
                                                   }) as SelectList)

Bitte geben Sie in Ihrer Frage deutlich, welche Elemente werden ausgeblendet, wenn "Datum" und "Status" ausgewählt werden. Haben Sie eine Skript-Referenz auf die jquery-Bibliothek? Für einen start, stellen Sie sicher, dass die ändern-Funktion aufgerufen wird, durch hinzufügen der alert("test") als der erste Anruf.
wo bekomme ich diese passende jquery-Bibliothek?
jquery wird automatisch enthalten, wenn Sie erstellen ein MVC-Projekt. Nur sicherstellen, dass code, der jquery verwendet, unter dem import des eigentlichen jquery.js Datei.
"Es passiert nichts" was meinst du mit es ? dein jquery nicht funktioniert oder jquery arbeiten, aber die Sicht ist nicht die Verwaltung richtig ? Denn ich habe dein code scheint zu funktionieren gut, außer Kontrolle, die Sichtbarkeit ist nicht ordnungsgemäß verwaltet.
Haben Sie einen Blick auf meine Antwort. Kann sein, es wird Ihnen helfen, Ihr problem zu lösen.

InformationsquelleAutor user2857908 | 2014-02-05

In Ihrer Anwendung, Gehen Sie zu app_start\BundleConfig.cs und in RegisterBundles Methode überprüfen, dass die Bündelung von Jquery registriert wurde oder nicht. Es sollte Hinzugefügt haben-bundle für jquery-wie unten erwähnt :

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

Wenn Sie es nicht ist in RegisterBundles Methode fügen Sie es. Und gehen wie folgt vor :

Gehen Sie zu Ihrem _Layout.cshtml Seite
Hinzufügen @Scripts.Render("~/bundles/jquery") vor dem Ende des head-tag. In meinem Beispiel-Anwendung, die aussieht wie unten erwähnt:
Schneiden Sie Ihre javascript-code, der dropdownlist-änderung von _Layout.cshtml
Fügen Sie ihn in index.cshtml am Ende.

Meine Index.cshtml Seite sieht so aus :

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index Page</h2>

@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "All", "Id", "Status",
                                                       "Vendor", "Date"
                                                   }) as SelectList)



<p> Keyword: @Html.TextBox("keyword")  <input id="Submit" type="submit" value="Search" /> </p>

<p>Calendar @Html.TextBox("txtcalendar", new { }, new { @class = "myclass", style = "display:none;" })</p>

@Html.DropDownList("tmstatus", new SelectList(new[]
                                                   {
                                                       "Success", "Pending", "Error",
                                                   }) as SelectList)

<script type="text/javascript">
    $(function () {
        $('#categorie').on('change', function () {
            if ($(this).val() == "Date") {
                $('#tmstatus ').show();
                $('#keyword').hide(); //invisible
                $('#txtcalendar').show();
            } else if ($(this).val() == "Status") {
                $('#keyword').hide(); //invisible
                $('#txtcalendar ').hide();
                $('#tmstatus ').show();
            }
        });

    });
</script>

InformationsquelleAutor SpiderCode

Versuchen, indem Sie Ihr Skript in einem auf fertig am unteren Rand Ihrer Seite

$(document).ready(function() {
    $('#categorie').on('change', function () {
        if ($(this).val() == "Date") {
            $('#keyword').hide(); //invisible
            $('#txtcalendar').show();
        } else if ($(this).val() == "Status"){
            $('#keyword').hide(); //invisible
            $('#txtcalendar ').hide();
            $('#tmstatus ').show();
        }
        .
        .
        .
});

was Sie genau bedeuten, "setzen Sie auf fertig am unteren Rand Ihrer Seite"? welche Seite?
Es muss gehen in Ihren Skripts render-Abschnitt z.B. @section, scripts <script type="text/javascript" > $(document).ready () - function() { $('#Kategorie').auf('change', function () { } }); </script>

InformationsquelleAutor ASG

0

Nicht setzen Ihr Drehbuch in die <head> - tag, sondern setzen es niedriger in der layout-Seite. Kurz vor der </body> tag finden Sie
```
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
```
Setzen Sie Ihr Skript, dass wie diese:
```
<body>
....
....    
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script type="text/javascript>
    $(function () {
        $('#categorie').on('change', function () {
           if ($(this).val() == "Date") {
               $('#keyword').hide(); //invisible
               $('#txtcalendar').show();
           } else if ($(this).val() == "Status"){
               $('#keyword').hide(); //invisible
               $('#txtcalendar ').hide();
               $('#tmstatus ').show();
           }
           .
           .
           .
    });
</script>
</body>
</html>
```
- vor </body> habe Fehler wie @Script zeigt in Roter Schrift.
- War es schon da, oder hast du es hinzufügen? Welches template hast du ausgewählt beim erstellen der MVC-Projekt?
- ich verwende mvc-internet-Projekt. Nein, konnte ich nicht alles hinzufügen. ich nur setzen Sie es in javascript-tag. was soll ich jetzt tun?
- Ich vergaß zu wickeln Sie den javascript-Code in <script> tags in meiner Antwort, wenn Sie kopiert haben, sollten Sie Sie hinzufügen. Wenn das nicht funktioniert, könnten Sie geben keine Informationen über den Fehler sind Sie immer?
- funktioniert nicht. immer noch das gleiche. @Scripts.Render("~/bundles/jquery") @Klassen rendersection("scripts", required: false) <script type="text/javascript" > ...... </script> <body> ......</body> mache ich das richtig?
- Ich denke, es sollte im inneren des Körpers der html-Seite, setzen Sie es einfach vor die </body> tag, ich habe meine Antwort aktualisiert
- setzen Sie einfach innerhalb des Körpers der html-Seite. aber '@Scripts' ist noch unentdeckt ist. sind Sie sicher, dass "@Scripts' ist die richtige Referenz?
- Wenn Sie MVC 4 (wie du Tags in deiner Frage), sollte es richtig sein, ja, ich habe ein test-Projekt und nur kopiert dieses über aus meiner layout-Datei.
- Ja, ich bin mit MVC 4. Ich weiß nicht, warum es noch immer nicht erkennbar...
InformationsquelleAutor Bart Beyers

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.