使用Ajax的MVC部分视图-未出现在div中

Question

I have a page that asks has a search by name function and then returns a partial view in a div with all the products that match the name.

This is my Ajax (details are being taken and passed to the controller accordingly since I tested it):

 <script type="text/javascript">
 function SearchName() {
    var names = $('#prodname').val();

    var param = { name: names};

    $.ajax({
        url: '@Url.Action("FilternameM")',
        type: "POST",
        datatype: "html",
        UpdateTargetId: "divResult",
        data: param,
        success: function (data) {
            $('#divResult').empty();
            $('#divResult').html(data);
        }
    });
}
</script>

This is the controller (methods and variables are processed all properly):

public PartialViewResult FilternameM(string name)
    {
        try
        {
            Product[] products = new ProductService.ProductsServiceClient().SearchProduct(name);
            //List<Product> prod = products.ToList();
            ViewBag.NameList = products;
            return PartialView("_filtername", products);
        }
        catch
        {
            return PartialView("_filtername");
        }
    }

The partial view is then below:

@model Common.Product[]

@foreach (var item in Model)
{
        <div id="item" class="itemStyleProd">  
        <br /> 
                   <img src="@Html.DisplayFor(modelItem => item.ImageLink)" width="100px" height="100px" alt="image" style="border:3px"/>
                  <br />                            
                    @Html.DisplayFor(modelItem => item.Name)    <br />      
                    Retail Price: €@Html.DisplayFor(modelItem => item.Price)<br />
                    Date Listed: @Html.DisplayFor(modelItem => item.DateListed) <br />
                    @Html.ActionLink("Details", "Details", new { id = item.Name })          

        </div>   
}

I debugged the function and it is entering both the controller method and the Partial View. The only problem is that the partial view is not being displayed in the view then. I think that it has to do with the ajax!

This is the div that should display it:

<div id="divResult"></div>

Answer 1

Simply do like this:

$.ajax({
        url: '@Url.Action("FilternameM")',
        type: "POST",
        datatype: "html",
        data: param,
        success: function (data) {
            $('#divResult').empty();
            $('#divResult').html(data);
        }

UpdateTargetId is Razor AjaxOptions class property, why are you putting it in jquery ajax.

Answer 2

change the type of method "POST" to "Get" and try hope this will help you

$.ajax({
    url: '@Url.Action("FilternameM")',
    type: "GET",
    datatype: "json",
    data: param,
    success: function (data) {
        $('#divResult').empty();
        $('#divResult').html(data);
    }
});

Answer 3

That coding is actually CORRECT. I just forgot to update my div name so it didn't match!