2013-05-21 75 views
1

我有一個表格,其中包含我的基本數據和3個按鈕,用於刪除,創建和更新哪些返回PartialViews。MVC3使用數據剃鬚刀重新加載頁面的一部分

我想在點擊相應對話框中的提交按鈕(刪除,更新...)後用數據更新我的頁面部分。

達到此目的的最簡單方法是什麼?

這就是我現在得到的 我只是添加,刪除大多是一樣的。

<div id="delete-dialog" title="Delete Product"></div> 
<script type="text/javascript" > 
$(".deleteLink").button(); 

    var deleteLinkObj; 
    // delete Link 
    $('.deleteLink').click(function() { 
     deleteLinkObj = $(this); 
     var name = $(this).parent().parent().find('td :first').html(); 
     $('#delete-dialog').html('<p>Do you want delete ' + name + ' ?</p>'); 
     //for future use 
     $('#delete-dialog').dialog('open'); 
     return false; // prevents the default behaviour 
    }); 

    $('#delete-dialog').dialog({ 
     dialogClass: "ConfirmBox", 
     autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options 
     buttons: { 
      "Continue": function() { 
       $.post(deleteLinkObj[0].href, function (data) { //Post to action 
        if (data == '<%= Boolean.TrueString %>') { 
         deleteLinkObj.closest("tr").hide('fast'); //Hide Row 
        } 
        else { 
        } 
       }); 
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
</script> 

並且在對話框關閉後,我想要重新加載部分頁面。

的數據看起來像

<table> 
    <tr> 
     <th>  Name  </th> 
     <th>  Date </th> 
     <th>    </th> 
    </tr> 


@foreach (var m in this.Model) 
{ 
    <tr> 
    <td> 
    <div class="ProductName">@Html.DisplayFor(Model => m.Name)</div> 
    </td> 
    <td> 
    @Convert.ToDateTime(m.AddDate).ToShortDateString() 
    </td> 
    <td> 

    <div class="ProductPrice">@string.Format("{0:C}", m.Price)</div> 
    </td> 

    <td> 
     <div class="CategoryName">@Html.DisplayFor(Model => m.CategoryName)</div> 

    </td> 
    <td> 
    @Html.ActionLink("Edit", "Edit", new { id = m.ID }, new { @class = "editLink" }) 
    @Html.ActionLink("Delete", "Delete", new { id = m.ID }, new { @class = "deleteLink" }) 
    </td> 
    </tr> 
} 
</table> 

我不確定是不是我做的這口井 我試圖把這個動作後,點擊該按鈕,但螺母肯定是否是正確的 我改變了指數的偏查看

buttons: { 
      "Continue": function() { 
       $.post(deleteLinkObj[0].href, function (data) { //Post to action 
        if (data == '<%= Boolean.TrueString %>') { 
         deleteLinkObj.closest("tr").hide('fast'); //Hide Row 
        } 
        else { 
        } 
       }); 
       $.ajax.ActionLink("Index", 
       "Index", // <-- ActionMethod 
       "Shop", // <-- Controller Name. 
       new { }, // <-- Route arguments. 
       null // <-- htmlArguments .. which are none. Y 
       ) 
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
+0

請出示到目前爲止你有什麼,並嘗試使用正確的拼寫和標點,你的問題是很難閱讀。 – Gorgsenegger

+0

如果您想更改頁面的某些部分,您應該查看「Ajax.ActionLink」和「PartialView」的文檔。 – Gorgsenegger

+0

好吧所以我想我的索引應該是像其他人一樣的局部視圖,然後我使用actionLink謝謝我想我會爲我找到正確的:P – Dox

回答

1

我建議你使用ASP.NET MVC ActionLink的助手在.cshtml文件,而不是jQuery的:

[...] 
<script type="text/JavaScript"> 
function openPopup() 
{ 
    // Set your options as needed. 
    $("#yourPopupDialogId").dialog("open"); 
} 
</script> 
[...] 
@Ajax.ActionLink( 
    "Delete", 
    "Delete", 
    "Controller", 
    new { someValue = 123 }, 
    new AjaxOptions 
    { 
     // Set your options as needed 
     HttpMethod = "GET", 
     UpdateTargetId = "yourPopupDialogId", 
     OnSuccess = "openPopup()" 
    } 
) 
[...] 
<div id="yourPopupDialogId" style="display: none;"></div> 

現在在你的控制器,你要使用你的彈出窗口的方法,你應該返回PartialView S:

public ActionResult Delete(int id) 
{ 
    RecordDeleteModel model = YourRepository.GetModel(id); 
    return PartialView(model); 
}