如何在mvc中单击按钮时生成模式弹出窗口 [英] How to generate modal pop up on button click in mvc
本文介绍了如何在mvc中单击按钮时生成模式弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不工作
Not working
@model Inspinia_MVC5.Models.Message
@{
ViewBag.Title = "My chat";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<title>MyChat</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$("#modelopen").live("click", function () {
debugger;
$("#window").dialog({
title: "Send message",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
<script type="text/javascript">
function Send() {
debugger;
var sender = $("#txtSender").val();
var receiver = $("#txtReceiver").val();
var msg = $("#txtMsg").val();
if (sender != '' && receiver != '' && msg != '') {
$.ajax({
type: 'POST',
url: "@(Url.Action("SendMsg", "Mailbox"))",
dataType: 'json',
data: { Sender: sender, Receiver: receiver, Msg: msg },
success: function (data, textStatus, jqXHR) {
$("#txtSender").val('');
$("#txtReceiver").val('');
$("#txtMsg").val('');
$("#lblMsg").text('Message sent.');
$("#lblMsg").show();
},
error: function () {
alert('error');
}
});
}
}
</script>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Send Message</h5>
</div>
<div class="ibox-content">
<div>
</div>
<div class="row">
<div class="col-sm-12">
<br />
<button id="modelopen" class="btn btn-info">Open Dialog</button>
</div>
</div>
</div>
</div>
</div>
@using (Html.BeginForm("Mychat", "Mailbox", FormMethod.Post, new { id = "SendMsg" }))
{
@Html.AntiForgeryToken()
<div id="window" title="basic dialog model" style="display:none;" >
<div class="form-horizontal">
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "control-label col-md-2" })
<div class="col-md-8">
@Html.TextBoxFor(model => model.UserName, new { @id = "txtSender", @onclick = "HideSender();" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Receiver, new { @class = "control-label col-md-2" })
<div class="col-md-8">
@Html.TextBoxFor(model => model.Receiver, new { @id = "txtReceiver", @onclick = "HideReceiver();" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.MessageText, new { @class = "control-label col-md-2" })
<div class="col-md-8">
@Html.TextBoxFor(model => model.MessageText, new { @id = "txtMsg", @onclick = "HideMsg();" })
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<input id="btnSend" type="button" value="Send" class="btn btn-info btn-sm" onclick="Send();" />
</div>
</div>
@Html.LabelFor(model => model.MessageText, new { @id = "lblMsg", style = "display: none;" })
</div>
</div>
}
</body>
</html>
推荐答案
（ ＃modelopen）。live（ 点击， function （）{
调试器;
("#modelopen").live("click", function () { debugger;
（ ＃窗口）。d ialog（{
title： 发送消息，
宽度： 430 ，
height： 250 ，
modal： true ，
按钮：{
关闭： function （）{
("#window").dialog({ title: "Send message", width: 430, height: 250, modal: true, buttons: { Close: function () {
（ this ）。dialog（' close'）;
}
}
}）;
return false ;
}）;
< / script >
< script type = text / javascript >
function 发送（）{
调试器;
var sender =
(this).dialog('close'); } } }); return false; }); </script> <script type="text/javascript"> function Send() { debugger; var sender =
这篇关于如何在mvc中单击按钮时生成模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
