在 ASP.net MVC4 中使用模态弹出窗口添加/编辑/删除

Question

我花了很多时间来了解如何使用模态弹出窗口，但我还没有找到任何好的答案，或者我应该说明完整的工作代码。

我正在寻找一种使用 MVC HTTPGET、HTTPPOST 方法的方法，并且在 Javascript 或 Ajax 中不应有硬编码的属性名称

这是我到目前为止能够实现的目标：

我对 AJAX、JQUERY 还很陌生

主要错误：我无法在此处正确使用 SAVE 按钮，即 HTTPPOST 操作未在 Internet Explorer 和 Chrome 中调用，但在 Firefox 中有效

1. Approach based on this link 但它没有在 Internet Explorer 中运行。问题：HTTPPOST 操作无法在 Internet Explorer 或 Chrome 中调用
2. Tried to follow his complete article 但不喜欢使用 JSON 和执行验证的方式。
3. Jquery UI modal form: Want to use feature like this 但不知道如何在其中使用 ASP.net MVC4 HTTP GET 和 HTTP POST。
4. Tried this demo too but :(
5. This one was good, tried to implement by using his complete source code but still could not able to work
6. ASP.net MVC Modal 对此抱有太大希望。下载，尝试在 2-3 小时后实现所有内容，即使这不是它所说的“准备使用”。 More information about it
7. Code project: Comparison of three jquery modal 虽然它在 ASPX 中，但仍然尝试实现。 （没有成功:()

尝试了其他几个解决方案，每个解决方案都有自己的问题。可能这些帖子中的一些是旧的，并且 jquery 版本已经过时了一些控制。

此功能已被大量使用和讨论，因此如果有人有工作代码，请分享。

代码这是我的完整代码：http://pastebin.com/yNH7CFTS

错误提示我不确定这是否是问题，但在 Internet Explorer 中，当我按下保存按钮时，对话框关闭，调用 HTTPPost 操作，浏览器中的 url 是：

http://localhost:53381/Project/Details/1?ProjectId=1&Effort=0&Cost=56  

值 1 ,0 ,56 是我在文本框中输入的内容

任何人都可以使用 RESTFUL 方法在 asp.net MVC 中发布有关 MODAL / POPUP 的完整答案。

Answer 1

使用 $.post jquery 方法调用您的 httppost 控制器操作，如下所示：

$.post(
    "addressofaction",
        {}).done(function () {
            alert("do something"
            })
        }).fail(function () {
            alert("error");
        })

Answer 2

我无法对其进行测试，我只是尽可能地简化了我之前为具有大量自定义功能的 Web 应用程序编写的代码。

查看

@using (Html.BeginForm("PostAction", "A" , FormMethod.Post ,new { @class = "modal-form", id = "asd" }))
{
<div class="modal-header">Header</div>
<div class="modal-body">
.........
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-success">Save</button>
}

假设是 AController

[HttpPost]
public JsonResult PostAction(PostModel model)
{
    return Json(true);
}

和最新版本的jQuery

$(document).on("submit", 'form.modal-form', function (e)
{
   e.preventDefault();
   var form = $(this);
   $.ajax({
                url:form.attr("action"),
                type:"POST",
                data:form.serialize(),
                contentType:"application/json; charset=utf-8",
                success: function(result){
                    if (result) {
                           //Returns true
                    }
                    else {
                        //Returns false
                    }
                }
            });
}

Answer 3

最后发现问题不在于方法，而在于“DialogDiv”代码的放置。

What's the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap? 建议的方法绝对是解决这个问题的好方法。这是我做错了什么。

我在“index.cshtml”中写了这个

<!-- Estimated Effort Region -->
   <div class="span5">
      <h4>
              Estimated Effort
        <!-- Open  Bootstrap Modal using this link -->
         @Html.ActionLink("Create", "Create", null, null, 
              new { id = "btnCreate", @class = "btn" })
        <div id='dialogDiv' class='modal hide fade in'>
            <div id='dialogContent'></div>
       </div>
      </h4>                   

     <!-- Table on project details page -->
     <table class="table">
          <!-- Stuff related to displaying table -->
     </table>
  </div>

但是，模态对话框 div 不应该在 index 视图代码中。即这应该完全在 Index 视图代码之外。

它不会在Best approach for Modal 建议的代码中重现，因为这涉及非常基本的代码。

<div id='dialogDiv' class='modal hide fade in'>
    <div id='dialogContent'></div>
</div>

可能会帮助某人。