如何使用JQUERY调用局部视图

Question

我将尝试使用Ajax加载部分视图，但是它会出现一个“内部字符错误”的错误提示。我调试了代码，发现它可以调用Action并且还能够调试部分视图，但是在部分视图的最后一行之后，它会出现“内部字符错误”的错误提示。

以下是部分视图内容：

@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调用：

@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元素并仅保留第一行（模型绑定）时，它不会给我错误，但是，每当我在此视图中添加任何元素时，它都会给我错误。

请指导我该怎么解决这种奇怪的行为。

谢谢

- user3711357

Answer 1

你正在使用 $.getJSON，并在控制器中返回一个 PartialView。

将 $.getJSON 改为 ajax 调用，并设置 dataType: "html"。

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

- Saranga

---

谢谢，它有效。明白了，它是HTML，所以getJSON只适用于JSON数据... - user3711357

我已经做了，但是当我提交表单时，在控制器端模型为空！有人可以帮助我吗？ - A.Dara

Answer 2

你可以按照以下方式使用 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>

}

- Dayan

Answer 3

是的，请尝试使用ajax post，而不是getJSON()。如果上述方法不起作用，请查看完整的ajax配置。如果仍然无法解决问题，请告诉我。

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

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

                } 
            });

- gaurav