[解決済み] POSTでJSONデータを送信(ajax)、Controllerからjsonレスポンスを受信(MVC)
2022-04-28 16:11:45
質問
そんな感じで、javascriptで関数を作ってみました。
function addNewManufacturer() {
var name = $("#id-manuf-name").val();
var address = $("#id-manuf-address").val();
var phone = $("#id-manuf-phone").val();
var sendInfo = {
Name: name,
Address: address,
Phone: phone
};
$.ajax({
type: "POST",
url: "/Home/Add",
dataType: "json",
success: function (msg) {
if (msg) {
alert("Somebody" + name + " was added in list !");
location.reload(true);
} else {
alert("Cannot add to list !");
}
},
data: sendInfo
});
}
を呼んだ。
jquery.json-2.3.min.js
スクリプトファイルを使用し、私はそれを
toJSON(array)
メソッドを使用します。
コントローラでは、こんな感じです。
Add
アクション
[HttpPost]
public ActionResult Add(PersonSheets sendInfo) {
bool success = _addSomethingInList.AddNewSomething( sendInfo );
return this.Json( new {
msg = success
});
}
しかし
sendInfo
をメソッドパラメータとして使用すると、NULLになります。
モデルです。
public struct PersonSheets
{
public int Id;
public string Name;
public string Address;
public string Phone;
}
public class PersonModel
{
private List<PersonSheets> _list;
public PersonModel() {
_list= GetFakeData();
}
public bool AddNewSomething(PersonSheets info) {
if ( (info as object) == null ) {
throw new ArgumentException( "Person list cannot be empty", "info" );
}
PersonSheets item= new PersonSheets();
item.Id = GetMaximumIdValueFromList( _list) + 1;
item.Name = info.Name;
item.Address = info.Address;
item.Phone = info.Phone;
_list.Add(item);
return true;
}
}
POSTでデータを送信した場合、actionメソッドでどのように処理すればよいのでしょうか?
使い方がわからない。 また、(ajaxの)レスポンスをJSONで送り返すことは可能でしょうか?
どのように解決するのですか?
モデルを作成する
public class Person
{
public string Name { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
}
以下のようなコントローラー
public ActionResult PersonTest()
{
return View();
}
[HttpPost]
public ActionResult PersonSubmit(Vh.Web.Models.Person person)
{
System.Threading.Thread.Sleep(2000); /*simulating slow connection*/
/*Do something with object person*/
return Json(new {msg="Successfully added "+person.Name });
}
ジャバスクリプト
<script type="text/javascript">
function send() {
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$('#target').html('sending..');
$.ajax({
url: '/test/PersonSubmit',
type: 'post',
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$('#target').html(data.msg);
},
data: JSON.stringify(person)
});
}
</script>
関連
-
[解決済み] cURLでJSONデータをPOSTするにはどうすればよいですか?
-
[解決済み] Firefox または Chrome ブラウザから HTTP POST リクエストを手動で送信する方法
-
[解決済み] RESTful WebServiceにファイルや関連データをJSONで投稿する。
-
[解決済み] Python RequestsでJSONデータをPOSTする方法とは?
-
[解決済み] フェッチする JSONデータをPOSTする
-
[解決済み] XMLHttpRequestでPOSTデータを送信する
-
[解決済み] FlaskのビューからJSONレスポンスを返す
-
[解決済み] ajaxポストからのファイルダウンロードを処理する
-
[解決済み] JSONまたは部分的なhtmlを返すASP.NET MVCコントローラのアクション
-
[解決済み] jQuery OR Selector?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught SyntaxError: 予期しない入力の終了
-
[解決済み] jQuery データ属性の値に基づいて要素を検索する方法は?
-
[解決済み] jQueryでオブジェクトに登録されたイベントハンドラを検索する
-
[解決済み] .on('click') と .click() の違いについて
-
[解決済み] jQueryを使用してCSSのdisplay noneまたはblockプロパティを変更するにはどうすればよいですか?
-
[解決済み] ドロップダウンのアイテムの選択値をjQueryで取得する
-
[解決済み] jQueryを使用してDropDownListの値を設定するにはどうすればよいですか?
-
[解決済み] jQueryで多段式フォームをリセットする
-
[解決済み] jQuery / JavaScriptでJSONデータをパースする方法は?
-
[解決済み】iPad版SafariでjQueryを使ってタッチイベントを認識させる方法は?可能でしょうか?