如何使用JQUERY调用局部视图

时间:2014-08-03 05:58:20

标签: jquery asp.net-mvc-4 partial-views getjson

我尝试使用ajax加载部分视图。但它给我的错误为Internal char error。 我调试代码然后调用操作以及调试局部视图但是,在部分视图的最后一行之后它给了我内部char错误。

下面的部分视图是

@model company.learn.data.Models.ProductViewModel
<div></div>

行动代码如下:

  public ActionResult LoadProducts()
    {
        RepositoryProductManager m = new Repository.ProductManager();
        var p = m.RetrieveAllProducts();
        var l = p.Select(o => new ProductViewModel() { Cost = o.Cost, Description =    o.Description, Id = o.Id, ProductName = o.ProductName, ProductTypeName =   o.ProductType.Name, ProductTypeId = o.ProductTypeId }).ToList().FirstOrDefault();
        return PartialView("_LoadProducts",l);
     } 

jquery ajax call:

@section scripts
{
<script>
    $.getJSON('@Url.Action("LoadProducts","ProductManagement")', null, function (data)          {
        alert('f');
        //$('#ProductsDiv').html(data);
        alert('f');
    }
    ).error(function (e1, e2, e3) { alert(e3); });  //every time goes to alert this error.

   </script>

}

当我从局部视图中删除DIV元素并且只保留第一行(模型绑定)时 然后它没有给我错误,但是,当我在这个视图中添加任何元素时,它会给我错误。

请指导我做出奇怪的行为。

谢谢

3 个答案:

答案 0 :(得分:9)

您正在使用$.getJSON并在控制器中返回PartialView

$.getJSON更改为ajax来电并设置dataType: "html"

$.ajax({
    url: '/ProductManagement/LoadProducts',
    dataType: "html",
    success: function (data) {
        //$('#ProductsDiv').html(data);
    }
});

答案 1 :(得分:0)

是的,试试ajax帖子。而不是getJSON()。如果上面的内容不起作用,请参阅完整的ajax配置。如果还是不行,请告诉我。

   $.ajax({ 
         url: "/ProductManagement/LoadProducts", 
         contentType:'application/html; charset=utf-8',
         type:'GET',
         dataType:'html',
                 success: function (evt) { 

                }, 
                error: function (req, status, error) { 

                } 
            });

答案 2 :(得分:0)

您可以使用jQuery $。get(),如下所示:

@section scripts
{
<script>
    $.get('/ProductManagement/LoadProducts', null, function (data){
        alert('f');
        //$('#ProductsDiv').html(data);
        alert('f');
    }
    ).error(function (e1, e2, e3) { alert(e3); });  //every time goes to alert this error.

   </script>

}