MVC表单提交上的弹出消息
Posted
技术标签:
【中文标题】MVC表单提交上的弹出消息【英文标题】：Popup message on MVC form submit 【发布时间】：2017-12-21 16:17:28 【问题描述】：我在 MVC 中有一个名为 Index 的视图，它在 focusout 事件上有一个输入文本，它呈现一个具有表单的局部视图。从部分视图提交表单后，我想显示成功或失败的弹出消息。
**Index.cshtml**
@Html.Label("inp")
@Html.TextBox("inp", new @class = "form-control input-sm", id = "inp" )
<div id=partial_1></div>
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-content">
</div>
</div>
<script type="text/javascript">
$("document").ready(function ()
$(document).on('focusout', 'input:text[id="imp"]', function (event)
$.ajax(
url: '@Url.Action("GetPartial1", "Controller")',
type: 'get',
async: false,
data: inp: $("#inp").val(),
success: function (resp)
$('#partial_1').html(resp);
,
error: function (resp)
);
);
</script>
我的控制器正在关注
**Controller.cs**
public ActionResult GetPartial1(string inp)
var model=getModel(inp);
return PartialView("_Partial1", model);
public ActionResult save(Model form)
return PartialView("_Partial2");
我的部分视图如下
**_partial1.cshtml**
@using (Html.BeginForm("save", "Controller"))
<div class="form-group">
@Html.LabelFor(modelval => modelval.Title)
@Html.TextBoxFor(modelval => modelval.Title)
<button type="submit" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modal-container">Save</button>
</div>
我的部分视图如下
**_partical2.cshtml**
<div class="modal-body">
<p>massage</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
问题是模态不加载仅显示部分视图。当我使用动作链接时，模态显示完美，但我无法通过动作链接传递剃刀形式。我的目标是当表单提交时它会显示一条没有重定向的警报消息。我该怎么做？
【问题讨论】：
【参考方案1】：请你试试这个。它对我有用。帖子很长，您可以拿出解决问题所需的内容。
查看：
@
Layout = null;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index***100</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("document").ready(function ()
$("#inp").focusout(function (event)
$.ajax(
//I'm using Home controller, you can you ControllerController
url: '@Url.Action("GetPartial1", "Home")',
type: 'get',
async: false,
data: inp: $("#inp").val() ,
success: function (resp)
$('#partial_1').html(resp);
,
error: function (resp)
);
);
);
</script>
</head>
<body>
<div class="container">
<div class="form-grouprow">
<div class="col-md-3">
@Html.Label("inp")
@Html.TextBox("inp", null, new @class = "form-control input-sm", id = "inp" )
</div>
</div>
</div>
<div id=partial_1></div>
</body>
</html>
控制器/模型：
public class PopupViewModel
public string inp get; set;
public string Title get; set;
public class HomeController : Controller
public PartialViewResult GetPartial1(string inp)
var model = getModel(inp);
return PartialView("_Partial1", model);
//start here, you can name it different in routeconfig
public ActionResult Index***100()
return View();
static PopupViewModel getModel(string inp)
return new PopupViewModel inp = inp ;
public PartialViewResult save(PopupViewModel popupViewModel)
//you can put a breakpoint here to see popupViewModel data
ViewBag.message = "success";
return PartialView("_Partial2");
_Parital1.cshtml 在共享中：
@model Testy20161006.Controllers.PopupViewModel
@*I am using HomeController, you can use ControllerController if you want*@
@using (Html.BeginForm("save", "Home"))
<div class="form-group">
@Html.LabelFor(modelval => modelval.Title)
@Html.TextBoxFor(modelval => modelval.Title)
@Html.TextBoxFor(modelval => modelval.inp)
<button type="submit" class="btn btn-primary pull-right">
Save
</button>
</div>
_Partial2.cshtml 在共享中：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function ()
$("#modal-container").modal('show');
)
</script>
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-content">
<div class="modal-body">
<p>@ViewBag.message</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div>
@*Index***100, you can use a different page*@
@Html.ActionLink("return", "Index***100")
</div>
【讨论】：
以上是关于MVC表单提交上的弹出消息的主要内容，如果未能解决你的问题，请参考以下文章
jQuery - e.preventDefault 难题/阻止默认后无法提交表单