jquery ajax将部分视图加载到div标签MVC

时间:2013-12-02 20:57:03

标签: asp.net-mvc jquery

我一直在搜索如何进行jquery调用以在我的索引视图上的div标签中加载局部视图。当我点击树上的链接时,我没有得到部分视图更新。第一次运行时部分视图加载b / c我调用<div id="divid"> @Html.Partial("_InnerView")</div>。之后,当我点击链接时没有任何反应。或许我在这里没有全面了解。有人提到使用$('#divid').load = data;$('#divid').innerHTML= data;,但没有任何对我有用。这就是我所拥有的。

控制器:

 public ActionResult Test(string parentEls)
    {
        if (Request.IsAjaxRequest())
        {
            Employee employee = new Employee();
            employee.Name = parentEls + "1";
            return PartialView("_InnerView", employee);
        }
        return View("_InnerView");            
    }

索引视图:

<div id="divid">
@Html.Partial("_InnerView")</div>


$('#tree a').click(function () {
    var parentEls = $(this).parents('ul').map(function () {
        return $(this).find('a').first().text();
    }).get().join(", ");

    $.ajax({
        type: 'POST',
        url: '@Url.Content("~/Home/Test")',
        data: {
            parentEls: parentEls                
        },
        success: function(data) {
            $('#divid').innerHTML = data;
        }
    });
});

_InnerView.cshtml:

  @model TreeDemo.Models.Employee
 EmpName:@ Model.Name

更新:我使用了这个

 $.ajax({ url: '/Home/Test/', contentType: 'application/html; charset=utf-8', type: 'GET', dataType: 'html', data: { parentEls: parentEls } }) 

3 个答案:

答案 0 :(得分:4)

你必须使用

$('#divid').html(data);

而不是

$('#divid').innerHTML = data;

答案 1 :(得分:1)

在div MVC 4中加载部分视图

最近我想在做了很多R&amp; D并且它为我工作之后加载Div中的Partal View

 $.ajax({
    type: 'POST',
    url: '@Url.Content("~/ControllerName/ActionName")',
    data: {
        title: title
    },
    success: function(result) {
        $('#divid').innerHTML = result;
    }
});

    And In Partal View Action Controller Code

    public PartialViewResult ShowCategoryForm(string title)
    {
        Model model = new Model();
        model.Title = title;
        return PartialView("~/Views/ControllerName/PartalView.cshtml", model);
    }

答案 2 :(得分:0)

我认为如果您检查通话的请求/响应对象会很有用,这样您就可以看到拨打电话后发生了什么......根据您的代码,我发现您发布了使用

 $.ajax({
        type: 'POST',
        url: '@Url.Content("~/Home/Test")',
        data: {
            parentEls: parentEls                
        },
        success: function(data) {
            $('#divid').innerHTML = data;
        }
    });

但你的行动标记为'获得'......你需要有类似的东西

[HttpPost]
public ActionResult Test(string parentEls)

所以MVC可以理解在使用HttpPost动词时应该调用动作