MVC 3在對話框不起作用的部分視圖

我有一個數據表網頁，顯示數據表中的用戶列表。在用戶頁面上有一個按鈕創建新用戶。點擊後會啓動一個模態jQuery對話框，供用戶輸入新用戶的詳細信息。有一個取消按鈕，它只是關閉對話框和一個保存用戶按鈕，點擊調用我的控制器中的DoSaveUser方法。我可以從調試中看到，如果創建用戶成功說出用戶已保存，那麼我將進入DoSaveUser方法，該方法最終應返回到PartialView。然而，我的對話框是你輸入的細節沒有被成功消息取代 - 即使用戶正在創建 - 即 - 我點擊保存按鈕後 - 如果我然後取消對話框並刷新原始用戶頁面，我可以看到數據表與我的新用戶更新。MVC 3在對話框不起作用的部分視圖

UserList頁面上的代碼（對話框中有更多的字段不只是名字，但已刪除它們使問題有更少的代碼）。所以當點擊CreateUser按鈕時，我的newUserDialog被啓動。被點擊該對話框上的保存用戶

<div id="newUserDialog"> 

@using (Html.BeginForm("DoSaveUser", "MyController", FormMethod.Post, new { id = "saveForm" })) 
{ 

    <div id="resultContainer"> 
     <table class="ui-widget-content" style="width: 565px; margin-top: 10px;"> 
      <tr> 
       <td style="width: 100px;"> 
       </td> 
       <td class="label"> 
        Forename : 
       </td> 
       <td class="value"> 
        @Html.TextBoxFor(model => model.Forename, new { style = "width:150px" }) 
       </td> 
      </tr> 
     </table> 
     <div class="ui-widget-content Rounded" style="width: 565px; margin-top: 10px; text-align: center;"> 
      <input id="Cancel" type="button" class="dialog-button" value="Cancel" style="margin: 5px" /> 
      <input id="DoSaveUser" type="submit" class="dialog-button" value="Save User" style="margin: 5px" /> 
     </div> 
    </div> 
}

Javascript代碼 - 提交表單。

$(function() { 
    $('#saveForm').submit(function() { 

     var formData = $("#saveForm").serializeArray(); 

     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: formData, 
      dataType: "json", 
      success: function (result) { 
       $('#resultContainer').html(result); 
      } 
     }); 
     return false; 
    }); 
});

現在在我的控制我的DoSaveUser方法，我可以設置一個斷點並擊中並查看正確發送的對應字段中的所有值 - 一旦我被保存到數據庫，這是回報。

return PartialView("UserSuccess", model);

這是所有視圖包含了我想要的是結果div容器包含我所有的文本字段和標籤與用戶已成功建立被替換的cshtml..note。然後我需要在這個頁面上確定一個點擊它將關閉對話框並刷新UserList頁面並顯示用新用戶更新的數據表。然而，當我點擊保存文本框只是保持在Div和Div不會改變 - 但如果我然後取消對話框並刷新頁面，我可以看到數據表更新與我的新用戶。有什麼我失蹤？（注意 - 我已經添加jquery.unobtrusive-ajax.js我_layout頁）

@model MyProject.Models.UserModel 
@{ 
    ViewBag.Title = "UserSuccess"; 
} 
<div id="resultContainer"> 
User Created Successfully 
</div>

來源

2013-01-12 Ctrl_Alt_Defeat

你確定你的初始HTML確實有#resultContainer DIV？如果你不是

$('#resultContainer').html(result);

行不會匹配任何東西。另一方面，如果你這樣做，你會得到重複的嵌套#resultContainer divs，這也是一個錯誤（id必須是唯一的）。

做正確的方法是在你原來的HTML添加一個空div：

<div id="resultContainer"></div>

而且在你看來只輸出內容去DIV中。

@model MyProject.Models.UserModel 
@{ 
    ViewBag.Title = "UserSuccess"; 
} 
User Created Successfully

來源

2013-01-12 15:37:57

感謝您的回覆 - 我已根據您的建議編輯了代碼（是的，我的初始頁有#resultContainer div - 在使用後僅查看它 - - 但正如您所建議的，我有c它遊離缺失可能是不正確的地方 - 它現在已經關閉在同一條線上，你建議，並從局部視圖頁面刪除 - 然而仍然沒有得到它的工作。一件事是我添加了一個警告成功：function（result）{alert（'我在這裏'）; $（'＃resultContainer'）。html（result）; }從來沒有彈出在我的網頁上？ –

那麼你的成功處理程序顯然不會被調用。你的html視圖是否返回沒有錯誤？按下Ctrl + Alt + E並在異常情況下啓用中斷以查看調試器中的視圖是否有異常。 –

乾杯 - 才意識到我已經傻 - 我有我的JS對於在不需要爲我的JS是包含在頂部的document.ready聲明不同的文件的額外函數聲明提交。 –

我必須說你在做什麼不是在ASP.NET MVC應用程序中使用對話框和局部視圖的好方法。我可以給你一些簡單的代碼來展示一個想法：

如果list.cshtml是一個用戶列表頁面，而edit.cshtml是一個具有編輯表單的局部視圖。

在目錄頁：

$(".grid-row .edit").click(function(){ 
    editUser($(this).attr("data-id")); 
}); 
function editUser(id){ 
    var $dialog=$("#dialogEditUser"); 
    if($dialog.length == 0){ 
    $dialog=$("<div id='dialogEditUser'>").appendTo("body"); 
    } 
    $dialog.dialog({ 
    ... 
    open:function(){ 
     $dialog.load("/user/edit/"+id, function(){ 
      //todo: handle form events 
     }); 
     } 
    }); 
    $dialog.dialog("open"); 
}

您也可以打開的對話框功能在靜態方法，如：

MvcSolution.Dialog = function (id, title, options) { 
    var $dialog = $("#" + id); 
    if ($dialog.length == 0) { 
    $dialog = $("<div id='" + id + "' class='dialog' title='" + title + "'></div>").appendTo("body"); 
    } 
    $dialog.dialog(options); 
    $dialog.dialog("open"); 
};

你可以找到一個很好的C＃和js框架MVC here

來源

2013-01-12 16:00:07

MVC 3在對話框不起作用的部分視圖

回答

相關問題