jQuery 在 ASP.net MVC4 中使用模态弹出窗口添加/编辑/删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17458843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ADD / EDIT / DELETE using Modal popup in ASP.net MVC4
提问by Rohit
I've spent plenty of time in understanding how to use modal popup but I've not found any good answer yet or I should state Full working code.
我花了很多时间来理解如何使用模态弹出窗口，但我还没有找到任何好的答案，或者我应该说明完整的工作代码。
I'm looking for an approach which uses MVC HTTPGET, HTTPPOST methods and In Javascript or Ajax should not have hardcoded property names
我正在寻找一种使用 MVC HTTPGET、HTTPPOST 方法和在 Javascript 或 Ajax 中不应具有硬编码属性名称的方法
Here is what I'm able to achieve till now:
这是我迄今为止能够实现的目标：
I'm fairly new to AJAX, JQUERY
我对 AJAX、JQUERY 还很陌生
Main Error: I'm not able to properly use SAVE button here i.e. HTTPPOST action is not called in Internet Explorer and Chrome , though that works in Firefox
主要错误：我无法在此处正确使用 SAVE 按钮，即 HTTPPOST 操作未在 Internet Explorer 和 Chrome 中调用，但在 Firefox 中有效
- Approach based on this linkbut it did not workout in Internet Explorer. Issue: HTTPPOST action does not call in Internet Explorer or Chrome
- Tried to follow his complete articlebut Did not like the way JSON is used and validation is performed.
- Jquery UI modal form: Want to use feature like thisbut no idea how to use ASP.net MVC4 HTTP GEt And HTTP POST in this.
- Tried this demo too but :(
- This one was good, tried to implement by using his complete source code but still could not able to work
- ASP.net MVC ModalHad too much hope from this one. Downloaded, tried to implement everything after 2-3 hours realized even this one is not "Ready to use" as it states. More information about it
- Code project: Comparison of three jquery modalThough it was in ASPX but still tried to implement. (Did not work out :()
- 基于此链接的方法，但它没有在 Internet Explorer 中锻炼。问题：HTTPPOST 操作不会在 Internet Explorer 或 Chrome 中调用
- 试图遵循他的完整文章，但不喜欢使用 JSON 和执行验证的方式。
- Jquery UI modal form：想要使用这样的功能，但不知道如何使用 ASP.net MVC4 HTTP GEt 和 HTTP POST。
- 也试过这个演示，但是:(
- 这个不错，用他的完整源码尝试实现了，还是不行
- ASP.net MVC Modal对这个寄予厚望。下载后，尝试在 2-3 小时后实施所有内容，意识到即使这不是“准备使用”，正如它所说的那样。关于它的更多信息
- 代码项目：三种jquery modal的比较虽然是在ASPX但是还是尝试实现了。（没有解决:()
Tried couple of other solutions, each one having its own issues. May be some of these posts are old and jquery version have obsoleted few control.
尝试了其他几个解决方案，每个解决方案都有自己的问题。可能这些帖子中的一些是旧的，jquery 版本已经过时了一些控件。
This feature is pretty much used and discussed so if someone has working code then please share.
此功能已被广泛使用和讨论，因此如果有人有工作代码，请分享。
CODEHere is my complete code: http://pastebin.com/yNH7CFTS
代码这是我的完整代码：http: //pastebin.com/yNH7CFTS
ERROR HINTI'm not sure if this is the problem but in Internet Explorer when I press Save button then dialog closes which calling HTTPPost action and the url in browser is :
错误提示我不确定这是否是问题，但是在 Internet Explorer 中，当我按下“保存”按钮然后关闭调用 HTTPPost 操作的对话框，并且浏览器中的 url 是：
http://localhost:53381/Project/Details/1?ProjectId=1&Effort=0&Cost=56
Where values 1 ,0 ,56 are what I enter in textboxes
其中值 1 ,0 ,56 是我在文本框中输入的内容
Anyone can please post a complete answer for MODAL / POPUP in asp.net MVC with RESTFUL methods.
任何人都可以使用RESTFUL方法在asp.net MVC中发布MODAL / POPUP的完整答案。
采纳答案by Rohit
Finally found that issue was not with the approach but was with placement of "DialogDiv" code.
最后发现问题不在于方法，而在于“DialogDiv”代码的放置。
The approach suggested at What's the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap?is definitely neat and good approach for this. Here is what I was doing wrong.
在建议的做法是什么叫使用Twitter的引导在ASP.NET MVC模式对话框的最佳方式？这绝对是整洁和好的方法。这是我做错了什么。
I had written this within "index.cshtml"
我在“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>
However, the Modal dialog div should not be with-in the indexview code. i.e. This should be totally outside of Indexview code.
但是，模态对话框 div 不应包含在索引视图代码中。即这应该完全在索引视图代码之外。
It won't be reproducible in the code suggested at Best approach for Modalas that involves very basic code.
它不会在模态最佳方法中建议的代码中重现， 因为它涉及非常基本的代码。
<div id='dialogDiv' class='modal hide fade in'>
<div id='dialogContent'></div>
</div>
Might help someone.
可能会帮助某人。
回答by Jamesla
Use the $.post jquery method to call your httppost controller actions like this:
使用 $.post jquery 方法调用您的 httppost 控制器操作，如下所示：
$.post(
"addressofaction",
{}).done(function () {
alert("do something"
})
}).fail(function () {
alert("error");
})
回答by G?khan Girgin
I couldn't test it, I just simplified as much as possible the code that I've written before for a web app with a lot of customizations.
我无法对其进行测试，我只是尽可能地简化了我之前为具有大量自定义功能的 Web 应用程序编写的代码。
View
看法
@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>
}
Let's say it AController
让我们说它AController
[HttpPost]
public JsonResult PostAction(PostModel model)
{
return Json(true);
}
and jQuery with latest version
和最新版本的 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
}
}
});
}
