2016-09-24 9 views
1

私のView(asp.net)コードでは、単にチェックボックスの束を表示しています。そのうちの一つがクリックされるたびに、次のJavaスクリプトコードが呼び出されます(私は別のstackoverflowの質問に見つけた):javascriptコードの中でモデルデータを使用するには?

var RatingClicked = function (rate) { 
    //some initial work goes here 

    $.ajax({ 
     url: '@Url.Action("SetRate","Home")', 
     data: { SelectedRate: rate}, 
     success: function (data) { 
      //call is successfully completed and we got result in data 

     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      //some errror, some show err msg to user and log the error 
      alert(xhr.responseText); 

     } 
    }); 
} 

これまでのところは良いです。コードは期待通りに機能し、適切なデータ(チェックボックスの値であるレート)を渡すことでSetRateアクションメソッドが呼び出されます。問題は、私のビューのモデル情報である "レート"に加えて、他のいくつかのデータを渡す必要があることです。しかし、できるだけ早く私は、次のコード行を変更すると、Javascriptを完全に動作を停止するようだ:

 data: { SelectedRate: rate, SomeOtherData:@Model.MyData}, 

私はJavaScriptをかみそりのサーバー側の実行対クライアント側で実行されていることを理解しています。しかし、回避策は何ですか?正しい値を渡すSetRateアクションメソッドを呼び出すにはどうすればよいですか?

編集:ここでは、私は

@using Impoware.Models 
@model HomeViewModel 

<input type="checkbox" value="1" id="Rating1" onclick="RatingClicked(1)" onmouseover="MouseOverRating(1)" onmouseout="MouseOutRating(1)" /> 
<input type="checkbox" value="2" id="Rating2" onclick="RatingClicked(2)" onmouseover="MouseOverRating(2)" onmouseout="MouseOutRating(2)" /> 
<input type="checkbox" value="3" id="Rating3" onclick="RatingClicked(3)" onmouseover="MouseOverRating(3)" onmouseout="MouseOutRating(3)" /> 
<input type="checkbox" value="4" id="Rating4" onclick="RatingClicked(4)" onmouseover="MouseOverRating(4)" onmouseout="MouseOutRating(4)" /> 
<input type="checkbox" value="5" id="Rating5" onclick="RatingClicked(5)" onmouseover="MouseOverRating(5)" onmouseout="MouseOutRating(5)" /> 

編集2(他のJavaScriptの機能のカップルとは別に)私の見解内部の持っているすべてです:Shyjuは、以下のとおり、私は、コードを変更し、それが主要なデータタイプのために働い(int、boolなど)しかし、私はデータモデル全体を渡そうとしましたが、次のエラーが発生しました。

'Newtonsoft.Json.JsonSerializationException'型の例外はNewtonsoft.Json.dllでは発生しましたが、ユーザーコードで処理されませんでした

Additio自己参照ループがタイプ 'System.Data.Entity.DynamicProxies.UserParticipation_D381F3E084EC9A0B56FA60725061B956AEF865280516092D8BDE683C9A32725B'で検出されました。パス 'userParticipation.AspNetUser.UserParticipations'。

UserParticipationは、AspNetUserに接続する外部キーを持つクラスです(多対1の関係)。モデルはEntityFrameworkを使用して作成されました。 UserParticipationに戻るループがあるのはなぜですか?ああ、最後に、モデルデータ全体をもう一度渡して、データベースへのいくつかのトリップを再度保存して、同じビューに戻るために同じデータを再度取得します(何らかの意味がある場合)。

+0

「Model.MyData」はどのようなタイプのデータですか?ただの文字列ですか? int? – Shyju

+0

onclickを呼び出すビューコードを追加して、より明瞭に表示できますか? – Banners

+0

MyDataはカスタムクラスですが、単純なintを試してみてもまだ動作していないことを確認するだけです。 –

答えて

1

JsonConvert.SerializeObjectメソッドを使用すると、C#モデル/モデルプロパティのシリアル化された文字列バージョンを取得できます。

これは動作するはずです。

var myData = { SelectedRate: rate, 
    SomeOtherData: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.MyData)) }; 
console.log(myData); 

//Use myData variable for the ajax call now. 

また、複雑なjsオブジェクトであるため、このjsオブジェクトを文字列化して、それをajax呼び出しで送信する必要があります。モデルバインディングが失敗しないように、contentTypeとして明示的に"application/json"を指定していることを確認してください。データやクエリ文字列を送信するGETの使用クエリ文字列は、あなたが送信できるデータ量に制限がありますのようにしても、これはあなたの質問に答えながら、あなたはなぜダブルチェックする必要があり

$.ajax({ 
     url: '@Url.Action("SetRate","Home")', 
     type:'POST', 
     data: JSON.stringify(myData), 
     contentType : "application/json",   
     success: function (data) { 
      //call is successfully completed and we got result in data 

     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      //some errror, some show err msg to user and log the error 
      alert(xhr.responseText); 

     } 
}); 

(ブラウザで異なります)HttpPost AJAX呼び出しを行うことを検討しますデータ全体を送り返したいのですか?あなたのサーバーメソッドが必要に応じてモデル/特定のデータを再構築できるユニークなIDを送信することがあります

0

このような動的なものが欲しいですか?

<% foreach(var item in Model.Items)  { %> 

<input type="checkbox" value="@item.value" onclick="RatingClicked(@item.value,@item.value2) /> 

<% } %> 



var RatingClicked = function (rate,otherValue) { 
...... 
関連する問題