在MVC4表單提交後顯示twitter bootstrap警報

Question

我在MVC 4.0中有一個非常簡單的表單，我的項目是基於MVC4 VS2012模板的bootstrap3。我想要做的是讓用戶提交表單，然後在我的控制器中進行一些驗證，然後根據我傳回的視圖，它應該顯示引導警報（錯誤或成功）

I將表單連接起來，以便在單擊「正確發送」時觸發控制器上的正確操作。但我不確定以下事情：

1. 如何隱藏警報，以便它只在我將結果返回到視圖後顯示。
2. 我希望顯示錯誤或成功警報，我會通過.addClass在jQuery中執行此操作嗎？

[在這裏輸入的形象描述] [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

我會建議你研究的ViewModels爲Jonesy以上建議啓動，但回答你的問題，一個簡單的方法（可能不是最優雅的）是在你的控制器中設置一個ViewBag屬性，例如像這樣：

... (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> 

淘汰賽

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);