2012-07-11 47 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