หากต้องการเพิ่มรายละเอียดเพิ่มเติมเกี่ยวกับการโอเวอร์โหลดที่คุณถามในความคิดเห็นของคุณหลังจากคำตอบอื่นนี่คือบทสรุป ความคิดเห็นในการApiControllerแสดงว่าการดำเนินการใดที่จะถูกเรียกในแต่ละGETแบบสอบถาม:
public class ValuesController : ApiController
{
public IEnumerable<string> Get()
{
return Request.GetQueryNameValuePairs().Select(pair => "Get() => " + pair.Key + ": " + pair.Value);
}
public IEnumerable<string> Get(int height)
{
return new string[] { "Get(height) => height: " + height };
}
public IEnumerable<string> Get(string height)
{
return new string[] { "Get(height) => height: " + height };
}
public IEnumerable<string> Get(string height, string width)
{
return new string[] { "Get(height, width) => height: " + height + ", width: " + width };
}
}
คุณต้องการเพียงเส้นทางเดียวสำหรับสิ่งนี้ในกรณีที่คุณสงสัย:
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
และคุณสามารถทดสอบทั้งหมดได้ด้วยมุมมอง MVC นี้หรืออะไรสักอย่าง ใช่ฉันรู้ว่าคุณไม่ควรผสม JavaScript กับมาร์กอัปและฉันไม่ได้ใช้ bootstrap เหมือนที่คุณทำตามปกติ แต่นี่มีไว้เพื่อการสาธิตเท่านั้น
<div class="jumbotron">
<h1>Multiple parameters test</h1>
<p class="lead">Click a link below, which will send an HTTP GET request with parameters to a WebAPI controller.</p>
</div>
<script language="javascript">
function passNothing() {
$.get("/api/values", function (data) { alert(data); });
}
function passHeight(height) {
$.get("/api/values?height=" + height, function (data) { alert(data); });
}
function passWidth(width) {
$.get("/api/values?width=" + width, function (data) { alert(data); });
}
function passHeightAndWidth(height, width) {
$.get("/api/values?height=" + height + "&width=" + width, function (data) { alert(data); });
}
function passDepth(depth) {
$.get("/api/values?depth=" + depth, function (data) { alert(data); });
}
function passHeightAndDepth(height, depth) {
$.get("/api/values?height=" + height + "&depth=" + depth, function (data) { alert(data); });
}
function passWidthAndDepth(width, depth) {
$.get("/api/values?width=" + width + "&depth=" + depth, function (data) { alert(data); });
}
function passHeightWidthAndDepth(height, width, depth) {
$.get("/api/values?height=" + height + "&width=" + width + "&depth=" + depth, function (data) { alert(data); });
}
function passWidthWithPascalCase(width) {
$.get("/api/values?Width=" + width, function (data) { alert(data); });
}
</script>
<div class="row">
<button class="btn" onclick="passNothing();">Pass Nothing</button>
<button class="btn" onclick="passHeight(5);">Pass Height of 5</button>
<button class="btn" onclick="passWidth(8);">Pass Width of 8</button>
<button class="btn" onclick="passHeightAndWidth(3, 7);">Pass Height of 3 and Width of 7</button>
<button class="btn" onclick="passDepth(2);">Pass Depth of 2</button>
<button class="btn" onclick="passHeightAndDepth(4, 5);">Pass Height of 4 and Depth of 5</button>
<button class="btn" onclick="passWidthAndDepth(3, 5);">Pass Width of 3 and Depth of 5</button>
<button class="btn" onclick="passHeightWidthAndDepth(7, 2, 9);">Pass Height of 7, Width of 2 and Depth of 9</button>
<button class="btn" onclick="passHeightWidthAndDepth(7, 2, 9);">Pass Height of 7, Width of 2 and Depth of 9</button>
<button class="btn" onclick="passWidthWithPascalCase(8);">Pass Width of 8, but with Pascal case</button>
</div>
