Question

I have an appointment form in my view. iam using ajax.beginform to submit form data to controller and return a partial view which says 'success!'. I also have a datetime picker input box in my form and beside that there is a check availability button. when i select a date i want to press check availability button to see if that date and time already exists in database. im using ajax call again in that form using jquery ajax. here is my controller code

public ActionResult CheckAvailability(string date)
         {
            bool available = true;
            if (ModelState.IsValid)
            {


                var result = astrodb.Appointments.Single(check => check.AppointmentTime == DateTime.Parse(date));

                if (result.FirstName.Count() == 0)
                {
                    available = true;

                }
                else
                {
                    available = false;
                }
            }
            else
            {
                available = false;
            }
            return PartialView(available);
        }

My ajax call is

       $(function(){


         $(document).ajaxStart(function()
          {
          showProgressModal('check-loading');
          });

          $(document).ajaxStop(function()
          {
          hidePrograssModal();
          });



          $("#button-check").click(function(){
          url:"@(Url.Action("CheckAvailability","Home"))",
          type: "POST",
          data:{name:$("#new").val()},
          cache:false,
          datatype:html,
          success: function(data){
          $("#check-success").html(data);}

          });
          });

Iam not getting output. bt Iam getting an error like in the below image and also my jquery datetimepicker stop working along with that.

Check this error

Can somebody help me with the code?

Updated Code:

   $(function(){


     $(document).ajaxStart(function()
      {
      showProgressModal('check-loading');
      });

      $(document).ajaxStop(function()
      {
      hidePrograssModal();
      });



      $("#button-check").click(function(){
      $.ajax({
      url:"@(Url.Action("CheckAvailability","Home"))",
      type: "POST",
      data:{name:$("#new").val()},
      cache:false,
      datatype:html,
      success: function(data){
      $("#check-success").html(data);}
      });
      });
      });

Answer 1

您在进行ajax调用时忘记添加$.ajax

$(function(){
         $("#button-check").click(function(){
             $.ajax({
                 url:"@(Url.Action("CheckAvailability","Home"))",
                 type: "POST",
                 data:{name:$("#new").val()}, // parameter name should be same in controller action 
                 cache:false,
                 datatype:'html',
                 success: function(data){
                    $("#check-success").html(data);
                 }
              })
         })
    })

或者您也可以使用$.post方法

$("#button-check").click(function(){
   $.post("someUrl",{data:somedata},callBackfunction);
}

家庭控制器

public PartialViewResult CheckAvailability(string name) // parameter name same as `ajax call data parameter`
{
   return PartialView(somePartialView)
}

Answer 2

$.ajax({
    type : 'post',
    url : URL,
    data : {Key : value,Key : value,Key : value},
    cache:false,
    beforeSend:function () {
                //this code is before seed 
    },
    success : function(response) {
                //this code is success
    },
    timeout:(1000*20),  //waiting time ,if time is over can itin function 
    error:function () {
        //this code is error
    }
});

Returning PartialView Result via Ajax

2 个答案: