2016-03-23 31 views
0

私はちょっと変わったシナリオがあります。私は、ASP.NET MVCフレームワークを使用してサイトを作成しています。これには、ユーザーの画像、情報などを含むプロファイルページが含まれています.Ajaxアクションリンクを使用して部分ビューを読み込むProfileというビューがdivにあります。次に例を示します。MVCの部分表示内でリダイレクト

@Ajax.ActionLink("Basic Info", "Index", "BasicInfo", 
    new {id=Model.UserName},new AjaxOptions 
    { 
     InsertionMode = InsertionMode.Replace, 
     UpdateTargetId = "content", 
     HttpMethod = "GET" 
    }) 

BasicInfoのインデックスアクションは、ユーザーの基本情報を示しています。私はその部分的なビューで編集リンクを押して、別のアクションメソッドを読み込んだときに編集して値を編集できるようにしたい(別の部分的なビュー)。

1)コントローラが必要なので、ASP.NETのマスターページに似ていてもプロファイルをレイアウトしませんでした。独自のコントローラを持つレイアウトを作成する方法はありますか?

2)ポストバックを行わずに、つまり編集ビューに以前にAjaxによって呼び出された部分ビューを保持するdivを更新することなく、部分ビュー内でリダイレクトを行うにはどうすればよいですか?

3)これはすべて意味があることを願っています。人の基本情報を含むプロファイルが表示され、そのビュー内でeditを押すと、その基本情報コントローラの編集ビューがポストバックを行わずにdivにロードされます。これを達成する最良の方法は何でしょうか?

答えて

2

これは、Ajax.ActionLink()Ajax.BeginForm()のメソッドではなく、jQueryのajaxメソッドを使用する方が簡単です。メインビューで

<button type="button" class="details" data-id="Model.UserName">View details</button> 
<div id="content"></div> 

var detailsUrl = '@Url.Action("Details", "User")'; 
var editUrl = '@Url.Action("Edit", "User")'; 
// Display the details view 
$('.details').click(function() { 
    $.get(detailsUrl, { id: $(this.data('id') }, function(response) { 
     $('#content').html(response); 
    }); 
}); 
// Display the edit view 
$('#content').on('click', '#edit', function() { 
    $.get(editUrl, { id: $(this.data('id') }, function(response) { 
     $('#content').html(response); 
    }); 
}); 
// Post the edit form and replace with the updated details view 
$('#content').on('click', '#save', function() { 
    var id = $(this).data('id'); 
    var data = $(this).closest('form').serialize(); 
    $.post(editUrl, data, function(response) { 
     if (response) { 
      $.get(detailsUrl, { id: id }, function() { 
       $('#content').html(response); 
      }); 
     } else { 
      // Oops 
     } 
    }).fail(function (result) { 
     // Oops 
    }); 
}); 

上記は、以下の方法の部分的なビューが

_Details.cshtml

@model UserModel 
.... // display properties of the model 
<button type="button" id="edit" data-id="Model.UserName">Edit</button> 

_Edit.cshtml

ある

public PartialViewResult Details(int ID) // or string? 
{ 
    // Get the user model based on the ID 
    return PartialView("_Details", model); 
} 
public PartialViewResult Edit(int ID) // or string? 
{ 
    // Get the user model based on the ID 
    return PartialView("_Edit", model); 
} 
public JsonResult Edit(UserModel model) // replace with the name of your model 
{ 
    // Save the model 
    return Json(true); // indicate success 
} 
UserController

とを想定しています

@model UserModel 
<form> 
    .... // controls for properties of the model 
    <button type="button" id="save" data-id="Model.UserName">Save</button> 
</form> 
+0

これは素晴らしいですね!しかし、特定のイベントの処理がビューの外に存在する場合、これは細部および編集ビューのカプセル化ルールを含む何らかの自己を破ることはありません。私はまた、それぞれの独自のロジックを持つ複数のビューをそれぞれ独自の編集および保存URLでロードする必要があります。 – Eitan

+0

いいえ、まったくありません。しかし、私はちょうど答えの基本的な構造を与えたことに注意してください。考慮すべき他の多くのことがあります。クライアント側の検証があります。その場合、保存する前にトリガーする必要があります。 –

0

私は物事を誤解している可能性があります。 私はあなたがページのその部分の編集ビューのためにページの一部の表示ビューを反転しようとしていると思います。

直接参照するコードが不十分なため、一般的なものにしておきます。

さまざまなクリックに対してjavascriptイベントハンドラを登録する必要があります(別のファイルのjqueryクロージャでは自分の好みです)。これらのハンドラは、(部分ビューを返す)アクションが必要なものを要求する必要があります。

誰かが編集リンクをクリックすると、ハンドラは/ GetEditStuffアクションを呼び出して部分ビューを取得し、成功すると親divの以前のコンテンツを消去し、部分ビューで置き換えます。

関連する問題