Question

我在MVC 4.0中有一个非常简单的表单，我的项目是基于MVC4 VS2012模板的bootstrap3。我想做的就是让用户提交表单，然后在我的控制器中进行一些验证，然后根据我传回视图的内容，它应该显示一个引导警报（错误或成功）

我已将表单连线，以便在我单击“发送”时正确触发控制器上的正确操作。但我不确定以下事情：

如何隐藏警报，使其仅在我将结果返回到视图后显示。
我希望显示错误或成功警报，我是否会在jQuery中通过.addClass执行此操作？

！[在此处输入图片说明] [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>

Answer 1

我首先建议您按照Jonesy的建议研究ViewModels，但要回答您的问题，一种简单的方法（可能不是最优雅的）是在控制器中设置ViewBag属性，例如： / p>

... (code that validates data sent from view)
ViewBag.TheResult = true;
...

然后，改变你的观点：

@if (ViewBag.TheResult == true) {
<div class="alert alert-success" >             
    <strong>Thank you!</strong> Your query has been submitted. 
</div>
}

如果您成功验证了表单，这将确保表单仅显示警报。确保将TheResult的值设置为负值，因为视图将在ViewBag中看到它。

至于你的第二个问题，只需在ViewBag中设置类的值并在标记中使用它，就可以在没有JQuery的情况下以类似的方式解决它。

Answer 2

我最终使用了淘汰赛和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);

在MVC4表单提交后显示twitter引导程序警报

2 个答案: