twitter-bootstrap 在 MVC4 表单提交后显示 Twitter 引导程序警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23531808/
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
Displaying twitter bootstrap alert after MVC4 form submit
提问by FaNIX
I have a very simple form in MVC 4.0, my project is based off the bootstrap3 for MVC4 VS2012 template. All I wish to do is have the user submit the form, then do some validations in my controller, and then based on what I pass back to the view, it should show a bootstrap alert(either error or success)
我在 MVC 4.0 中有一个非常简单的表单，我的项目基于 MVC4 VS2012 模板的 bootstrap3。我希望做的就是让用户提交表单，然后在我的控制器中进行一些验证，然后根据我传递回视图的内容，它应该显示引导程序警报（错误或成功）
I have the form wired up so that it when I click Send it correctly fires the correct action on the controller. But I'm unsure about the following thing:
我已将表单连接起来，以便当我单击“发送”时它会正确触发控制器上的正确操作。但我不确定以下事情：
- How do I hide the alert so it only shows after I return a result to the view.
- I wish to display either an error or success alert, would I do this in jQuery, through .addClass?
- 如何隐藏警报，使其仅在我将结果返回到视图后才显示。
- 我希望显示错误或成功警报，我可以在 jQuery 中通过 .addClass 执行此操作吗？
![enter image description here][1]
![在此处输入图像描述][1]
[1]:
[1]：
<div class="panel panel-info">
<div class="panel-heading"><strong>Register your interest</strong></div>
<p></p>
<div class="panel-body">
<form name="contactform" class="form-inline" role="form" method="post" action="/Home/Contact">
<div class="form-group">
<label class="text-info">Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<p></p>
<div class="form-group">
<label class="text-info">Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<p></p>
<div class="form-group">
<label class="text-info">Comments</label><br />
<textarea class="form-control" cols="20" rows="2" style="width: 400px; height: 150px; max-height: 350px; max-width: 500px"></textarea>
</div>
<p></p>
<button id="myBtn" type="submit" value="send" class="btn btn-primary">Send</button><p />
<div class="alert alert-success" >
<strong>Thank you!</strong> Your query has been submitted.
</div>
</form>
</div>
回答by rfernandes
I'll start by suggesting you research ViewModels as Jonesy suggests above, but to answer your question, a simple way (probably not the most elegant) is to set a ViewBag property in your controller for example like this:
我将首先建议您像上面 Jonesy 建议的那样研究 ViewModels，但要回答您的问题，一个简单的方法（可能不是最优雅的）是在您的控制器中设置一个 ViewBag 属性，例如像这样：
... (code that validates data sent from view)
ViewBag.TheResult = true;
...
Then, change your view:
然后，改变你的看法：
@if (ViewBag.TheResult == true) {
<div class="alert alert-success" >
<strong>Thank you!</strong> Your query has been submitted.
</div>
}
This will make sure that the form only shows the alert if you validated the form successfully. Make sure you set the value of TheResulteven if negative, because the view will be expecting to see that in the ViewBag.
这将确保表单仅在您成功验证表单时显示警报。确保将TheResult即使为负的值设置为负值，因为视图将期望在 ViewBag 中看到该值。
As for your second question, you can resolve it in a similar way without JQuery by simply setting the value of the class in the ViewBag and using it in the markup.
至于你的第二个问题，你可以在没有 JQuery 的情况下以类似的方式解决它，只需在 ViewBag 中设置类的值并在标记中使用它。
回答by FaNIX
I just ended up using knockout and JS.
我最终使用了淘汰赛和 JS。
<div class="panel panel-info">
<div class="panel-heading"><strong>Register your interest</strong></div>
<p></p>
<div class="panel-body">
<form name="contactform" class="form-inline" role="form" method="post" action="/Home/Contact">
<div class="form-group">
<label class="text-info">Name</label>
<input type="text" data-bind="value: Name" class="form-control" placeholder="Name">
</div>
<p></p>
<div class="form-group">
<label class="text-info">Email</label>
<input type="email" data-bind="value: Email" class="form-control" placeholder="Email">
</div>
<p></p>
<div class="form-group">
<label class="text-info">Comments</label><br />
<textarea data-bind="value: message" class="form-control" cols="20" rows="2" style="width: 400px; height: 150px; max-height: 350px; max-width: 500px"></textarea>
</div>
<p></p>
<button id="mysubmit" type="submit" value="send" data-bind="click: btnCreateContact" class="btn btn-primary">Send</button><p />
<div id="myalert" class="alert alert-success" hidden="hidden">
<strong>Thank you! </strong> Your request has been submitted.
</div>
<div id="myalertError" class="alert alert-danger" hidden="hidden">
<strong>Error! </strong>Please complete all fields.
</div>
</form>
</div>
KNOCKOUT
昏死
var urlPath = window.location.pathname;
var CreateContactVM = {
Name: ko.observable(),
Email: ko.observable(),
message: ko.observable(),
btnCreateContact: function () {
$.ajax({
url: urlPath + '/Contact',
type: 'post',
dataType: 'json',
data: ko.toJSON(this),
contentType: 'application/json',
success: function (result) {
window.location.href = urlPath;
},
error: function (err) {
if (err.responseText == "success") {
$('#myalertError').hide();
$('#myalert').show();
$('#mysubmit').prop('disabled', true);
}
else {
$('#myalert').hide();
$('#myalertError').show();
}
},
complete: function () {
}
});
}
};
ko.applyBindings(CreateContactVM);
