获取部分视图的 Ajax 请求

Posted 2023-02-26

【中文标题】获取部分视图的 Ajax 请求

【英文标题】：Ajax request to fetch partial view

【发布时间】：2011-02-23 18:33:50

【问题描述】：

我的主要观点是这样的：

指数

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

<h2>
    Index</h2>

<script type="text/javascript">
    $(function() 
        $('#mylink').click(function() 
            $('#resultpartial1').load(this.href);
            return false;
        );
    );

    $(function() 
        $('#mysecondlink').click(function() 
            $('#resultpartial1').load(this.href,  id: 123 );
            return false;
        );
    );
</script>

<%= html.ActionLink("click me","Partial1","Foo",new MyViewModel  Foo = "123" , Bar="456" ,new  id = "mylink" ) %>
<%= Html.ActionLink("click me second link","Partial2", "Foo", new  id = "123" , new  id = "mysecondlink" 

) %>

和这样的控制器：

public class FooController : Controller

    //
    // GET: /Foo/

    public ActionResult Index()
    
        return View();
    

    public ActionResult Partial1(string id)
    
        // TODO: use the id to fetch the model from somewhere
        MyViewModel model = new MyViewModel  Bar = "a", Foo = "1" ;
        return View(model);
    

    public ActionResult Partial2(string id)
    
        // TODO: use the id to fetch the model from somewhere
        MyViewModel model = new MyViewModel  Bar = "b", Foo = "2" ;
        return View(model);
    

和这样的部分视图：

福： 酒吧：

福： 酒吧：

我总是得到由控制器操作设置的值。我想在视图中设置值并传递给部分视图。我该怎么做？

【问题讨论】：

对此有任何解决方案/提示吗？

到目前为止你有什么？你能发布一些代码吗？

我有一个需要两个链接的视图。我有两个局部视图和一个模型类。

【参考方案1】：

假设你有一个视图模型

public class MyViewModel

    public string Foo  get; set; 
    public string Bar  get; set; 

和一个控制器：

public class FooController: Controller

    public ActionResult Partial1(string id)
    
        // TODO: use the id to fetch the model from somewhere
        MyViewModel model = ...
        return View(model);
    

    public ActionResult Partial2(string id)
    
        // TODO: use the id to fetch the model from somewhere
        SomeOtherViewModel model = ...
        return View(model);
    

对应的局部视图：

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" 
%>
<div>Foo: <%= Html.DisplayFor(x => x.Foo) %></div>
<div>Bar: <%= Html.DisplayFor(x => x.Bar) %></div>

最后在你的主视图中你可以有一个链接：

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    new  id = "123" , 
    new  id = "mylink" 
) %>
<div id="resultpartial1" />

可能是 AJAX 化的：

$(function() 
    $('#mylink').click(function() 
        $('#resultpartial1').load(this.href);
        return false;
    );
);

当然，如果 id 参数仅在 javascript 中已知，您可以这样做：

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    null, 
    new  id = "mylink" 
) %>

然后：

$(function() 
    $('#mylink').click(function() 
        $('#resultpartial1').load(this.href,  id: 123 );
        return false;
    );
);

---

更新：

对于第二个链接：

<%= Html.ActionLink(
    "click me second link", 
    "Partial2", 
    "Foo", 
    new  id = "123" , 
    new  id = "mysecondlink" 
) %>
<div id="resultpartial2" />

然后：

$(function() 
    $('#mysecondlink').click(function() 
        $('#resultpartial2').load(this.href,  id: 123 );
        return false;
    );
);

【讨论】：

@Darin：把这个放在哪里：@model AppName.Models.MyViewModel Foo：@Html.DisplayFor(x => x.Foo) Bar：@ Html.DisplayFor(x => x.Bar)

@asif，我已经修改了我的代码以使用您未指定的 WebForms 视图引擎。如果您使用 WebForms 视图引擎，则将此代码放入 ~/Views/Foo/Partial1.ascx；如果您使用 Razor，则将此代码放入 ~/Views/Foo/Partial1.cshtml。

@asif，介意分享一下什么错误，或者你希望我读懂你的想法？

'System.Web.Mvc.HtmlHelper' 不包含 'DisplayFor' 的定义，并且没有扩展方法 'DisplayFor' 接受类型为 'System.Web.Mvc.HtmlHelper' 的第一个参数' 可以找到（您是否缺少 using 指令或程序集引用？）

@asif，然后尝试这样：<%: Model.Foo %> 但Html.DisplayFor 应该可以工作。你使用的是什么版本的 MVC？请从头开始在新创建的项目中尝试此操作。

【参考方案2】：

似乎是什么问题？

两个链接的模式应该是（如果你使用 jQuery）：

$(function()
    // attach link clicking functionality to call controller action via Ajax
    $("#LinkID").click(function(evt)  // reference 1 below
        evt.preventDefault();
        $.ajax(
            type: "GET",
            url: $(this).attr("href"), // if link has the correct URL
            success: function(data) 
                $("#containerID").append(data);
            ,
            error: function(xhr, status, err) 
                // Handle error ie. alert()
            
        );
    );

    // add code for the second link
);

如果两个链接的工作方式相同，那么您可以更改 reference 1 行中的选择器以将两个链接都包含在其中。但是，如果它们使用不同的容器，您可以将容器选择器作为自定义属性添加到链接中，并且仍然只使用单一功能。相应地更改代码。

您可以使用通常的方式在主视图上放置链接

<%= Html.ActionLink("Link text", "action", "controller", null, new  id = "LinkID" ) %>

所以他们将有正确的 URL，您可以按照上面的代码使用。使用控制器操作返回您需要在客户端显示的部分视图。

【讨论】：

链接应该是什么样子？

在 如何提供 ajax 将使用的 id ？