使用 .net MVC 进行 Ajax 调用答案

【问题标题】：Ajax call with .net MVC使用 .net MVC 进行 Ajax 调用
【发布时间】：2018-11-29 04:32:53
【问题描述】：

我正在尝试使用 Ajax 提交表单。但是当我提交时，页面会重新加载并且 url 会更改。我认为由于 @Html.AntiForgeryToken();

导致 url 发生变化

查看我的代码如下：

这就是我的表单的样子：

@model PersonModel

....   

<form action="SubmitLead" class="new-lead">
     @Html.AntiForgeryToken();
        <div class="col-md-12">
           <p>
             <input type="hidden" value="@Model.TrackingCode" id="hdnTrackingCode" /> 
             My name is @Html.TextBoxFor(model => model.FirstName, 
             new { @placeholder = 
             Html.DisplayNameFor(model => model.FirstName) })
             @Html.TextBoxFor(model => model.Surname, new { @placeholder = Html.DisplayNameFor(model => model.Surname) })
           </p>
        </div>
        <div class="clearfix"></div>
        <div class="col-md-12 text-center">
           <button type="submit" id="btnSubmit" class="orange-button">Get Quotes Now</button>
        </div>
</form>
@if (Model.Results != null &&
     Model.Results.IsSuccessful)
     {
         <div class="col-md-12 text-center">
         <img src="~/Content/Images/Products/new-success.png" height="24px" />
         <p id="result"></p>
         </div>
     }

请在此处查看我的脚本：

@section Scripts{

<script type="text/javascript">
    $(document).ready(function () {
        $('.new-lead').submit(function (event) {
            $.ajax({
                url: '@Url.Action("Lead/SubmitLead")',
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'json',
                success: function (result) {
                    var resultMessage = "success";
                    $('result').html(resultMessage);
                }
            })
        }) 

    })
</script>

【问题讨论】：

标签： ajax asp.net-ajax

【解决方案1】：

这样做

<form onsubmit="return submit(thi)" class="new-lead">
   ....
</form>

<script>
function submit(e){

 $.ajax({
                url: '@Url.Action("Lead/SubmitLead")',
                type: 'POST',
                data: $(e).serialize(),
                dataType: 'json',
                success: function (result) {
                    var resultMessage = "success";
                    $('result').html(resultMessage);
                }
            }) 
    return false; 
   }
</script>

【讨论】：