2017-05-23 20 views
0

index.cshtmlに次のコードがあります。FoursquareInfoオブジェクトが作成されています。クリック数にC#razorオブジェクトが定義されていません

@using WebMatrix.Data; 
@using CanYouPay.Models.FoursquareAPI; 
@{ 
    FoursquareInfo fsInfo = new FoursquareInfo(); 
    Checkins response = new Checkins(); 
    Checkin checkins = new Checkin(); 
    List<RootItem> items = new List<RootItem>(); 
    RootItem item = new RootItem(); 
    Venue venue = new Venue(); 
    Location loc = new Location(); 
    loc.lat = 51.19189444478925; 
    loc.lng = 4.664656084372357; 

    venue.location = loc; 
    item.venue = venue; 
    items.Add(item); 
    checkins.items = items; 
    response.checkins = checkins; 
    fsInfo.response = response; 
} 

私がクリックしたときにupdateMap(fourSquareInfo)メソッドが呼び出されindex.cshtmlのための私のhtmlコードでdiv要素を持っています。

<div id="mapBtn" onclick="updateMap(@fsInfo)" class="btn btn-success btn-lg col-md-2 pull-right">Show Map!</div> 

マイupdateMap機能は次のとおりです。

function updateMap(foursquareInfo) { 
    var uluru = { lat: 20, lng: 30 }; 
    var map = new google.maps.Map(document.getElementById('googleMap'), { 
     zoom: 4, 
     center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
} 

はい、テスト目的のために、私は渡されたfoursquareInfoオブジェクトに何もしない - I latlong値はfoursquareInfoものに置き換えられますonClickイベントが発生したときに発生するエラーを修正できます。

CanYouPayはHTMLDivElement.onclicでは定義されていませんkenter image description here

html/razor/jsコードで何が問題になっていますか?

私のコメントを1として

enter image description here

+0

申し訳ありませんが、私はあなたがクリック方法で得られるエラーを取得していません。 – Rex

+1

あなたはあなたのjsにAC#オブジェクトを渡そうとしているようです。そのボタンのソースを見ると、おそらくCanYouPayを含む何らかのテキストになり、js変数として定義していないので、エラーが発生すると、jsオブジェクトを作成してC#オブジェクトの値をマップするか、一連の文字列を渡す必要があります – Pete

+0

@Pete mmhが可能です – Smut

答えて

1

:あなたのJSにAC#オブジェクトを渡すためにしようとしているように見える - あなたがそのボタンの上にソースを表示する場合、おそらくCanYouPayを含むいくつかのテキストになるだろうとあなたが持っているとされますjs変数として定義されていない場合、エラーがスローされます。jsオブジェクトを作成してC#オブジェクトの値をマップするか、文字列を渡す必要があります。

オプション1 jsオブジェクトを作成します。あなたのC#オブジェクトと一致し、あなたの剃刀で値をマップすることができます:

<script> 
    // this needs to be in your razor before the onclick (so object is created before you use it) 
    var fsJSObject = new fsJSObject(); // this object should match your c# object 
    fsJSObject.StringValue = '@fsInfo.StringValue'; // this needs to be the final value - eg a string, int, date, etc - cannot be another object, otherwise you will get a similar mistake to above 
    fsJSObject.IntValue= @fsInfo.IntValue; 

    // pass fsJSObject into your onclick function 
</script> 

オプション2、私は私が見るかみそりを使用して次のことを同じページを構築しようとすると、文字列の前後に引用符が

+1

JSONライブラリを使ってc#オブジェクトをJSで扱いやすいJSONに変換するとよいでしょう。 – Chris

+0

@Smut: '@ fsInfo'を実行したときにこれが何をするのかという追加の文脈では、そのオブジェクトに対して' ToString'を呼び出してページに入れることができる文字列を取得します。デフォルトの 'ToString'実装をオーバーライドしていない場合は、' CanYouPay.Models.FoursquareAPI.FoursquareInfo'と仮定してクラス名を出力します。 JSはもちろん、それを「CanYouPay」が見つからないと結論づけるJS表現として扱うことを試みるでしょう。 – Chris

+1

@Smutはchrisの最初のコメントと一緒に行くことができます私は通常、ニュージャージー州のntonet jsonパッケージをdeserialisingとjsonに私のC#をシリアライズするためにインストールします – Pete

1

値関数に直接

onclick="updateMap('@fsInfo.StringValue', @fsInfo.IntValue, '@fsInfo.AnotherStringValue')" 

お知らせ値を渡します私のページで:

<div id="mapBtn" onclick="updateMap(WebApplication1.Models.FoursquareInfo)" class="btn btn-success btn-lg col-md-2 pull-right">Show Map!< /div> 

あなたがわかるように、Razorはクラス名を言うオブジェクトを直接設定します。

<div id="mapBtn" onclick="updateMap(@loc.lat, @loc.lng)" class="btn btn-success btn-lg col-md-2 pull-right">Show Map!< /div> 

し、サーバー側の呼び出しでオブジェクトを構築し、あなたがそれをやりたい:この場合、私は直接のように、コール内の位置番号を設定するために助言します。サーバーに新しい呼び出しを行うたびにオブジェクトを再構築する必要があることを忘れないでください。オブジェクトはメモリに保持されません。実際に必要とするビュー内の情報は、サーバー側のオブジェクト全体ではなく、単に配置することをお勧めします。

関連する問題