Ajax不返回部分视图

Question

I reallly have a simple set of code to bring back a set of data that is triggered off a drop down.

this is the script:

function () {
   $('#ProviderID').change(function () {

    $.ajax({
        url: '/servicesDisplay/Index',
        type: 'Get',
        data: { id: $(this).attr('value') },
        success: function (result) {
            // The AJAX request succeeded and the result variable
            // will contain the partial HTML returned by the action
            // we inject it into the div:
            $('#serLocations').html(result);
        }
    });
}); 

This is the controller:

 public ActionResult Index(string id)
 {
     int prid = Int32.Parse(id.Substring(0, (id.Length-1))); 
     string mulitval = id.Substring((id.Length-1), 1).ToString();
     System.Data.Objects.ObjectResult<getProviderServiceAddress_Result> proList = theEntities.getProviderServiceAddress(prid);
     List<getProviderServiceAddress_Result> objList = proList.ToList();
     SelectList providerList = new SelectList(objList, "AddressID","Address1");
     //ViewBag.providerList = providerList;
     return PartialView("servicesDisplay/Index", providerList);
 }

This is the view:

@model OCS_CS.Models.servicesDisplay

  <div>
    @Html.DropDownList(model => model.ServiceAdderssID, (IEnumerable<SelectListItem>)model)
 </div>   

When the drop down passes the in the value. The apps does hit the controller. But it highlightes the drop down in a light red and the view never displays.

Answer 1

You are doing a GET, thats no meaning to pass data to ajax, you may pass data for POST:

First, put the value at the URL:

function () {
 $('#ProviderID').change(function () {

 $.ajax({
    url: '/servicesDisplay/Index/' + $(this).attr('value'),
    type: 'Get',
    success: function (result) {
        // The AJAX request succeeded and the result variable
        // will contain the partial HTML returned by the action
        // we inject it into the div:
        $('#serLocations').html(result);
    }
  });
});

Second, mark the method as GET

 [HttpGet]
 public ActionResult Index(string id)

Hopes this help you!

Answer 2

Try this short version which uses the jquery load method.

$(function(){

   $('#ProviderID').change(function () {
      $('#serLocations').load("@Url.Action("Index","ServicesDisplay")?id="
                                                              +$(this).val());   
    });

}); 

If you want to avoid caching of result, you may send a unique timestamp along with the querystring to avoid caching.

$('#serLocations').load("@Url.Action("Index","ServicesDisplay")?id="
                                                  +$(this).val()+"&t="+$.now()); 

Answer 3

You have quite a few problems with your code. First the model defined for your view is:

@model OCS_CS.Models.servicesDisplay

but in your action your're invoking the call to this view by passing in a SelectList:

SelectList providerList = new SelectList(objList, "AddressID","Address1");
return PartialView("servicesDisplay/Index", providerList);

this is not going to fly because the models do not match by type. Seconds problem is you are casting this SelectList into an IEnumerable. This is also not going to work. You need to cast to SelectList:

@Html.DropDownList(model => model.ServiceAdderssID, (SelectList)model)

but again until you match the type of your model in your action with the model on your view none of this will work. I suggest you install Fiddler to help you determine what sort of error are you getting.