これが私のコードです(質問は以下にあります):
見る
// This function is called by another function when radioButtonGroup.change().
var requestValues = function (form) {
var option = form.find("input:radio:checked").attr("value");
// This seemingly shows the correct url for the action method desired.
alert("Form Action: " + form[0].action + "\nForm Method: " + form[0].method);
if (form.valid()) {
$.ajax({
url: form[0].action,
type: form[0].method,
data: option,
success: function (result) {
alert("Had success.");
$('#createForm').replaceWith(result);
},
error: function (xhr) {
alert("An error occurred: " + xhr.status + " " + xhr.statusText);
}
});
}
return false;
}
...(other code here)...
@using (Html.BeginForm("CreateForm", "MyController", FormMethod.Post,
new { @id = "optionForm" }))
{
<div id="options">
@foreach (MyOption op in Model.GetOptions()) {
<div class="editor-field">
@Html.RadioButton("formOption", op.OptionType, false,
new { @id = op.ID, @title = @op.Description })
<label for="@op.ID">@op.Name</label>
</div>
}
</div>
<input type="submit" value="Select" style="display:none;" />
}
コントローラ
[HttpPost]
public PartialViewResult CreateForm(MyOptionType formOption) {
MyViewModel model = new MyViewModel();
model.ApplyOptionValues(formOption);
return PartialView("_CreateForm", model);
}
ルートを登録する
// Default
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
私の問題は、ラジオ ボタンをクリックすると、AJAX 要求が実行されますが、「404 Not Found」エラーが発生することです ( alert
jQuery 関数では適切な URL が表示されているように見えますが)。昨日一日中これに費やしましたが、一体何が悪いのかわかりません。IIS Express で ASP.NET MVC 3 アプリを実行していますが、Areas を使用していません (とにかく知っています)。これを修正する方法について何か提案はありますか? ありがとう。
編集
アラート ボックスには、次のメッセージが表示されます。
フォーム アクション:
https://localhost:44300/MyController/CreateForm
フォーム方法: ポスト
編集
エラーを再現する全体のテスト ビューとテスト コントローラーを次に示します。
見る
<h2>TestAction</h2>
<script type="text/javascript">
$(document).ready(function () {
$("#optionForm input[name='radioOption']").change(function () {
requestValues($(this).closest("form"));
});
var requestValues = function (form) {
var option = form.find("input:radio:checked").attr("value");
alert("Form Action: " + form[0].action + "\nForm Method: " + form[0].method);
if (form.valid()) {
$.ajax({
url: form[0].action,
type: form[0].method,
data: option,
success: function (result) {
alert("AJAX success.");
//$('#createForm').replaceWith(result);
},
error: function (xhr) {
alert("An error occurred: " + xhr.status + " " + xhr.statusText);
}
});
}
return false;
}
});
</script>
@using (Html.BeginForm("CreateForm", "Test", FormMethod.Post, new { @id = "optionForm" })) {
@Html.RadioButton("radioOption", "value1", false, new { @id = "radioButton1" })
<label for="radioButton1">Radio Button 1</label>
@Html.RadioButton("radioOption", "value2", false, new { @id = "radioButton2" })
<label for="radioButton2">Radio Button 2</label>
@Html.RadioButton("radioOption", "value3", false, new { @id = "radioButton3" })
<label for="radioButton3">Radio Button 3</label>
<input type="submit" value="Select" style="display:none;" />
}
<div id="createForm"></div>
コントローラ
public class TestController : Controller {
public ActionResult TestAction() {
return View();
}
[HttpPost]
public ActionResult CreateForm(string option) {
return View("TestAction");
}
}