2016-11-30 20 views
-2

私のコードはレコードをデータベースに正常に挿入しましたが、「Sent successfully」メッセージを取得せず、他のビューにリダイレクトせず、挿入後にテキストボックスをクリアします。 postメソッドが停止しているようです。データベースにレコードを挿入しますが、ajax呼び出しで成功コードを再生しません

のcontroler:

//GET 
    [HttpGet] 
    public ActionResult ContactUs() 
    { 
     return View(); 
    } 

//POST 
    [HttpPost] 
    public ActionResult ContactUs(string Name, string Email, string Message, string Address) 
    { 
     ContactusMessages contactUs = new ContactusMessages(); 
     contactUs.Name = Name; 
     contactUs.Email = Email; 
     contactUs.Phone = "---"; 
     contactUs.Message = Message; 
     contactUs.IPAddress = Address; 
     contactUs.IsSeen = false; 
     contactUs.DateAdded = DateTime.Now; 
     db.ContactusMessages.Add(contactUs); 
     db.SaveChanges(); 
     ModelState.Clear(); 

     return RedirectToAction("Index", "HomeEn"); 

    } 

ビュー:私はあなたがAjax.Beginformを必要と理解何

@{ 
ViewBag.Title = "ContactUs"; 
Layout = "~/Views/Shared/_LayoutUserEn.cshtml"; 
} 

<section class="body-contact"> 
<div class="container"> 
    <div class="content" id="contact-us"> 
     <div class="top"> 
      <img src="~/Content/itree-en/images/logo.png" alt="logo"> 
      <h3>Contact Us</h3> 
     </div> 

      <form id="myForm" method="post"> 

      <div class="right"> 
       <input id="Name" name="Name" placeholder="Name" type="text" value="" /> 

       <h5 id="Err_Email" style="font-weight: 100;font-size: 14px;color:#FF0000;"></h5> 
       <input id="Email" name="Email" placeholder="Email " type="text" value="" /> 

       <input id="Address" name="Address" placeholder="Address" type="text" value="" /> 

      </div> 
      <div class="left"> 

       <textarea cols="20" id="Message" name="Message" placeholder="Message" rows="2"></textarea> 

       <button type="submit" value="Send" class="hvr-underline-from-center" id="b">Send</button> 

       <h5 id="result"><span class="field-validation-valid" data-valmsg-for="message" data-valmsg-replace="true"></span></h5> 
      </div> 
      </form> 

      </div> 
      </div> 
      </section> 
      <script> 
      function onformsubmitProject() { 
     if ($('#Name').val() != '' && $('#Email').val() != '' && $('#Address').val() != '' && $('#Message').val() != '') { 
      return true; 
     } 
     else { 
      if ($('#Name').val() == '') { $('#Name').css("borderColor", "red"); } else { $('#Name').css("borderColor", ""); } 
      if ($('#Email').val() == '') { $('#Email').css("borderColor", "red"); } else { $('#Email').css("borderColor", ""); } 
      if ($('#Address').val() == '') { $('#Address').css("borderColor", "red"); } else { $('#Address').css("borderColor", ""); } 
      if ($('#Message').val() == '') { $('#Message').css("borderColor", "red"); } else { $('#Message').css("borderColor", ""); } 
      return false; 
     } 
     }; 
     </script> 
     <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myForm').on('submit', function (event) { 
      event.preventDefault(); 
      if (!onformsubmitProject()) return false; 
      $.ajax({ 
       url: '/HomeEn/ContactUs', 
       type: 'post', 
       data: $('#myForm').serialize(), 
       beforeSend: function() { 

        $('#b').html('Sending .....'); // change submit button text 
        $('#result').text(""); 
        $('#Name').css("borderColor", ""); 
        $('#Email').css("borderColor", ""); 
        $('#Address').css("borderColor", ""); 
        $('#Message').css("borderColor", ""); 
       }, 
       success: function (data) { 
        // There is no problem with the validation 
        if (data.success) { 
         $('#b').html('Send'); 
         $('#result').text("Sent successfully"); 
         document.getElementById("myForm").reset(); 
         $('#Name').css("borderColor", ""); 
         $('#Err_Email').text(""); 
         $('#Address').css("borderColor", ""); 
         $('#Message').css("borderColor", ""); 
         $('#Email').css("borderColor", ""); 
        } 
        // Problem happend during the validation, display message related to the field. 
        $.each(data.Errors, function (key, value) { 
         if (value != null) { 
          //$("#Err_" + key).html(value[value.length - 1].ErrorMessage); 
          $("#" + key).css("borderColor", "rgba(247, 5, 5, 0.53)"); 
          $('#b').html('Send'); 
          $('#result').text(""); 
         } 
        }); 
       } 
      }); 
     }); 
    }); 

+0

少し奇妙に見えます。非同期呼び出しを使用してデータを取得していますが、呼び出しているメソッドがアクションにリダイレクトしています。その行動には何がありますか? – stuartd

+1

これは、データを取得するコードがないためです。 HttpGetメソッドでView()を返す代わりに、コードを追加して情報を取得する必要があります。 – Auguste

+0

いいえ何も行かず、同じページにあり、テキストボックスはいっぱいです – Heba

答えて

1

。私はそれに従ってあなたの意見を変えました。チェックしてください。

@{ 
     ViewBag.Title = "ContactUs"; 
     Layout = "~/Views/Shared/_LayoutUserEn.cshtml"; 
     var formId = Guid.NewGuid().ToString(); 
    } 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 

<section class="body-contact"> 
    <div class="container"> 
     <div class="content" id="contact-us"> 
      <div class="top"> 
       <img src="~/Content/itree-en/images/logo.png" alt="logo"> 
       <h3>Contact Us</h3> 
      </div> 
      @using (Ajax.BeginForm("ContactUs", "HomeEn", new AjaxOptions 
        { 
         HttpMethod = "post", 
         OnBegin = "Begin", 
         OnFailure = "Failure", 
         OnComplete = "Complete", 
         OnSuccess = string.Format("Success(data, '{0}')", formId) 
        }, new{id = formId})) 
      { 
       <form id="myForm" method="post"> 

        <div class="right"> 
         <input id="Name" name="Name" placeholder="Name" type="text" value="" /> 

         <h5 id="Err_Email" style="font-weight: 100;font-size: 14px;color:#FF0000;"></h5> 
         <input id="Email" name="Email" placeholder="Email " type="text" value="" /> 

         <input id="Address" name="Address" placeholder="Address" type="text" value="" /> 

        </div> 
        <div class="left"> 

         <textarea cols="20" id="Message" name="Message" placeholder="Message" rows="2"></textarea> 

         <button type="submit" value="Send" class="hvr-underline-from-center" id="b">Send</button> 

         <h5 id="result"><span class="field-validation-valid" data-valmsg-for="message" data-valmsg-replace="true"></span></h5> 
        </div> 
       </form> 
      } 


     </div> 
    </div> 
</section> 

<script type="text/javascript"> 

    function onformsubmitProject() { 
     if ($('#Name').val() != '' && $('#Email').val() != '' && $('#Address').val() != '' && $('#Message').val() != '') { 
      return true; 
     } 
     else { 
      if ($('#Name').val() == '') { $('#Name').css("borderColor", "red"); } else { $('#Name').css("borderColor", ""); } 
      if ($('#Email').val() == '') { $('#Email').css("borderColor", "red"); } else { $('#Email').css("borderColor", ""); } 
      if ($('#Address').val() == '') { $('#Address').css("borderColor", "red"); } else { $('#Address').css("borderColor", ""); } 
      if ($('#Message').val() == '') { $('#Message').css("borderColor", "red"); } else { $('#Message').css("borderColor", ""); } 
      return false; 
     } 
    }; 


    function Begin() { 

     if (!onformsubmitProject()) return false; 
     $('#b').html('Sending .....'); // change submit button text 
     $('#result').text(""); 
     $('#Name').css("borderColor", ""); 
     $('#Email').css("borderColor", ""); 
     $('#Address').css("borderColor", ""); 
     $('#Message').css("borderColor", ""); 
    } 
    function Success(data, formId) { 
     if (data == "success") { 
      $('#b').html('Send'); 
      $('#result').text("Sent successfully"); 
      document.getElementById(formId).reset(); 
      $('#Name').css("borderColor", ""); 
      $('#Err_Email').text(""); 
      $('#Address').css("borderColor", ""); 
      $('#Message').css("borderColor", ""); 
      $('#Email').css("borderColor", ""); 
     } 

    } 

    function Failure(data) { 

    } 
    function Complete(data) { 

    } 

</script> 

正常に動作させるには、jquery.unobtrusive-ajax.jsを追加する必要があります。

また、コントローラを少し変更する必要があります。あなたはJsonResultを送信しなければなりません。あなたはJavascript関数でこれに対応する結果を受け取ります。

 [HttpPost] 
     public ActionResult ContactUs(string Name, string Email, string Message, string Address) 
     { 
      ContactusMessages contactUs = new ContactusMessages(); 
      contactUs.Name = Name; 
      contactUs.Email = Email; 
      contactUs.Phone = "---"; 
      contactUs.Message = Message; 
      contactUs.IPAddress = Address; 
      contactUs.IsSeen = false; 
      contactUs.DateAdded = DateTime.Now; 
      db.ContactusMessages.Add(contactUs); 
      db.SaveChanges(); 
      ModelState.Clear(); 
      return Json("success", JsonRequestBehavior.AllowGet); 
      // return RedirectToAction("Index", "HomeEn"); 

     } 

ここで私はjson結果として「成功」を返しました。あなたの要件に応じて変更することができます。

NB:機能(データ)と機能完了(データ)を意図的に空白にしました。あなたのコードをここに置いておくか、jsやAjaxコンストラクタからこれらを削除する必要がない場合は、 私はチェックして、コードは正常に動作しています。最高の運勢!!!!!!!

+1

Ajaxを動作させるにはBeginForm機能jquery.unobtrusive-ajaxライブラリのリファレンスを追加する必要があります。まだインストールされていない場合は、NuGetパッケージマネージャからインストールしてください。 – Anadi

+0

jquery.unobtrusive-ajax.js、どうすれば追加できますか?ナゲットから? – Heba

+0

yes NuGetパッケージマネージャまたはパッケージマネージャコンソール。 https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajaxのリンクに従ってください。 – Anadi

関連する問題