2017-10-11 36 views
0

我有一个问题,我被堆放了一段时间。我对这个东西很陌生,所以请耐心等待。我认为解决问题非常简单,但我现在正在运行圈子。我的意图是提供一个简单的警报,通知该方法已完成。正如你在下面看到的,我的第一次尝试是用简单的字符串和if语句进行的。我不想重新加载页面,但现在我有一个问题,该方法结束后警报脚本启动。
所以我有一个控制器控制器方法成功后的Ajax警报

 [HttpPost] 
    public ActionResult Executor(LMCMainViewModel model) 
    { 
     var curlsExecutor = _curls; 
     var applicationPurgeCurl = curlsExecutor.GetApplicationCurl(model); 
     var temporary = model.SuccessExecutionStatus = curlsExecutor.CurlCaller(model.ApplicationList.ApplicationCurl); 
     var tempListOfApplications = PopulateModel(model); 
     model.ApplicationList.ListOfApplications = tempListOfApplications.ApplicationList.ListOfApplications; 
     model.SuccessExecutionStatus = temporary; 
     return View("ListOfApplications", model); 
    } 

我有我的观点

   @model LMC.Models.LMCMainViewModel 
      @{ 
       ViewData["Title"] = "Liberation"; 
      } 
      @using (Html.BeginForm("HeaderString", "LMC")) 
      { 
      } 
      @using (Html.BeginForm("Executor", "LMC", FormMethod.Post)) 
      { 

       <div class="col-sm-2" asp-action="ListOfApplications"> 
        @Html.DropDownListFor(x => x.ApplicationList.ChosenApplication, Model.ApplicationList.ApplicationListItem, new { @id = "DropdownID" }) 
       </div> 

       <div class="col-sm-2 col-sm-push-5"> 
        @Html.HiddenFor(x => x.ApplicationList.ApplicationListItem) 
        <input class="btn ctn-success" id="submit" type="submit" value="Submit" /> 
        <button id="submitButtonAjax" type="button" class="btn btn-success">Ajax button</button> 

        <div class="col-sm-12"> 
         @Html.Label(null, (Model.SuccessExecutionStatus ? "Success" : " "), 
         new { Style = Model.SuccessExecutionStatus ? "color: green;" : "color: red;" }) 


        </div> 
       </div> 
      } 

比我试图实现Ajax脚本的许多变化,但我有这么扭曲,我可以甚至不会发布你最好的一个......我知道的一件事是,当我删除:@using (Html.BeginForm("Executor", "LMC", FormMethod.Post))并尝试将其放入Ajax中时,它根本不起作用。我的目的是有一些,将工作是这样的:

<script type="text/javascript"> 
    $("#submitButtonAjax").on("click", function() { 
     $.ajax({ 
      type: 'POST', 
      url: "/LMC/Executor", 
      success: function() { 
       alert("Went well"); 
      } 
    }); 
</script> 

我试图控制方法的返回转换为JSON但它没有正常工作。我会很感激任何意见,在那里我可以阅读任何类似的东西(我知道可能有许多类似的主题,但我无法实现任何在我的代码中工作的东西,因为我发现我的问题向后退了一步与其他人比较),或者这很容易,我错过了一些东西,你可以发布一个解决方案。无论如何,非常感谢您的帮助。

+0

我不认为'$ .ajax'做什么,你认为它。这不会奇迹般地让你的页面异步。我建议阅读一下如何更有效地工作 – Liam

+0

[使用JQuery AJAX提交HTML表单]可能的重复(https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax) – Liam

回答

0

AJAX调用应该像波纹管

$(document).ready(function() { 
     $("#submitButtonAjax").on("click", function() { 
      var postData = { 
       FirstPropertyOfTheModel: ValueForTheFirstProperty, 
       SecondPropertyOfTheModel: ValueForTheSecondProperty, 
      }; 

     $.ajax({ 
      type: 'POST', 
      url: "/LMC/Executor", 
      data:postData, 
      success: function() { 
       alert("Went well"); 
      }, 
      error: function() { 
       alert("Opssss not working"); 
      } 
     }); 
    }); 
    }); 

数据是用于在控制器的方法的ActionResult的模型值。 FirstPropertyOfTheModel和SecondPropertyOfTheModel将被替换为属性名称并可分配相应的值。在URL可以使用

'@Url.Action("Executor", "LMC")' 

所以AJAX的样子

$(document).ready(function() { 
      $("#submitButtonAjax").on("click", function() { 
       var postData = { 
        FirstPropertyOfTheModel: ValueForTheFirstProperty, 
        SecondPropertyOfTheModel: ValueForTheSecondProperty, 
       }; 

      $.ajax({ 
       type: 'POST', 
       url: '@Url.Action("Executor", "LMC")', 
       data:postData, 
       success: function() { 
        alert("Went well"); 
       }, 
       error: function() { 
        alert("Opssss not working"); 
       } 
      }); 
     }); 
     });