Ich versuche, den Controller durch Klicken auf eine Schaltfläche aufzurufen. Mein Ziel ist es, Datumswerte aus der Sicht zu bekommen und andere Daten vom Controller aufzurufen, aber Ajax-Sache ist so nervig. Also habe ich einen Test gemacht, aber es funktioniert immer noch nicht.ASP.Net MVC Ajax Controller Anruf
Ich folgte mehrere Tutorials und SO Fragen, und das ist, wie ich herausgefunden, um die Controller-Methode ("testtest") durch Javascript Ajax-Funktionen aufzurufen. Hier ist the tutorial, dass ich zum letzten Mal gefolgt bin.
$(document).ready(function() {
$('#btnSelectDate').click(function() {
alert("working");
var text= $('#txtStartDateI').val();
var button= $('#btnSelectDate').val();
alert(text + " " + button);
$.ajax({
url: "/Home/testtest",
type: "post",
datatype: "text",
data: { btnSelectDate: button, txtStartDate: text},
success: function (data) {
('#testarea').html(data);
},
error: function() {
$('#testarea').html("ERROR");
}
});
});
});
Und das ist die Methode „testtest“:
[HttpPost]
public string testtest(string btnSelectDate,string txtStartDate) {
return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
}
Wenn ich auf die Schaltfläche klicken, die Warnungen arbeiten, aber nicht die Methode „testtest“ in Homecontroller nennen. Ich setze die Haltepunkte im Controller, aber es geht nicht durch. Nachdem der Alarmdialog angezeigt wird, blinkt die gesamte Seite und es wurde nichts geändert. Ich habe versucht, den <div id="testarea"></div> den Textwert zu erhalten.
Ich habe versucht, verschiedene URL Formen wie:
url: '@Url.Action("testtest","Home")'
url: 'localhost/Home/testtest'
Aber es anstößt noch nicht die Steuerung.
Benötigt Ajax spezielle Skripte zum Hinzufügen? (Ich glaube, ich habe Ajax-Skripte hinzugefügt, da einige Links 'Ajax' enthalten.) Oder muss ich etwas Spezielles tun, um die Methode mit Ajax aufzurufen?
Der Balg ist mein ganzer Code. Dies ist mein Controller „Home“:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace haha.Controllers {
public class HomeController : Controller {
public ActionResult View() {
return View("View");
}
[HttpPost]
public string testtest(string btnSelectDate,string txtStartDate) {
return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
}
}
}
Ausblick: (.? Und für die Skripte, ich denke, es gibt mehrere Skripte, die doppelt vorhanden sind, aber ich kann diejenigen nicht herausfinden Was kann ich entfernen)
@using System;
@using System.Collections.Generic;
@using System.Linq;
@using System.Web;
@using System.Web.Mvc;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/scripts/jquery-*.*.*.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script>
$(function() {
$(".Datepicker").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
nextText: 'next Month',
prevText: 'previous Month',
showButtonPanel: true,
currentText: 'Today'
})
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSelectDate').click(function (event) {
alert("working");
var text= $('#txtStartDateI').val();
var button= $('#btnSelectDate').val();
$.ajax({
url: "/Home/testtest",
type: "post",
datatype: "text",
data: { btnSelectDate: button, txtStartDate: text},
success: function (data) {
('#testarea').html(data);
},
error: function() {
$('#testarea').html("ERROR");
}
});
});
});
</script>
</head>
<body>
this is test area
<div id="testarea"></div>
<hr />
<p></p>
<div>
<form id="formDTInsurer">
StartDate:
<input type="text" class="Datepicker" id="txtStartDateI" name="txtStartDate">
<button type="submit" id="btnSelectDate" name="btnSelectDate" value="InsurerDate">Select</button>
</form>
</div>
</body>
</html>
bearbeiten
Nach Stephen Muecke ‚s Kommentar, besichtigte ich die Konsole Chrom-Tool. Folgendes ist der Fehler.
jquery-1.5.1.js:869
Uncaught TypeError: b.parents(...).addBack is not a function
at Object.parse (jquery.validate.unobtrusive.min.js:19)
at HTMLDocument.<anonymous> (jquery.validate.unobtrusive.min.js:19)
at Object.resolveWith (jquery-1.5.1.js:862)
at Function.ready (jquery-1.5.1.js:420)
at HTMLDocument.DOMContentLoaded (jquery-1.5.1.js:1055)
parse @ jquery.validate.unobtrusive.min.js:19
(anonymous) @ jquery.validate.unobtrusive.min.js:19
resolveWith @ jquery-1.5.1.js:862
ready @ jquery-1.5.1.js:420
DOMContentLoaded @ jquery-1.5.1.js:1055
Da es mehr Fehler mit diesen Skripten waren, bemerkte ich einige von denen, und es tatsächlich reduziert die Anzahl der Fehler. Das einzige, was übrig ist, ist das obige. Das Folgende habe ich jetzt in der aktuellen HTML-Datei.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
<!--<script src="~/Scripts/jquery-1.5.1.min.js"></script>-->
<!--<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>-->
<!--<script src="~/scripts/jquery-*.*.*.min.js"></script>-->
<!--<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>-->
Welche Fehler haben Sie in der Browser-Konsole? –
Es gibt keine Fehler, aber es funktioniert nicht, was ich meinte .. – pebble
Und nur eine Kopie der Skripte und in der richtigen Reihenfolge - 'jquery- {version} .js' dann' jquery-validate.js' und 'jquery.validate.unobtrusive.js' und' jquery-ui.js' (aber das hängt nicht mit Ihrem Fehler zusammen) –