[英]Display popup dialog box when user clicks button using MVC3 C# asp.net
Can somebody please explain how I can create a dialog box that will appear when the user clicks a button on a webpage. 有人可以解释我如何创建一个对话框,当用户单击网页上的按钮时,该对话框将出现。 I am using the MVC3 framework coding in c# and asp.net. 我在c#和asp.net中使用MVC3框架编码。
Basically, when the user clicks 'Send' - the dialog box will display "message has been sent" and they can close it. 基本上,当用户点击“发送”时 - 对话框将显示“已发送消息”,他们可以关闭它。 In the instance that there were validation errors the dialog box should display it (eg: "Please enter a valid email address and try again"). 在存在验证错误的情况下,对话框应显示它(例如:“请输入有效的电子邮件地址并重试”)。
Kindly explain exactly what code needs to go in which files. 请准确解释哪些代码需要在哪些文件中使用。 ie controller, view, model, scripts, css, etc... 即控制器,视图,模型,脚本,CSS等...
Thanks 谢谢
You have to use Javascript. 你必须使用Javascript。 From C# you should have an OnClientClick
event. 从C#开始,你应该有一个OnClientClick
事件。 Put there you scriptlet like this: 像这样把你的scriptlet放在那里:
OnClientClick="alert('Hello World!');"
Return true
or false
base on if you want the server-side click to happen or not: 如果您希望服务器端单击发生,则返回true
或false
:
OnClientClick="return confirm('Are you sure?');"
If this code is not exactly perfect it will still lead you to the correct solution, because basically there aren't any other options really. 如果此代码是不完全完美的它仍然会导致你正确的解决方案,因为基本上没有任何其他的选择真的。
you can use jQuery UI modal : 你可以使用jQuery UI模式 :
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<div id="dialog-message" title="Download complete">
<p id="messageText">
</p>
</div>
And after click on button you can send ajax request and on success set message in this dialog and show it. 点击按钮后,您可以在此对话框中发送ajax请求和成功设置消息并显示它。
EDIT: 编辑:
<input type = "submit" id="doSomethingButton">
<script>
$(function(){
$('#doSomethingButton').click(function(){
$.ajax({
url:"url-to-send-data",
data:"", // optional
type:"http-method-type", //GET, POST, DELETE, PUT ....
success:function(data){
$('#messageText').text(data);
$('#dialog-message').dialog('open');
}
});
});
});
</script>
看看这些JQuery插件这里肯定有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.