web-dev-qa-db-ja.com

MVC 3でパーシャルビューのロード時にJavaScript関数を実行する方法

\\code
public ActionResult mapPartial(DataTable dt)
        {
            string strEvents = "[";
            foreach (DataRow row in dt.Rows)
            {
                strEvents += "[" + row["Lat"].ToString() + ", " + row["Long"].ToString() + ", " + "\"" +
                row["LastName"].ToString() + row["DateOfBirth"].ToString() + "\"" + "],";
            }
            strEvents = strEvents.Remove(strEvents.LastIndexOf(","));
            strEvents += "]";

            ViewBag.locpoints = strEvents;

            return PartialView(dt);
        }

//in the partial view page
<script type="text/javascript">
       function mapInit(Viewbag.locpoints) {

              var arr = $.parseJSON(Viewbag.locpoints);
              //more code which assigns a map to div map below 
       }
</script>

<div id="map" class="map"></div>

部分ビューが読み込まれたときに、JS関数をすぐに呼び出してマップをレンダリングする方法を教えてください。コントローラの部分的なメソッドは、JS関数のパラメータとして使用される文字列を返します。それが理にかなっていると思います。

javascriptasp.net-mvcpartial-views
12
user2906420

あなたはJQueryを使用しているように見えるので、なぜですか：

<script type="text/javascript">
       $(document).ready(function(){
              var arr = $.parseJSON("@Viewbag.locpoints");
              //more code which assigns a map to div map below 
       });
</script>

また、ViewBag値の参照方法も変更しました。これは、JavaScriptの文字列リテラルではないためです。

また、補足として、JSONシリアライザーを使用してデータをJSONに変換することを検討してください。上記のように手動で行うことは悪い習慣と考えられています。

4
marteljn

定義したら、それを呼び出すだけです。ただし、JS関数の定義にMVC Viewbag値を含めているようです。 JSメソッドを呼び出すときに、これらの値を渡す必要があります。

<script type="text/javascript">
       function mapInit(locPoints) {    
              var arr = $.parseJSON(locPoints);
              //more code which assigns a map to div map below 
       }
       mapInit(@(Viewbag.locpoints));
</script>

注：これは、jQueryがロードされていることを前提としています。

2
Andrés Nava - .NET

JQuery経由でコントローラーを呼び出してみてください。

$(document).ready(function () {
 $.ajax({
            type: 'GET',
            url: 'your_controller_url',
            success: function (data) {

                //Do your stuffs here
            }
        });
}
1
Carlos Coelho

よりシンプルなソリューションを実装しました。

_Layout.cshtmlの後の@RenderSection("scripts", required: false)（およびJqueryなど）

<script>
    $(document).ready(function () { if (typeof partialScript !== "undefined") partialScript();});
</script>

次に、部分ビューで：

<script type="text/javascript">
function partialScript() {
    alert("hi");
}
</script>

これにより、次のことが保証されます。

  • jQueryが読み込まれる
  • すべてのメインビュースクリプトが読み込まれます
  • DOMは準備ができています
1
Informitics

OnSuccess Ajaxオプションの使用を検討し、jqueryが記述されているJavaScript関数を接続してください。たとえば、部分的なビューを呼び出す次のスクリプトがmainViewに記述されています。部分ビューのアンカータグがクリックされたときに何かしたいとします

var fromPartial=function()
            {
                var v = $(this).closest("div");
                var mId = v.attr('id');
                if (mId == 'divDetail') {
                    event.preventDefault();
                    //what you want to achieve
                }
            }

部分ビューで、アンカータグが次のように作成されます。

           @Ajax.ActionLink("Select", "AssignSpeaker", new { 
        conferenceId = ViewBag.ConferenceId, sessionId = session.Id },
                                 new AjaxOptions() { HttpMethod="Get",
     InsertionMode= InsertionMode.Replace, UpdateTargetId="yourTarget",
 OnSuccess="fromPartial" })
1
Shalin

これを行う唯一の方法は、JQueryを使用してコントローラーアクションを呼び出し、部分的なビューを返すようにすることです。 Jqueryを使用して、部分ビューが移動するページのセクションを更新してから、マップをレンダリングするJavaScriptメソッドを呼び出します

0
Gjohn