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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20337665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:07:25  来源:igfitidea点击:

jquery ajax load partial view to div tag MVC

asp.net-mvcjquery

提问by AnhLun

I've been searching around with no luck on how to make a jquery call to load a partial view in a div tag on my Index view. Some how I am not getting the partial view to update when I click on a link on my tree. The partial view loads when I first run it b/c I call <div id="divid"> @Html.Partial("_InnerView")</div>. After that nothing happens when I click on the link. Or maybe I am not getting the full picture here. Some mentioned to use $('#divid').load = data;or $('#divid').innerHTML= data;but nothing works for me. This is what I have.

我一直在四处寻找如何进行 jquery 调用以在我的索引视图的 div 标签中加载部分视图,但没有运气。当我点击我的树上的链接时,我如何没有更新局部视图。部分视图在我第一次运行 b/c 时加载,我调用<div id="divid"> @Html.Partial("_InnerView")</div>. 之后,当我点击链接时什么也没有发生。或者也许我在这里没有得到全貌。有些人提到使用$('#divid').load = data;$('#divid').innerHTML= data;但对我不起作用。这就是我所拥有的。

Controller:

控制器:

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

Index view:

索引视图:

<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:

_InnerView.cshtml:

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

UPDATE: I got this to work with this

更新:我得到了这个

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

回答by Otto Kanellis

You have to use

你必须使用

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

instead of

代替

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

回答by Sanjay Dwivedi

Load Partial View in a div MVC 4

在 div MVC 4 中加载局部视图

Recently I want load Partal View in Div , after doing lots of R&D and It's work for me

最近我想在 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);
    }

回答by pollirrata

I think it can be useful if you check the request/response objects of your call, so you can see what is really happening after you make the call... As per your code, I can notice that you're posting using

我认为如果您检查呼叫的请求/响应对象会很有用,这样您就可以看到拨打电话后真正发生的事情......根据您的代码,我可以注意到您正在使用

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

but your action is marked for 'getting'... you'd need to have something like this

但你的行动被标记为“得到”......你需要有这样的东西

[HttpPost]
public ActionResult Test(string parentEls)

so MVC can understand that the action should be called when HttpPost verb is used

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