mvcビューでjqueryダイアログを使用してテーブルを編集

Question

MVC 3 + Razorを使用しています。私は詳細と呼ばれるMVCビューを持っています。 SQL ServerのデータベーステーブルからDetailsデータを取得して表示しました。私はClickable <a/>列 "タイプ"を持っています。 [タイプアンカー]リンクをクリックするJqueryポップアップを表示します。

| type  | date | completed | 
|________________________________ _| 
|   |   |   | 
| sample | 1/1/2012 |   | 
|(Clickable)| 

1. どのように私は、SQLサーバーのテーブルからのClicked要素に関連した行全体のデータを盗んとデータのjQueryのDialog.Everyタイプフィールドは、それに関連付けられたIDを持っていることを表示します。

2. Jquery Dailogにチェックボックスがあります。選択されている場合、ビュー内の[完了]列には現在の日付が必要で、データベースの更新が必要です（日付フィールドを含む）。

コードサンプルやリンク、チュートリアルを検索すると、編集や追加機能で何かを見つけることができませんでした。

Answer 1

私はasp.netまたはrazorに精通していませんが、jQueryを使用すると、まずスクリプトがSQLデータを読み込んでJSON文字列に変換して送信するサーバーにajaxリクエストを行いますそれはjQueryに戻ります。 jQueryはJSONを解析し、フィールドに値を設定します。

jQuery（一般的なJavaScript）で日付を扱うのは、サーバーのものではなくクライアントのマシンに基づいているため、扱いにくいことがあります。私は、サーバーを現在の日付に対してチェックし、データベースの更新を処理させるように、もう一度ajaxを実行することをお勧めします。

Answer 2

ポップアップの部分表示を使用し、要件に応じてUIを作成し、行の詳細をモデルとしてこの部分表示に渡します。

あなたのテーブルのHTMLは

<tr id="@model.rowid"> 
     <td> 
      sample 
      (<a onclick="RowDetails(@model.rowid)">Clickable</a>) 
     </td> 
     <td> 
      1/1/2012 
     </td> 
     <td> 
     </td> 
    </tr> 

Clicktableのクリックで呼び出しjavascript関数のように、

function RowDetails(RowId) { 
     $("#divDetails").load('/yourController/rowdetail', { id: RowId }).dialog({ 
      modal: true, 
      title: "Row Detail", 
      height: 400, 
      width: 600, 
      buttons: { 
       "Ok": function() { 
        var isComplete = 0; 
        if ($("#rowComplete").is(":checked")) { isComplete = 1; } 
        $.get("/yourController/RowComplete", { id: RowId, isChk: isComplete }, function (d) { 
         $("#" + RowId).before(d).remove(); 
         $("#" + RowId).hide().fadeIn('slow'); 
        }); 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    } 

と

public ActionResult rowdetail(int id) 
{ 
// code to get row from databse 
// return this row as object to partial view 
return("partial view for row details", Object); 
} 

public ActionResult RowComplete(int id, int chk) 
{ 
// code to update row from databse 
// return this row as object 
return("pass updated row", Object); 
}