为什么我的REST方法不被这个jQuery叫什么？ [英] Why is my REST method not being called by this jQuery?
问题描述
我有没有在所有的此处
在这种情况下，它的是的被解雇（当jQuery的被添加到静态仍然没有达到第（Index.cshtml）），但我的休息方式。控制台消息解释为什么：
In this case, it is being fired (when the jQuery is added to a static page (Index.cshtml)), but my REST method is still not being reached. The console message explaining why is:
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /LandingPage/GetQuadrantData
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.6.1055.0
这是jQuery的，当按钮是确实被炒鱿鱼点击，但REST调用没有被提出：
This is the jQuery, which indeed gets fired when the button is clicked, but the REST call is not being made:
<script>
$(function () {
var btnGetData = document.getElementById('btnGetData');
btnGetData.addEventListener("click", function () {
alert("It works");
var unitval = 'ABUELOS';
var begdateval = '2016-08-07';
var enddateval = '2016-08-13';
$.ajax({
type: 'GET',
url: '@Url.Action("GetQuadrantData", "LandingPage")',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
contentType: 'application/json',
cache: false,
success: function (returneddata) {
},
error: function () {
alert('hey, boo-boo!');
}
});
});
});
</script>
剩下的方法是建立像这样，在LandingPageController.cs：
The REST method is set up like so, in LandingPageController.cs:
[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
. . .
我有一个断点_UNIT =单位;线，但它不被达到;为什么不？什么？我在这里缺少
I have a breakpoint on the "_unit = unit;" line, but it is not being reached; why not? What am I missing here?
讨论的REST控制器类开始，像这样：
The REST controller class under discussion begins like so:
[RoutePrefix("api")]
public class LandingPageController : ApiController
注意：如果我在的jQuery（控制器后缀）使用：
Note: If I use this in the jQuery ("Controller" appended):
url: '@Url.Action("GetQuadrantData", "LandingPageController")'
...都GetQuadrantData和LandingPageController是红色的。在IDE（Visual Studio中）编辑器 - 字母是红色的
...both "GetQuadrantData" and "LandingPageController" are red in the IDE (Visual Studio) editor - the letters are red.
OTOH，如果我用这个（没有控制器后缀）：
OTOH, if I use this (sans "Controller" appended):
url: '@Url.Action("GetQuadrantData", "LandingPage")'
（这为我在过去的工作，留下控制器关闭控制器名称），这两个GetQuadrantData和的LandingPage在红色下划线，但字体仍然是正常的颜色。
(which has worked for me in the past, leaving the "Controller" off the Controller name), both "GetQuadrantData" and "LandingPage" are UNDERLINED in red, but the font remains the normal color.
在下面他的评论中使用尼科的链接，我改变了jQuery的网址行这样的：
Using Nico's link in his comment below, I changed the jQuery "url" line to this:
url: '@Url.Action("GetQuadrantData", "LandingPage", new { httproute = "" })',
...但它仍然没有引起要达到的控制方法
...but it still didn't cause the Controller method to be reached.
穿过（铬）浏览器的JavaScript步进，我看到网址线已经动态地从它在设计时有什么改变：
Stepping through the javascript in the (Chrome) browser, I see that the "url" line has been dynamically changed from what it is at design time:
url: '@Url.Action("GetQuadrantData", "LandingPage", new { httproute = "" })',
...为：
url: '/api/LandingPage?action=GetQuadrantData',
我觉得它真的应该已经解决到更像是：
I reckon what it should really have been resolved to is more like:
url: '/api/ABUELOS/2016-08-14/2016-08-20',
我说得对不对？为什么是不是得到解决，像这样
Am I right? Why isn't it being resolved like so?
如果我手动在浏览器中输入该网址，这样的网址栏显示为 HTTP： //本地主机：52194 / API / ABUELOS / 2016年8月21日/ 2016年8月27日它的工作原理 - 在达到方法，它做的事
If I manually enter that URL in the browser, so that the URL bar reads "http://localhost:52194/api/ABUELOS/2016-08-21/2016-08-27" it works - the method is reached and it "does its thing."
我想这一点，太：
$(function () {
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
$.ajax({
type: "GET",
url: '@Url.Action("GetQuadrantData", "LandingPage")',
success: function (retval) {
$("body").append($(retval));
document.body.style.cursor = 'pointer';
},
error: function () {
alert('error in btnGetData');
}
}); // end AJAX
}); // end click
}); // end ready function
...但只是btnGetData错误看了
...but only saw "error in btnGetData"
我最近的失败是这样的：
My most recent failure is this:
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
var unitval = $('#unitName').val();
var begdateval = $('#datepickerFrom').val();
var enddateval = $('#datepickerTo').val();
$.ajax({
type: 'GET',
url: '@Url.Action("GetQuadrantData", "LandingPage")',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
cache: false,
success: function (returneddata) {
alert($(returneddata));
},
error: function () {
alert('error in ajax');
}
});
});
同样，我看到的只是在阿贾克斯错误
Again, I see only "error in ajax"
注意：最高赏金（200分，我认为这是）将被授予谁可以解决这个困境。如果不止一个人做，那么赏金去谁解决它最好的（这基本上对我来说意味着最直接和易于实施的方式。
Note: The maximum bounty (200 points, I think it is) will be awarded to whoever can solve this dilemma. If more than one person does, then the bounty goes to whoever solves it best (which basically to me means in the most straightforward and easy-to-implement manner.
在充分披露和绝望的利益，这里是全部内容（用省略号省略点无聊/无意义的部分）显示的第一页时，Web API应用程序运行（从\Views\Home\Index.cshtml：
In the interest of full disclosure and desperation, here is the entire contents (with boring/meaningless parts elided with ellipsis dots) of the first page that displays when the WEB API app runs (from \Views\Home\Index.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Reporting - Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
}
. . .
</style>
<script>
$(function () {
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
var unitval = "ABUELOS"; //$('#unitName').val();
var begdateval = $('#datepickerFrom').val();
var enddateval = $('#datepickerTo').val();
$.ajax({
type: 'GET',
url: '@Url.Action("GetQuadrantData", "LandingPage")',
data: { unit: unitval, begdate: begdateval, enddate: enddateval },
cache: false,
success: function (returneddata) {
alert($(returneddata));
},
error: function () {
alert('error in ajax');
}
});
});
}); // end ready function
</script>
</head>
<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 0.6cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" height="86" width="133" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.2cm;">Customer Dashboard</label>
<br />
<label class="titletextjr" style="margin-top: -2.2cm;" id="unitName">Craftworks</label>
<label class="cccsfont"> for the week of August 14 </label>
<input class="smalldatepicker" type="date" id="datepickerFrom" name="daterangefrom" value="2016-08-14">
</input>
<label class="cccsfont"> to </label>
<input type="date" class="smalldatepicker" id="datepickerTo" name="daterangeto" value="2016-08-20">
</input>
<button class="btn green smallbutton" id="btnGetData" name="btnGetData">SUBMIT</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th class="rightjustifytext">Qty</th>
</tr>
<tr>
<td>101200</td>
<td>ASPARAGUS, STANDARD 11/1#</td>
<td class="rightjustifytext">32</td>
</tr>
<tr>
<td>140200</td>
<td>MUSHROOMS, MEDIUM 10#</td>
<td class="rightjustifytext">20</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td class="rightjustifytext">14</td>
</tr>
<tr>
<td>127100</td>
<td>LETTUCE, ROMAINE 24 CT </td>
<td class="rightjustifytext">14</td>
</tr>
<tr>
<td>300123</td>
<td>BEANS, GREEN TRIM 2/5# (BAGS)</td>
<td class="rightjustifytext">13</td>
</tr>
<tr>
<td>173100</td>
<td>POTATOES, 50 CT IDAHO</td>
<td class="rightjustifytext">12</td>
</tr>
<tr>
<td>234225</td>
<td>BERRIES, STRAWBERRY 1# CLAM</td>
<td class="rightjustifytext">11</td>
</tr>
<tr>
<td>188500</td>
<td>TOMATOES, GRAPE 12/1 PT</td>
<td class="rightjustifytext">10</td>
</tr>
<tr>
<td>122500</td>
<td>LETTUCE, ICEBERG LINER 24 CT</td>
<td class="rightjustifytext">10</td>
</tr>
<tr>
<td>121050</td>
<td>LETTUCE, GREEN LEAF 24 CT</td>
<td class="rightjustifytext">10</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont cccs">Red denotes Contract Item Overages</label>
</br>
<label class="cccs">For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>PRO*ACT Member</th>
<th class="rightjustifytext">Total Occurrences of Summary Items</th>
<th class="rightjustifytext">Total Summary Exceptions</th>
<th class="rightjustifytext">Total Percentage of Summary Exceptions</th>
</tr>
<tr>
<td style="width:30%">Stern</td>
<td style="width:23%" class="rightjustifytext">205</td>
<td style="width:23%" class="rightjustifytext">2</td>
<td style="width:24%" class="rightjustifytext">99.02%</td>
</tr>
<tr>
<td>Hardies Dallas</td>
<td class="rightjustifytext">1,597</td>
<td class="rightjustifytext">0</td>
<td class="rightjustifytext">100.00%</td>
</tr>
<tr>
<td>Hardies South</td>
<td class="rightjustifytext">612</td>
<td class="rightjustifytext">1</td>
<td class="rightjustifytext">99.84%</td>
</tr>
<tr>
<td>Go Fresh</td>
<td class="rightjustifytext">482</td>
<td class="rightjustifytext">0</td>
<td class="rightjustifytext">100.00%</td>
</tr>
<tr>
<td>Segovias</td>
<td class="rightjustifytext">1,360</td>
<td class="rightjustifytext">2</td>
<td class="rightjustifytext">99.85%</td>
</tr>
<tr>
<td>Potato Spec</td>
<td class="rightjustifytext">1,605</td>
<td class="rightjustifytext">0</td>
<td class="rightjustifytext">100.00%</td>
</tr>
<tr>
<td class="rightjustifytext bold">TOTAL</td>
<td class="rightjustifytext bold">5,861</td>
<td class="rightjustifytext bold">5</td>
<td class="rightjustifytext bold">99.79%</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecasted Spend - $9,814.81</h2>
<table>
<tr>
<th>Item Code</th>
<th class="rightjustifytext">Last Week's Usage</th>
<th class="rightjustifytext">This Week's Price</th>
<th class="rightjustifytext">Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td class="rightjustifytext">49</td>
<td class="rightjustifytext">3.14</td>
<td class="rightjustifytext">153.86</td>
</tr>
<tr>
<td>231083</td>
<td class="rightjustifytext">52</td>
<td class="rightjustifytext">1.25</td>
<td class="rightjustifytext">65.00</td>
</tr>
<tr>
<td>398980</td>
<td class="rightjustifytext">46</td>
<td class="rightjustifytext">4.95</td>
<td class="rightjustifytext">227.70</td>
</tr>
<tr>
<td>351135</td>
<td class="rightjustifytext">40</td>
<td class="rightjustifytext">0.75</td>
<td class="rightjustifytext">30.00</td>
</tr>
<tr>
<td>398036</td>
<td class="rightjustifytext">42</td>
<td class="rightjustifytext">3.00</td>
<td class="rightjustifytext">126.00</td>
</tr>
<tr>
<td>208110</td>
<td class="rightjustifytext">42</td>
<td class="rightjustifytext">2.50</td>
<td class="rightjustifytext">105.00</td>
</tr>
<tr>
<td>102800</td>
<td class="rightjustifytext">1835</td>
<td class="rightjustifytext">2.25</td>
<td class="rightjustifytext">4,128.75</td>
</tr>
<tr>
<td>367050</td>
<td class="rightjustifytext">1910</td>
<td class="rightjustifytext">1.95</td>
<td class="rightjustifytext">3,724.50</td>
</tr>
<tr>
<td>173100</td>
<td class="rightjustifytext">66</td>
<td class="rightjustifytext">19.00</td>
<td class="rightjustifytext">1,254.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold rightjustifytext">4082</td>
<td class="bold rightjustifytext">--</td>
<td class="bold rightjustifytext">$9,814.81</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Delivery Performance</h2>
<table>
<tr>
<th>PRO*ACT Distributor</th>
<th>Restaurant Location</th>
<th class="rightjustifytext">Avg Order Amount</th>
<th class="rightjustifytext">Avg Package Count</th>
<th class="rightjustifytext">Total Sales</th>
</tr>
<tr>
<td>Sunrise FL</td>
<td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
<td class="rightjustifytext">$475.78</td>
<td class="rightjustifytext">28.50</td>
<td class="rightjustifytext">$1,903.10</td>
</tr>
<tr>
<td>Sunrise FL</td>
<td>RAGTIME TAVERN - #4404 - ATLANTIC BEACH</td>
<td class="rightjustifytext">$221.46</td>
<td class="rightjustifytext">17.50</td>
<td class="rightjustifytext">$885.82</td>
</tr>
<tr>
<td>Sunrise FL</td>
<td>SEVEN BRIDGES - #4403 - JACKSONVILLE</td>
<td class="rightjustifytext">$367.49</td>
<td class="rightjustifytext">22.67</td>
<td class="rightjustifytext">$1,102.47</td>
</tr>
<tr>
<td>T&T</td>
<td>BIG RIVER - #4201 - CHATTANOOGA</td>
<td class="rightjustifytext">$396.06</td>
<td class="rightjustifytext">22.83</td>
<td class="rightjustifytext">$2,376.34</td>
</tr>
<tr>
<td>T&T</td>
<td>BIG RIVER - #4205 - HAMILTON PL</td>
<td class="rightjustifytext">$424.74</td>
<td class="rightjustifytext">26.00</td>
<td class="rightjustifytext">$1,698.95</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold rightjustifytext">3,770.42</td>
<td class="bold rightjustifytext">23.50</td>
<td class="bold rightjustifytext">$1,592.60</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
更新6
我知道有更多的的Arturo的回答莫过于此，但到目前为止仅仅增加这样的：
UPDATE 6
I know there's more to Arturo's answer than this, but so far just adding this:
config.Routes.MapHttpRoute(
name: "QuadrantData",
routeTemplate: "api/{unit}/{begdate}/{enddate}"
);
...帮助，因为正在达到我的方法断点。不幸的是，嘎嘎，嘎嘎的SyntaxError：意外的令牌LT;在JSON在位置0
...has helped, as the breakpoint in my method is being reached. Unfortunately, it squawks "SyntaxError: Unexpected token < in JSON at position 0"
推荐答案
您有如何的几个问题正在生成的路线和你如何试图访问它。
You have a few issues with how you are generating the route and how you are trying to access it.
您的Web API操作使用属性默认路由，所以没有路由名称匹配诸如在公约基于路由。
You Web API action is using attribute routing so by default there is no route name to match like in the convention-based routing.
更新的路由属性包括名称在路由表中找到。
Update the route attribute to include a name to find in the route table.
[RoutePrefix("api")]
public class LandingPageController : ApiController {
[HttpGet]
[Route("{unit}/{begdate}/{enddate}", Name="QuadrantData")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate) {
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
//...other code
}
//...other code
}
接下来即使你有你还需要包括为了获得MVC匹配模板参数，并将它产生在你定义模板上的URL的名称那个行动。
Next even though you have the name you also need to include the template parameters in order to get a match from MVC and have it generate the url in the template you defined on the action.
要生成链接的Web API，它看起来像这样
To generate link to Web API, it would look like this
@Url.RouteUrl(routeName : "QuadrantData", routeValues : new { httpRoute = true , unit = "ABUELOS", begdate = "2016-08-07", enddate = "2016-08-13" })
或
@Url.HttpRouteUrl(routeName : "QuadrantData", routeValues : new { unit = "ABUELOS", begdate = "2016-08-07", enddate = "2016-08-13" })
这将在 httpRoute 添加到路由值。
现在你的方法出的方式，我建议以下替代方法。
Now with your approach out of the way, I would suggest the following alternative approach.
KISS原则。更改Web API（REST）端点POST和改变它的模板。
KISS principle. Change Web API (REST) endpoint to POST and change its template.
[RoutePrefix("api")]
public class LandingPageController : ApiController {
//eg POST api/QuadrantData
[HttpPost]
[Route("QuadrantData", Name="GenerateQuadrantData")]
public HttpResponseMessage QuadrantData(string unit, string begdate, string enddate) {
_unit = unit;
_beginDate = begdate;
_endDate = enddate;
//...other code
}
//...other code
}
和在JSON POST请求的主体发送的数据
and send the data in the body of a JSON POST request
$(function () {
$("#btnGetData").click(function () {
document.body.style.cursor = 'wait';
var unitval = "ABUELOS"; //$('#unitName').val();
var begdateval = $('#datepickerFrom').val();
var enddateval = $('#datepickerTo').val();
var jsonBody = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });
$.ajax({
type: 'POST',
url: '@Url.HttpRouteUrl("GenerateQuadrantData", null)',
contentType: 'application/json',
dataType: 'json',
data: jsonBody,
cache: false,
success: function (returneddata) {
alert($(returneddata));
},
error: function () {
alert('error in ajax');
}
});
});
}); // end ready function
这篇关于为什么我的REST方法不被这个jQuery叫什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
