MVC Ajax not passing values as expected

I am very new to mvc and ajax, any help would be very welcome!

I am trying to call a stored procedure by Ajax call. I am passing a model and am very confused how i am getting 1 value passed correctly but my timedate values seem to be dropped.

<div>

    <input type="hidden" name="Id" value="1" id="Id" />
     Date:  <input type="text" id="Status_Date" class="datePicker" />
     Time: <input type="text" id="Status_Time" class="timePicker" />
    <button type="submit" value="Submit" class="save-bdm">SubmitMe</button>

</div>

Open in new window


 ajax call
<script type="text/javascript">
        $(function () {
            $('.save-bdm').on('click', function () {
                var tr = $(this).parents('tr:first');
                var Id = tr.find("#Id").val();
                var Status_Date = tr.find("#Status_Date").val();
                var Status_Time = tr.find("#Status_Time").val();
                var CallSPUpdateModel =
                    {
                        "Id": Id,
                        "Status_Date": Status_Date,
                        "Status_Time": Status_Time
                    };
                $.ajax({
                    url: '/SPCall/CallSP/',
                    data: JSON.stringify(CallSPUpdateModel),
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        alert(data);
                    },
                    error: function (jqxhr, textStatus, errorThrown) {
                        alert('Exception ' + jqxhr.data + ' Error: ' + errorThrown + ' status ' + textStatus);
                    }
                });

            });
        })
    </script>

Open in new window


Controller: I did commit out my con.open to DB so i dont jsut run the SP over and over again. I am checking my return with the message to see if the values are passed correctly.

public JsonResult CallSP(CallSPUpdateModel model)
        {

            SqlConnection con = new SqlConnection(connectionString);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = con;
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.CommandText = "Update_SP";
            cmd.Parameters.Add(new SqlParameter("@Id", "1"));
            cmd.Parameters.Add(new SqlParameter("@myDate", "01/08/2018"));
            cmd.Parameters.Add(new SqlParameter("@myTime", "16:00:00"));
            //con.Open();
            //object o = cmd.ExecuteScalar();
            //con.Close();

            string message = "Success from Controler " + model.Id + " : " + model.Status_Date + " : " + model.Status_Time;
            return Json(message, JsonRequestBehavior.AllowGet);
        }

Open in new window



Thank you for taking a look at this and any direction you can give. Im sure its a simple mistake but im just not seeing it.
Justin HullAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jeffrey Dake Senior Director of TechnologyCommented:
Have you done a console.log(CallSPUpdateModel) in your javascript file to see if it is passing the value correctly to the Ajax call?  Trying to help figure out where the problem may be?  Or also have you looked in your network tab to see what values are passed into the /SPCall/CallSP/ to see if you are sending the values you expect.
0
Julian HansenCommented:
One thing I am seeing is in your AJAX routine you are using selectors that include tr elements - which suggests your data is in a table. However your input elements have id's that don't appear to be unique. While your jQuery might be fetching the right value your document is invalid if it uses non-unique ID's

I would do your query like this
<script type="text/javascript">
    $(function () {
      $('.save-bdm').on('click', function () {
        // Your sample code is enclosed in a <div> so the tr here could also be a div
        // if that is how it is used in your code.
        var tr = $(this).closest('tr'); 
        var Id = tr.find("input[name='Id'").val();
        var Status_Date = tr.find(".datePicker").val();
        var Status_Time = tr.find(".timePicker").val();
        
        var CallSPUpdateModel = JSON.stringify({
            Id: Id,
            Status_Date: Status_Date,
            Status_Time: Status_Time
          });
          
        // What does this show in the console?
        console.log(CallSPUpdateModel);
        $.ajax({
          url: '/SPCall/CallSP/',
          data: CallSPUpdateModel,
          type: 'POST',
          contentType: 'application/json; charset=utf-8',
          success: function (data) {
            // Rather use console.log as it will show us what is
            // inside objects and arrays
            console.log(data);
          },
          error: function (jqxhr, textStatus, errorThrown) {
            alert('Exception ' + jqxhr.data + ' Error: ' + errorThrown + ' status ' + textStatus);
          }
        });

      });
    })
  </script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Justin HullAuthor Commented:
Julian, Thank you very much. You got me on the right path and i learned some new stuff with your example.
0
Justin HullAuthor Commented:
Thank you so much Julian!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET MVC

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.