C# ASP.NET MVC 应用程序与 ajax 在视图中从不发送数据到 Z594C103F2C6E010C3D8ABE059

Question

I have an ASP.NET MVC application which has the following form in the view:

@using (Html.BeginForm("Updated", "OnlineEnrollment", FormMethod.Post))
{

 <section id="agreement" class="vh-100" style="background-color: #508bfc;">
    <div class="container py-5 h-100">

        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card shadow-2-strong" style="border-radius: 1rem;">
                    <div class="card-body p-5 text-center scrollHeight">

                        <h3 class="mb-5">Participant Agreement for Online Enrollment</h3>
                        <div id="agreenmentDIV" class="myDIV">
                            <div id="AgreementContent" class="content800">
                                <button class="btn btn-primary btn-lg btn-block" type="button" id="agreementButton" onclick="return DisplayProgressMessage(this, 'agreement');">I Agree</button>
                                <button class="btn btn-outline-primary btn-lg btn-block" type="button" id="cancelAgreementButton" onclick="return Cancel(this, 'agreement');">I DO NOT Agree</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="summary" class="vh-100 hideit" style="background-color: #508bfc;">
    <div class="container py-5 h-100">

        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card shadow-2-strong" style="border-radius: 1rem;">
                    <div class="card-body p-3 text-center scrollHeight">

                        <h3 class="mb-5">Online Enrollment</h3>

                        <h5 class="mb-5">Step 3 of 3</h5>

                        <div id="summaryDIV" class="myDIV">
                            <div id="summaryContent" class="content800">

                                <div class="form-outline mb-4">
                                    <label class="form-label text-left width95">
                                        Please review the contribution rate and election selections below.
                                    </label>
                                </div>
                                <div class="row width95">
                                    <label class="col-sm-9 col-form-label text-left">Contribution Rate</label>
                                    <label class="col-sm-3 col-form-label text-right" id="summaryRate"> </label>
                                </div>
                                <hr width=”75%” align=”center”>
                                <div id="summaryRow">
                                      <  show a summary of the data to be sent to the controller   >
                                </div>
                                <br />
                                <button class="btn btn-primary btn-lg btn-block" type="button" id="submitButton" onclick="return SaveData(this, 'confirm');">Confirm</button>
                                <button class="btn btn-warning btn-lg btn-block" type="button" id="restartButton" onclick="return StartOver(this, 'restart');">Start All Over</button>
                                <button class="btn btn-outline-primary btn-lg btn-block" type="button" id="cancelSummaryButton" onclick="return Cancel(this, 'cancel');">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

In jQuery, I have this code:

function SaveData(ctl, msg) {
    $(".submit-progress").removeClass("hidden");
    const myTimeout = setTimeout(function () {

        var sendData = [];
        var fundName = "";
        var percent = $("#electedRate").val();
        var fund = 0;
        var data = {};

        //
        // put the contribution rate into the object to send to the controller
        // we use fund = 0 to indicate this is the deferral rate
        //

        data = {
            'fund': fund,
            'fundName': fundName,
            'percent': percent
        };
        sendData.push(data);
        $('.election').each(function () {
            percent = parseInt($(this).val());
            if (percent > 0) {
                fund = $(this).next().val();
                fundName = $(this).parent().prev().text();
                data = {
                    'fund': fund,
                    'fundName': fundName,
                    'percent': percent
                };
                sendData.push(data);
            }
        });
        sendData = JSON.stringify(sendData);
        console.log(sendData);
        $.ajax({
            type: "POST",
            url: "@Url.Action("SaveElectionData")",
            dataType: "text",
            data: { 'formData': sendData },
            success: function (msg) {
                $("#Updated").submit();
            },
            error: function (req, status, error) {
                $("form").submit();
            }
        });
    }, 5);

}

When I run the application, and I look at the console under dev tools, for sendData, I see this:

[
    { "fund": 0, "fundName": "", "percent": "0" },
    { "fund": "66", "fundName": "American Funds 2060 Target Date Fund", "percent": 100 }
]

This is exactly what I anticipated on seeing.

And this is the code in the controller that the ajax should be sending the form data to:

    [HttpPost]
    public string SaveElectionData(List<FundElection> formData)
    {
        var returnString = "";
        string rateS = "";

        var MQMessage = participantSessionData.mqKey + "INTERNET/009EM";

        foreach (var record in formData)
        {
            bool res = false;
            int fund = 0;
            int pct = 0;

            res = Int32.TryParse(record.fund, out fund);
            res = Int32.TryParse(record.percent, out pct);

            string fundS = fund.ToString();
            string pctS = pct.ToString();

            if (fund == 0)
            {
                if (pct < 10)
                {
                    rateS = "0" + pct.ToString();
                } 
                else
                {
                    if (pct == 100)
                    {
                        rateS = "99";
                    } 
                    else
                    {
                        rateS = pctS;
                    }
                }
            }
            else
            {
                if (fundS.Length == 1 )
                {
                    fundS = "0" + fundS;
                }

                if (pctS.Length == 1)
                {
                    pctS = "00" + pctS;
                } 
                else
                {
                    if (pctS.Length < 3)
                    {
                        pctS = "0" + pctS;
                    }
                }

                MQMessage = MQMessage + fundS + pctS;
            }
        }

        < code to update database >

        MQMessage = participantSessionData.mqKey + "INTERNET/009RK" + rateS;
        participantSessionData = _mqSendRepo.mq6000Send(MQMessage, participantSessionData);

        < code to update database >

    return returnString;
}

And this is the model for FundElection:

public class FundElection
{
    public string percent { get; set; }
    public string fund { get; set; }
    public string fundName { get; set; }
}

I am getting the following error page:

This site can't be reached.

The webpage at https://localhost:44353/OnlineEnrollment/Updated might be temporarily down or it may have moved permanently to a new web address.

And I never hit the breakpoint that I have set in the controller. The breakpoint is set on the declaration of returnString.

Any ideas why this ajax call does not send data to the controller?

Thanks!

Edit 1: This is a picture of the Payload from the network tab:

Answer 1

Try to change $.ajax to following:

$.ajax({
  type: "POST",
  url: "@Url.Action("SaveElectionData")",
  contentType: "application/json",
  data: sendData,
  success: function (msg) {
      $("#Updated").submit();
  },
  error: function (req, status, error) {
      $("form").submit();
  }
});

And change method in controller to:

[HttpPost]
public string SaveElectionData([FromBody] List<FundElection> formData)
{
    //...
}

And are you sure that you get right url parameter in $.ajax ?

Answer 2

for the start you have a wrong url, assuming the controller name is OnlineEnrollment your url should be /OnlineEnrollment/SaveElectionData. Dont stringify sendData, and remove dataType

       // sendData = JSON.stringify(sendData);

        $.ajax({
            type: "POST",
             url:"/OnlineEnrollment/SaveElectionData",

             //dataType: "text",

            data: { formData: sendData},
           ....

if ajax still doesn't hit an action, try to use an attribute route

[HttpPost("~/OnlineEnrollment/SaveElectionData")]
public string SaveElectionData(List<FundElection> formData)
{
    //...
}

or you can use contentType: 'application/json; and stringify data in this case and use FromBody attribute

...
 type: 'POST',
 url:'/OnlineEnrollment/SaveElectionData',
 contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  data: JSON.stringify(sendData),
...

if ajax still doesn't hit an action, try to use an attribute route

[HttpPost("~/OnlineEnrollment/SaveElectionData")]
public string SaveElectionData([FromBody] List<FundElection> formData)
{
    //...
}