2012-07-11 82 views
2

我正在創建一個MVC網站,該網站使用彈出窗口上的部分視圖來處理所有我的CRUD事務。請注意,我的應用程序已經可以完美地處理這些CRUD操作(LINQ-To-Entity)。但是,我的彈出窗體有問題。添加窗體(CRUD)上的ASP.NET MVC Popup部分視圖問題

下面是我_Add.cshtml代碼:

@model MyStore.Models.MyModels.ProductsModel 

@{ 
    Layout = null; 
} 

@using (Ajax.BeginForm("_Add", "Products", new AjaxOptions 
{ 
    InsertionMode = InsertionMode.Replace, 
    HttpMethod = "POST", 
    OnSuccess = "addSuccess" 
}, new { @id = "addForm" })) 
{ 
    @Html.ValidationSummary(true)  
    <div id="add-message" class="error invisible"></div> 

    <fieldset> 
     <legend>Products</legend> 

     @Html.HiddenFor(m => Model.ProductCode) 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.ProductName) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.ProductName) 
      @Html.ValidationMessageFor(model => model.ProductName) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Price) 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.Price) 
      @Html.ValidationMessageFor(model => model.Price) 
     </div> 
    </fieldset> 
} 

下面是我Controller代碼:

[HttpGet] 
public ActionResult _Add(string productCode) 
{ 
    ProductsModel model = newProductsModel(); 
    model.ProductCode = ProductCode ; 
    return PartialView(model); 
} 

[HttpPost] 
public JsonResult _Add(ProductsModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     ProductsManager prod = new ProductsManager(); 
     Products pa = new Products(); 

     pa.ProductCode = model.ProductCode; 
     pa.ProductName = model.ProductName; 
     pa.Price = model.Price; 

     prod.AddProduct(pa); 

     return Json(HelperClass.SuccessResponse(pa), JsonRequestBehavior.AllowGet); 
    } 
    else 
    { 
     return Json(HelperClass.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet); 
    } 
} 

請注意:_Add.cshtml是正在通過彈出渲染的局部視圖.js,我在互聯網上找到。它是通過此代碼呈現的:

@Html.ActionLink("[Add Product]", "_Add", new { ProductCode = @ViewData["ProductCode"] }, new { @class = "editLink" }) 

此作品沒關係。我的意思是它將產品添加到我的數據庫。但我的問題是,在點擊按鈕Proceed,我從頁面得到這個彈出下載對話框:

Screenshot A

有人可以請幫助我?我有一個預感,這是因爲我使用(POST,PUT,GET,DELETE)的HttpMethod,但是我不確定哪一個是正確的,或者如果它確實是第一個問題。

任何幫助將不勝感激! PS。 對不起,很長的文章。


編輯:

這是我跟這個項目的教程:http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/


編輯:

下面是我使用JScript代碼。這跟我跟着的教程基本一樣。我只是在最後一種方法上註釋了幾行。

此外,我正在使用MVC 4.希望這有助於!謝謝!

var linkObj; 
$(function() { 
    $(".addLink").button(); 

    $('#addDialog').dialog({ 
     autoOpen: false, 
     width: 400, 
     resizable: false, 
     modal: true, 
     buttons: { 
      "Update": function() { 
       $("#add-message").html(''); //make sure there is nothing on the message before we continue       
       $("#addForm").submit(); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(".addLink").click(function() { 
     //change the title of the dialog 
     linkObj = $(this); 
     var dialogDiv = $('#addDialog'); 
     var viewUrl = linkObj.attr('href'); 
     $.get(viewUrl, function (data) { 
      dialogDiv.html(data); 
      //validation 
      var $form = $("#addForm"); 
      // Unbind existing validation 
      $form.unbind(); 
      $form.data("validator", null); 
      // Check document for changes 
      //$.validator.unobtrusive.parse(document); 
      // Re add validation with changes 
      //$form.validate($form.data("unobtrusiveValidation").options); 
      //open dialog 
      dialogDiv.dialog('open'); 
     }); 
     return false; 
    }); 

}); 


function addSuccess(data) { 
    if (data.Success == true) { 
     //we update the table's info 
     //var parent = linkObj.closest("tr"); 
     //parent.find(".carName").html(data.Object.Name); 
     //parent.find(".carDescription").html(data.Object.Description); 
     //now we can close the dialog 
     $('#addDialog').dialog('close'); 
     //twitter type notification 
     $('#commonMessage').html("Add Complete"); 
     $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400); 
    } 
    else { 
     $("#add-message").html(data.ErrorMessage); 
     $("#add-message").show(); 
    } 
} 

我註釋掉這兩條線:

$.validator.unobtrusive.parse(document); 
$form.validate($form.data("unobtrusiveValidation").options); 

因爲不評論在運行時他們就會給我下面的錯誤: enter image description here

這使我認爲這個問題是由於不顯眼的驗證。就像下面的Xnake發佈的鏈接一樣,我遇到了同樣的問題。唯一不同的是,線程開啓器必須禁用他的Web.config文件上的不顯眼的驗證來解決問題,而我不能這樣做,因爲我的代碼使用不顯眼的驗證。

任何幫助在這裏非常感謝。非常感謝你!

+0

只是好奇,你能不能粘貼你的js代碼呢?另外,既然你沒有提到你正在使用哪個MVC版本,這可能有幫助嗎? http://stackoverflow.com/a/4892341/605907 – Xnake 2012-07-13 10:19:25

+0

我試着在你給我的線程給出的解決方案(''),但它似乎並不爲我工作。運行期間,我在我的javascript代碼中收到錯誤消息。感謝您的答覆! :) – Smiley 2012-07-16 00:33:27

回答

1

我已經解決了我的問題!顯然,我必須在我的MasterPage上包含以下js文件。希望這可以幫助!

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
0

這是因爲您在_Add(post)中返回JSON數據,因此瀏覽器嘗試下載它而不是呈現它。嘗試在_Add(post)中返回與ActionResult相同的PartialView。希望能幫助到你。

+0

嗨!感謝您的答覆。我已經嘗試將返回類型更改爲ActionResult並返回PartialView。但是,當我這樣做時,系統只會將我重定向到類似於我使用的添加表單的頁面。就像它將局部視圖渲染到新的網頁一樣。如果它可以幫助,這是我的代碼模式:http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/ – Smiley 2012-07-13 08:20:57

0

這可能是因爲JavaScript事件沒有正確綁定或結果沒有在JS中處理。

+0

嗨Sir Covo!我已經添加了我正在使用的jScript代碼。它在你的教程中基本上是一樣的。我只需要改變一些命名約定。非常感謝你! – Smiley 2012-07-16 00:23:15

2

我在試圖找到一個用於輕鬆重複使用的彈出窗口的約定時遇到了類似的問題,有些CRUD有些不是。我沒有在每個頁面上包含驗證腳本,而是在我的佈局中添加了一個名爲scripts的部分,並讓每個頁面添加他們需要的腳本(在這種情況下,輸入驗證腳本(如果我的頁面上有表單元素)。請注意,我將Unobtrusive Ajax腳本保留在默認佈局上,因爲它與驗證無關,並且足夠用於我的頁面以保證將其保留在默認佈局中。

<html> 
<head></head> 
</body> 
    @RenderBody() 
    @RenderSection("Scripts", required: false) 
</body> 
</html> 

在局部模板的情況下,我創建了我只使用已定義有相同的部分,但沒有其他周邊HTML諧音一個新的佈局。

@RenderBody() 
@RenderSection("Scripts", required: false) 

這是一個很原始的例子(特別是因爲它沒有可見的表單元素),但你明白了。

@model Product 
@{ 
    Layout = "~/Views/Shared/_ModalLayout.cshtml"; 
} 
@section Scripts 
{ 
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
} 
<section> 
    <header><h3>Remove Product?</h3></header> 
    Are you sure you wish to remove @Model.Name? 
    @using (Html.BeginForm()) 
    { 
     @Html.AntiForgeryToken() 
     @Html.HiddenFor(x => x.ProductId) 
     <input type="submit" value="Remove" /> 
    } 
</section> 
+0

確實非常有幫助和優雅!感謝這!賞金去找你先生! :) – Smiley 2012-07-20 00:55:53